Weather picker not working in mobile browsers



  • 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:

    W.tag("picker",
    '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.

    Thanks!!!


  • Administrator

    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.



  • On windy.com the weather picker does work on mobile devices. I'm wondering how that's possible, the API gives a javascript error. So somehow there's a fix. Or does windy.com use another library or version of the Windy API?


  • Administrator

    Weather picker is supported only on desktop



  • @ivo If the mobile picker is not working is there a way we could get access to the information that would normally be returned to the picker and display it ourselves?



  • Hi Ivo. I am with ryanshores.

    Since there is no picker on mobile, it would be great if you could make the interpolator available? It was possible with 2.3.

    Thx



  • One hacky workaround:
    W.rootScope.isMobile = false;

    https://s.codepen.io/siim/debug/JBBepy/GnAnbNwzyppA



  • @siim

    Great. Thanks!!

    However, picker's tail is too short.

    More hacky:

    let mobileMadeFalse=false;
    if(W.rootScope.isMobile){
    W.rootScope.isMobile=false;
    mobileMadeFalse=true;
    }
    picker.on('pickerOpened',(e)=>{
    if(mobileMadeFalse){
    document.getElementsByClassName("picker-lines noselect")[0].parentNode.style.marginTop="-70px";
    document.getElementsByClassName("picker-drag-me")[0].style.display="none";
    }
    });


  • Administrator



  • @ivo
    Thanks.

    It works well in plugins, but the interpolator does not seem to be available in the windyAPI object.

    It is in the W object, but this returns null:

    const {interpolator}=W
    interpolator(interf=>{ console.log( interf( {lat: 50.4 , lon: 14.3} ) ) } );//in map area


  • Administrator

    @rittels Ok we add it


  • Ajman

    This post is deleted!


  • @ivo Thanks for adding it!!


Log in to reply
 

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