Map centers properly ONLY after refresh

Hi @synergyhub, yes I can see what you mean. It only seems to centre properly once you refresh while the map is in the viewport (I tried refreshing when at the bottom of the screen and it wasn’t centred).

Can you please try the following:

– Excluding the spot forecast
– Embedding the widget manually from https://www.windy.com/-Embed-widget-on-page/widgets and seeing if the same problem occurs

Thanks,
David

Oh this looks like it’s going to be a fun one. I have created 6 test pages in addition to the real page you looked at 1st.

Each includes the Exact text used in the ShortCode block:

1) https://ourlummiisland.org/info/pss/weather/wtp-0/
2) https://ourlummiisland.org/info/pss/weather/wtp-1/
3) https://ourlummiisland.org/info/pss/weather/wtp-2/
4) https://ourlummiisland.org/info/pss/weather/wtp-3/
5) https://ourlummiisland.org/info/pss/weather/wtp-4/

Ignoring # 4 which is just strange silliness (watch the Radar load), but might be of interest to you anyway. (I’m retired Director of IT so I like to test all cases)

The fun one seems to be # 5 as whichever of the iframes is ON Screen when you refresh, it comes out right, but the other one gets squirrely.. and vice versa.

But this might be the case with the Original page as well, so I created a duplicate of it with Windy at the top. Which works.. with the assumption that it does because it is “on screen” Hmmm as we say.

6) https://ourlummiisland.org/info/pss/weather/wtp-6/

Let me know if you want any other test cases.

Thanks @synergyhub for putting together all those test cases. I think I may need to flag this with the Windy developers, as it looks like a bug with the underlying Windy widget itself when the spot forecast is enabled.

I know this won’t provide any immediate solution for you; I can only suggest a couple of things for the time being:

– Disable the spot forecast on that particular page, and/or
– Create a reload frame button next to any problematic iframe, rather than a message to reload the full browser page.

The latter is a feature I may introduce if this doesn’t get fixed soon. I’ve set up an example here: https://davidmatthew.ie/ventus-test/

Let me know if you’d like the code for this. Essentially it involves quickly removing and reattaching the iframe to the document, as trying to reload an iframe via a button seems to create cross-origin errors.

Hope this helps.

David

Yes, I was thinking it is an underlying issue with Windy itself. # 4 is especially interesting to watch.

Yes, I looked at your Example, and I would like the code. It is a better fix than the Refresh text I display now on Desktops.

If you need to send a file use this email: [email protected]
(temp email address for this issue)

I can share the code here no problem. It’s not particularly elegant but should do the job:

First wrap the widget in a containing element, e.g.

<div id="windy">
<iframe width="100%" height="450" src="https://embed.windy.com/embed2.html?lat=50.903&lon=-6.240&detailLat=53.338&detailLon=-6.259&width=650&height=450&zoom=5&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"></iframe>
</div>

Then you can inline the JavaScript in a Custom HTML block, attaching it to a button:

<button onclick="(function(){let d = document.getElementById('windy'), w = document.querySelector('#windy iframe'); w.remove(); d.appendChild(w);})()">Reload</button> the iframe if not centered correctly.

Generally speaking, inlining a function like this isn’t best practice but as a once-off it should be fine.

Hope this helps! And thanks for your patience.

Marking as resolved for now.

Hello, First off thank you for making this shortcode plug in . I am running a local whale and dolphin tour business. It is important to me to display a marine weather forecast for my customers. This answers it. I did have the same problem though, and through reading the comments here, the issue seems to be from windy itself.
I went to the embedded widget page and through some trial and error, found if I selected the 12 hour (forecast for) option, it lets my image load centered. I hope this is the answer, because I am trying to avoid making the customer refresh the page.
Thank you again.
Thank you for the app again and the response to the questions.

Hi @cimarinesafariadventures, thanks for this additional information, it’s very helpful! And many thanks for your supportive feedback, I really appreciate it. If there’s anything I can help with don’t hesitate to ask.