diff --git a/assets/js/weather_map_hook.ts b/assets/js/weather_map_hook.ts
index 611b3ff8..2f0b1fcb 100644
--- a/assets/js/weather_map_hook.ts
+++ b/assets/js/weather_map_hook.ts
@@ -436,6 +436,12 @@ export const WeatherMap: WeatherMapHook = {
       this.pushEvent("select_layer", { layer: storedLayer })
     }
 
+    // Seed selectedTime/timelineData from the dataset before the first
+    // renderLayer call. Without this, buildWeatherTileUrl returns null
+    // and no overlay paints until the user clicks a forecast button.
+    this.timelineData = JSON.parse(this.el.dataset.validTimes || "[]")
+    this.selectedTime = this.el.dataset.selectedTime || null
+
     this.renderLayer()
 
     this.handleEvent("update_weather_overlay", ({ selected }: { selected: string | null }) => {
@@ -589,9 +595,9 @@ export const WeatherMap: WeatherMapHook = {
     this.legend.addTo(this.map)
 
     // --- Forecast timeline ---
+    // timelineData and selectedTime are seeded earlier (before the
+    // initial renderLayer); the timeline DOM hookup happens here.
     this.timelineEl = document.getElementById("weather-forecast-timeline")
-    this.timelineData = JSON.parse(this.el.dataset.validTimes || "[]")
-    this.selectedTime = this.el.dataset.selectedTime || null
     this.playbackTimer = null
     this.timelineRenderedKey = ""