Windy Community
    • Unread
    • Categories
    • Groups
    • Go to windy.com
    • Register
    • Login

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

    Scheduled Pinned Locked Moved Windy API v4
    3 Posts 2 Posters 4.4k Views 1 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • E Offline
      ecdis-windy-test
      last edited by

      31f29a16-5ec6-4e4f-b58d-6139b69de09d-image.png

      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 Chrome

      What 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 moment

      Thanks for any hints!

      David Ryzec 3D 1 Reply Last reply Reply Quote 0
      • David Ryzec 3D Offline
        David Ryzec 3 Windy Staff @ecdis-windy-test
        last edited by

        @ecdis-windy-test Hi, are you willing to publish your page publicly or to share your repo?

        E 1 Reply Last reply Reply Quote 0
        • E Offline
          ecdis-windy-test @David Ryzec 3
          last edited by

          @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.

          1 Reply Last reply Reply Quote 0
          • First post
            Last post
          Windy Community  |  Powered by excellent NodeBB
          Terms of Use     Privacy Policy     Windy.com