I'm working on a touch device and when the user zooms in which a pinch gesture, the page zooms in instead of the map.
I'm using a leaflet map with javascript.
One potential reason would be that the Map container may not have been active. Tap on the container and then try zooming in
What worked for me was running Google Chrome in kiosk mode. In kiosk mode I set the parameter for --touch-events. After I tried this, I could zoom in and out without the page doing the same ting.
Related
I am working on a procedurally generated map displayed through WebGL. The users can move using keyboard keys or with panning (useful on mobile but this works with a mouse too). They can zoom with their mouse wheel, unfortunately this doesn't work on mobile. On mobile I would like to allow them to zoom by "pinching". Currently, on safari ios, it performs a "native" zoom which is a bit buggy, and if you unzoom, it shows all your safari opened windows.
How could I disable these "native pinch zoom effects", and detect pinch events to zoom my map manually?
I tried using ontouchmove events but it is not easy to debug because I can't trigger that event on my computer, and I can't open the debug console to show my console.logs on my mobile.
I am currently working on a similar issue. Will post a full answer when I have it.
However, I can already answer part of your question related to disabling "native pinch zoom effects".
According to this thread: Pointer-events: none doesn't work on mobile
you should be using touch-action: none; on the dom element where pinching happens.
On my demo website I am using a Leaflet map on which I have disabled one finger panning to improve user experience on mobile platforms.
var map = L.map('myMap', {
dragging: !L.Browser.mobile,
tap: !L.Browser.mobile
}
This works fine, the website visitor can scroll past the map without troubles.
The problems start when the user wants to pan the map using two fingers. Such moves also scroll the website making the map effectively unusable.
Is there any way to prevent the user to scroll the website while panning the map using two fingers?
touchZoom:!L.Browser.mobile probably fits your needs.
https://leafletjs.com/reference-1.7.1.html explains touchZoom :
Boolean|String : Whether the map can be zoomed by touch-dragging with
two fingers. If passed 'center', it will zoom to the center of the
view regardless of where the touch events (fingers) were. Enabled for
touch-capable web browsers except for old Androids.
I have a google maps window inside my home page. It works perfectly in a PC, but in a mobile device dragging the map drags the page below it and not the map.
You can test it here (click the "GPS Map" button at the top right):
http://luis.impa.br/photo/1407_Obidos/index.html
Any idea how to fix it?
Thanks!
L.
This is not a full answer, but a partial one.
I realized that the dragging of the map is disabled when the browser is set to some kind of "desktop mode", i.e., when the browser identifies itself as working in a non-touch device. So Google maps understands that there is no touch screen.
So, in order to drag maps, you do need to assure that your browser is not set to a "desktop mode".
Still, I don't know (or even if it is possible) how to allow dragging of the map under "desktop mode".
how do you implement pinch to zoom for a cordova android project
I have a iframe in which I am loading my src
and I want to implement pinch to zoom on the iframe because it is occupying the whole screen
To be precise you can achieve pinch to zoom in two ways
If you open the image in a native container which allows zoom and pinch - the performance is far better, here you might need a Cordova plugin which can do that for you, i found https://github.com/keensoft/FullScreenImage-Cordova-Plugin but i think it only opens up the image in full screen natively but doesnt allow pinch and zoom , you can try
If you dont use a plugin which means the image is shown inside the webview, for which you either write code for touch events or simply use hammer.js which allows this.
I've integrated Bing Maps into a web page using javascript. Simple integration of Bing Maps.
I'm having an issue where when they click on the map, the keyboard comes up (on an iphone). How can I stop BingMaps from popping up the keyboard?
Thanks,
Gob
A little late, but I just ran into this problem and figured out the solution:
Bing maps allows keyboard shortcuts (i.e. you can type R, A or H to switch to Road View, Aerial View or Hybrid View, respectively). To do this, it seems like they add a transparent input field nested inside the div you render the map in. Because of this, on iOS devices, tapping the map causes the keyboard to appear since it thinks the user is typing in a text field.
To fix this, simply add the following CSS:
#wl_ve_mapInput { display:none !important }
This will hide the text field and stop the iOS keyboard from appearing when tapping the map. This problem also occurs on Android devices.
NOTE:
Obviously, you will no longer be able to use the keyboard shortcuts. A possible approach would be to add some code to only add the CSS if it's a mobile browser, or only iOS devices. This is fairly easy to figure out, but it's not part of the scope of the original question.