Windy Map + LeafletJS OpenStreetMaps Same Page Error

[mdodesign]

I'm currently evaluating Windy Pro for a project, we are looking at having two maps side by side on the screen.

There seems to be a conflict somewhere and I can't find an answer here.

If the LeafletJS CSS is loaded the LeafletJS Map displays correctly (using OpenStreetsMap layer), but the WIndy map doesn't display correctly due to the CSS issues. If I do not load the LeafletJS CSS the Windy Map displays correctly but the 2nd Leaflet Map doesn't display correctly.

I've setup a test page linked below, this is just Bootstrap 4, JQuery and LeafletJS & Windy.

If anyone has any advice or suggestions that would be very much appreciated as Windy gives us exactly what we need for our application, but we need to be able to have the 2nd map next to it for different data display.

https://mdodesign.co.uk/maps/with-css.html

Thanks

[Frederic_turmel]

I have exactly the same issue...

[Frederic_turmel]

Any suggestions to solve this problem?

On the API documentation it's written that we can load leaflet CSS once more and use a leaflet map on the same page. Is there a trick?

[nesro]

Hi @mdodesign,
I tried your examples and there are multiple styles colliding with Windy.

I can think of three different solutions.

First is to add a CSS reset to the parent element of the #windy div. Styles for the wrapper are:

.windy-wrapper * {
all: revert;
}

Second solution comes from the documentation as @Frederic_turmel pointed out. Just move the link including leaflet.css in the head tag after loading of Windy script. It still didn't work perfectly, I needed to fix some z-indexes and progress bar that was affected from different css file:

There are these styles:

#windy #bottom *,
#windy #logo-wrapper *,
#windy #plugins *,
#windy #plugins,
#windy #mobile-ovr-select,
#windy #embed-zoom,
#windy #windy-app-promo * {
z-index: 1000;
}
#windy #bottom #progress-bar {
background-color: transparent;
text-align: left;
}

Last option is to use an iframe. Then you will have Windy absolutely separated from the other code.

I hope that any of the solution will work good for you! Let me know if you have any further questions.

Tomas