<![CDATA[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?

]]>https://community.windy.com/topic/6920/two-instances-of-the-map-on-a-pageRSS for NodeWed, 13 May 2026 07:28:54 GMTWed, 10 Oct 2018 10:22:33 GMT60<![CDATA[Reply to Two instances of the map on a page on Wed, 10 Oct 2018 10:39:37 GMT]]>@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;
}

]]>https://community.windy.com/post/15725https://community.windy.com/post/15725Wed, 10 Oct 2018 10:39:37 GMT