Map Forecast: Windy UI (logo/zoom/legend) hidden under tiles until zoom/pan (Vue 2 + Leaflet 1.4)
-

I’ve integrating Windy Map Forecast via libBoot.js into a Vue 2 app. The map renders and authorizes correctly, but the built-in Windy UI (logo, zoom buttons, layer selector, legend/timeline) is hidden under the weather tiles/canvases. Those UI elements briefly appear only while the map is redrawing (during zoom/pan) and then get covered again by the tiles.
Environment
Framework: Vue 2.7
Leaflet: project uses 1.9.x, but for Windy we load 1.4.0 as required
Windy API: Map Forecast via https://api.windy.com/assets/libBoot.js
Dev server: http://localhost:8080 (domains whitelisted; key authorizes fine)
OS/Browser: Windows 10/11, latest ChromeWhat we see
Weather layers render (particles, tiles) and updates work
Windy UI elements are present in the DOM but are not visible most of the time (seem to be behind the map tiles/canvases)
During zoom/pan, while old tiles are cleared and new tiles load, the UI becomes visible for a momentThanks for any hints!
-
@ecdis-windy-test Hi, are you willing to publish your page publicly or to share your repo?
-
@David-Ryzec-3
I've found the root of the issue. I use leaflet 1.9 in other pages of our vue site and there was a conflict with leaflet.css file from 1.9. When I remove leaflet.css includes on other pages windy map starts works well.Is there any way to use leaflet 1.9 for whole site and 1.4 (w/o leaflet.css) for a page with windy map?
Thanks.