CSS conflict between windy API map and second leaflet map with automatically updated layer
-
Hello,
I'm trying to display a windy map side by side with a second leaflet map, which has a radar layer that automatically updates at a set interval (1 min for illustration purposes only). The radar is from the rainviewer API, which is free to use and doesn't require an API key.
However, there appears to be some conflict between the CSS from the windy API and that radar layer on the second map. If I include the windy map, the radar layer is not drawn, neither upon initialization nor during any update. Sometimes it does draw the radar the very first time upon loading, but then it disappears during any subsequent refreshes.
https://www.xiexieanke.de/weather/test_windy.html
When I comment out the windy section, it works as expected:
https://www.xiexieanke.de/weather/test_radar.html
A couple notes:
1 - I did have to , as otherwise the tiles of the second leaflet map don't show correctly at all. However, this appears to cause a conflict with the Windy Logo and colorbar etc. on the Windy map. It is not my intention to hide the Windy credits, and this is another CSS conflict I'm hoping to resolve.
I did try the .windy-wrapper * {all:revert;} suggestion found here, however, that did not work, either.
2 - I'm trying to avoid using
3 - This will ultimately be run locally only. I only uploaded it to my personal web server for illustration purposes.
Thank you for any and all help!
-
@xiexieanke Hello, after discussion with colleagues, we don't officially support this, but hopefully the community here will help you with the request.
-
@Suty Hello, thank you very much. I just noticed there are some code elements missing in the text, probably automatically removed or converted. However, I can not edit my post.
Under 1, it should say that I did have to include https://unpkg.com/leaflet/dist/leaflet.css.
I know this is normally not necessary when embedding the Windy API, and actually advised against due to some version conflicts, but as I mentioned, I need to or otherwise the tiles on the second map won't draw correctly.
Under 2, I was trying to say I'm trying to avoid having to use an iframe.
