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

    Two instances of the map on a page

    Windy API v4
    2
    2
    1.0k
    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.
    • K
      Kostis90
      last edited by

      I am trying and intend to use the windy map both to appear inside a small widget, as well as appear (increased in size), in a big modal when the expand map button is clicked on the widget.

      That would require 2 instances of the map to exist on the page as the application is an SPA and all content is shown on the same page.

      I tried implementing the above and although it does seem to be working (both maps are fine), a lot of console errors seem to appear, due to several of the main object's properties W being reinitialized. e.g. Object W.params already exists

      According to the Things to remember in the API Windy API v4 documentation:

      There can be only one instance of Windy Map on a page, but you can use multiple instances of Leaflet map on the same page.

      Does the above mean that I cannot do what I have in mind? Is this a conditions of use limitation or a technical limitation?

      A few questions based on the above:

      1. Are the console errors I'm getting normal behavior?

      2. Are they the reason why we shouldn't be using 2 instances of the map on the same page (due to the global W object being reinitialized?)

      3. Is there a workaround for this and would it be allowed and recommended?

      A 1 Reply Last reply Reply Quote 0
      • A
        arjannv @Kostis90
        last edited by

        @kostis90
        I do this by resizing the DIV of Windy.
        (Toggle class between contentbg and map-large)

        JS:
        var mapexpandbool = 0;
        var mapdivmenu = document.getElementById("weather-map");
        var mapdivmenutext = document.getElementById("weather-map+-");
        var mapframe = document.getElementById("weather-map");
        function weathermapexpand() {
        if (mapexpandbool === 0) {
        mapdivmenu.className = 'map-large';
        mapdivmenutext.innerHTML = '-';
        mapexpandbool = 1;
        } else {
        mapframe.className = 'contentbg';
        mapdivmenutext.innerHTML = '+';
        mapexpandbool = 0;
        }
        }

        CSS:
        .contentbg {
        width: calc(100% - 10px - 2px);
        border-width: 1px;
        border-color: rgba(255, 255, 255, 0.5);
        border-style: solid;
        background-color: rgba(0, 0, 0, 0.15);
        opacity: 1;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        display:inline-block;
        padding: 5px;
        margin-bottom: 15px;
        transition: .5s linear;
        -ms-transition: .5s linear;
        cursor: default;
        }
        .map-large {
        width: calc(90vw - 12px) !important;
        height: calc(90vh - 12px) !important;
        top: 0vh !important;
        display: block;
        position: absolute;
        z-index: 10;
        transition: .5s linear;
        -ms-transition: .5s linear;
        border-width: 1px;
        border-color: rgba(255, 255, 255, 0.5);
        border-style: solid;
        background-color: rgba(0, 0, 0, 1);
        padding: 5px;
        }

        1 Reply Last reply Reply Quote 0
        • First post
          Last post
        Windyty, S.E. - all rights reserved. Powered by excellent NodeBB
        NodeBB & contributors, OSM & contributors, HERE maps
        Terms of Use     Privacy Policy