Support » Plugin: Ventus - Weather Map Widget & Shortcode » Map centers properly ONLY after refresh

  • Resolved AKE / Imaxinar DM

    (@synergyhub)


    On a Desktop the first time the page loads, the marker (Lummi Island, WA USA) is not centered in the image. HOWEVER, when we Refresh the browser, it centers.

    We have put in the exact Long/Lat for the Marker.

    On a Mobile device this does not happen. It always loads centered properly.

    I have tried re-formating the shortcode several times, looked for typos, strange punctuation, tried different px heights, etc. And all that works is Refreshing the browser.

    I have been working at this for a long time, and still cannot figure it out.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author David Matthew

    (@davidmatthew)

    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

    Thread Starter AKE / Imaxinar DM

    (@synergyhub)

    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.

    Plugin Author David Matthew

    (@davidmatthew)

    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

    Thread Starter AKE / Imaxinar DM

    (@synergyhub)

    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: WTP-x78@OurLummiIsland.org
    (temp email address for this issue)

    Plugin Author David Matthew

    (@davidmatthew)

    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.

    Plugin Author David Matthew

    (@davidmatthew)

    Marking as resolved for now.

    cimarinesafariadventures

    (@cimarinesafariadventures)

    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.

    Plugin Author David Matthew

    (@davidmatthew)

    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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.