diff --git a/app/public/app.js b/app/public/app.js
index b667fbf..0e242c0 100644
--- a/app/public/app.js
+++ b/app/public/app.js
@@ -125,13 +125,13 @@ async function flyToHurricane(storm) {
 
   const map = mapsOverview.map;
   if (!map) return;
+  if (!map.loaded()) await new Promise(resolve => map.once('load', resolve));
 
-  await renderHurricaneOverlay(map);
   map.flyTo({ center: [lon, lat], zoom: 4, duration: 900 });
 
+  const cat = (storm.classification || '').toUpperCase();
+  const label = cat === 'HU' ? 'Hurricane' : cat === 'TS' ? 'Tropical Storm' : 'Tropical Depression';
   setTimeout(() => {
-    const cat = (storm.classification || '').toUpperCase();
-    const label = cat === 'HU' ? 'Hurricane' : cat === 'TS' ? 'Tropical Storm' : 'Tropical Depression';
     new maplibregl.Popup({ closeButton: true, maxWidth: '240px' })
       .setLngLat([lon, lat])
       .setHTML(`<b>${storm.name || 'Storm'}</b><br>${label}<br>Winds: ${storm.intensity || '--'} mph${storm.movement ? '<br>Moving ' + storm.movement : ''}`)
@@ -173,7 +173,6 @@ async function flyToHurricane(storm) {
             'circle-stroke-width': 2, 'circle-stroke-color': '#fff',
           } });
 
-        // Fit map to show full track
         const allCoords = pts.features.map(f => f.geometry.coordinates);
         if (allCoords.length > 1) {
           const lons = allCoords.map(c => c[0]);
@@ -199,6 +198,9 @@ async function flyToHurricane(storm) {
       }
     } catch {}
   }
+
+  // Render overlay last so storm circles sit on top of the track layers
+  await renderHurricaneOverlay(map);
 }
 
 function renderPrecipChart(h, startIdx) {