Weather picker not working in mobile browsers

  • On iphone, when i tap the map, the mobile flavor of the weather picker appears, but it shows no data.

    I can duplicate on a desktop using chrome and the "device toolbar" to emulate mobile device screen sizes.

    No errors are logged in JS console.

  • Moderator

    Which platform are you using? Android or iOS? Have you downloaded the latest version of the app?

  • Sailor

    The issue pointed out by @fastseas concerns the Windy API v4, not the standard Phone App for iOS or Android

  • Hi @ivo - this issue is still present.

  • administrators

    Hmm hardly fixable :-(

    Will try to fix otherwise will disable picker on mobile at all.

  • Hi @ivo, is it possible to force the API to stay in desktop mode? so that the desktop picker is displayed in mobile browsers?

  • administrators

    @fastseas This is good idea. I will try

  • Hi @ivo - any news on this? forcing desktop mode only?

  • Hi @ivo This is my first time using Windy and Leaflet but I have some observations that might help fix this issue.

    From CSS the problem is with "@media only screen and (max-device-width: 736px)"

    The picker itself displays, however the content inside does not. There is an expand arrow that does not work. It looks like this could be avoided by not calling W.pickerMobile and always using W.pickerDesktop (as mentioned above).

    In more details I see two possible reasons:

    1 - r.setZoomCenter not a function
    When loading on mobile in portrait (screen width less than 736px) console shows error:

    Uncaught (in promise) TypeError: r.setZoomCenter is not a function

    I assume this is the issue as setZoomCenter is invalid and the following is called after the error:

    'div class="picker-lines noselect"/div
    div class="picker-content noselect"
    span data-do="openDetailMobile"

    2 - data-do="openDetailMobile" opens under class="shy"
    HTML when not working:

    div id='windy'
    div class='shy' id='plugins'
    div class='picker open' id='plugin-picker' style='display: block;'
    div class='picker-content noselect'
    span data-do='openDetailMobile' /span

    HTML when working:

    div id="windy"
    div class="leaflet-marker-icon picker open leaflet-zoom-animated leaflet-clickable leaflet-marker-draggable"
    div class="picker-content noselect"
    span data-do="openDetailMobile"

    ---This is outside Windy Div:
    div class="shy" id="plugins"
    div class="picker open" id="plugin-picker" style="display: block;"

    I hope this helps! The new API4 is great and this is the only issue I can find.


  • administrators

    If there are problems with picker I suggest to remove picker from API at all. There was NO picker at API 2.3 and it worked well.

  • My current work around is to remove picker from "@media only screen and (max-device-width: 736px)" and display message to reload with phone in landscape. The picker is a great feature and I would like to see it remain as part of API 4. Hopefully someone can find a way to make it work on all devices. Cheers.

Log in to reply

Windyty, S.E. - all rights reserved. Powered by excellent NodeBB
NodeBB & contributors, OSM & contributors, HERE maps

Looks like your connection to Windy Community was lost, please wait while we try to reconnect.