Two instances of the map on a page

Kostis90

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:

Are the console errors I'm getting normal behavior?
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?)
Is there a workaround for this and would it be allowed and recommended?

arjannv

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