From e632002255754f3cf5a3b53b2d3a1468ae8c64cd Mon Sep 17 00:00:00 2001 From: Graham McIntire Date: Wed, 29 Apr 2026 12:50:28 -0500 Subject: [PATCH] fix(weather): paint overlay on mount instead of waiting for click renderLayer was called during mounted() before selectedTime was seeded from the dataset, so buildWeatherTileUrl returned null and no tile layer was added. The overlay only appeared when the user clicked a forecast hour and update_weather_overlay fired. Seed selectedTime (and timelineData) from data attributes before the first renderLayer. --- assets/js/weather_map_hook.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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 = ""