Weather picker not working in mobile browsers

fastseas

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.

JimInSanDiego

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

idefix37

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

fastseas

Hi @ivo - this issue is still present.

ivo

Hmm hardly fixable :-(

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

fastseas

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

ivo

@fastseas This is good idea. I will try

fastseas

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

trackamap

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

ivo

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.

trackamap

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.

martijng

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?

ivo

Weather picker is supported only on desktop

ryanshores

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

rittels

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

siim

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

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

rittels

@siim

Great. Thanks!!

However, picker's tail is too short.

More hacky:

ivo

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

rittels

@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

@rittels Ok we add it