Windy Community

    • Register
    • Login
    • Search
    • Unread
    • Categories
    • Groups
    • Go to windy.com

    Weather picker not working in mobile browsers

    Windy API v4
    10
    22
    3369
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • fastseas
      fastseas Developers Sailor last edited by

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

      1 Reply Last reply Reply Quote 0
      • T
        trackamap last edited by

        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!!!

        1 Reply Last reply Reply Quote 0
        • ivo
          ivo Administrator last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • T
            trackamap last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • M
              martijng last edited by

              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?

              1 Reply Last reply Reply Quote 0
              • ivo
                ivo Administrator last edited by

                Weather picker is supported only on desktop

                1 Reply Last reply Reply Quote 0
                • R
                  ryanshores last edited by

                  @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?

                  1 Reply Last reply Reply Quote 0
                  • rittels
                    rittels Code contributor | Premium last edited by

                    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

                    1 Reply Last reply Reply Quote 0
                    • siim
                      siim last edited by siim

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

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

                      rittels 1 Reply Last reply Reply Quote 0
                      • rittels
                        rittels Code contributor @siim | Premium last edited by

                        @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";
                        }
                        });

                        1 Reply Last reply Reply Quote 0
                        • ivo
                          ivo Administrator last edited by

                          Interpolator usage: https://github.com/windycom/windy-plugins/tree/master/examples/09-reading-weather-values

                          rittels 1 Reply Last reply Reply Quote 0
                          • rittels
                            rittels Code contributor @ivo | Premium last edited by

                            @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

                            ivo 1 Reply Last reply Reply Quote 1
                            • ivo
                              ivo Administrator @rittels last edited by

                              @rittels Ok we add it

                              rittels 1 Reply Last reply Reply Quote 1
                              • 人
                                人间正道是沧桑 Ajman last edited by

                                This post is deleted!
                                1 Reply Last reply Reply Quote 0
                                • rittels
                                  rittels Code contributor @ivo | Premium last edited by

                                  @ivo Thanks for adding it!!

                                  1 Reply Last reply Reply Quote 0
                                  • First post
                                    Last post
                                  Windyty, S.E. - all rights reserved. Powered by excellent NodeBB
                                  NodeBB & contributors, OSM & contributors, HERE maps
                                  Terms and Conditions     Privacy Policy