Two instances of the map on a page



  • 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?



  • @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;
    }


Log in to reply
 

Windyty, S.E. - all rights reserved. Powered by excellent NodeBB
NodeBB & contributors, OSM & contributors, HERE maps

Looks like your connection to Windy Community was lost, please wait while we try to reconnect.