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.
-
Which platform are you using? Android or iOS? Have you downloaded the latest version of the app?
-
@jiminsandiego
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.
-
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?
-
@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:
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' /spanHTML 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!!!
-
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.
-
-
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; -
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";
}
}); -
-
@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 -
@rittels Ok we add it
