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.
Related
I am using a network graph in my SAPUI5 application. In the Graph tag I set the 'enableWheelZoom'-property to true, which allows the user to zoom in/out using the mouse wheel.
Is there a way to adjust or customize the zoom-in velocity? Without further adjustments the zoom happens quite quickly, though I'm scrolling slowly. I would want the zoom to be smoother/slower.
Many thanks in advance! :)
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.
I have a Google MAPS which is embedded on a web page thanks to Google Maps API v3.
On tablets (and smartphones), when the user wants to "move" the map, then the map is moving which is what I want, but the web page is ALSO moving (scrolling). That is producing a really weird behavior, which makes the map almost unusable.
I mean that if you want to move the map (scrolling with your finger from top to bottom for example), then the map will move (to the top) but ALSO the whole web page will scroll (to the bottom).
I searched a long time and have tried different things, but the problem is still there.
What I have tried :
Playing with draggable/scrollWheel but seems that it's not the point (for you information draggable is set to "true" and "scrollWheel" is set to false).
Disable "touchstart" and "touchmove" event on the div container (#map) of the Google Maps, but when touching the maps on tablets, it still moves the map AND the web page.
What I want, basically, is that the user can ONLY move the Google Maps when he is touching the Google Maps, not the web page.
Any help will be really appreciated.
Thanks a lot..
If this can help, here is the web page : http://www.acheter-neuf-toulouse.com
If you launch the page with a tablet (not a smartphone : the map only appears above a certain width of screen), then you will see that the moving of the map with a finger is totally weird (the page itself is moving)..
As users view my site on mobile, sometimes they get into a situation where Google Maps scrolls into view and covers up the entire page. They can no longer scroll away because as they swipe up or down they'll only pan the view in Google Maps and not scroll the webpage.
Traditionally my fix on mobile was this:
var mapOptions = {
draggable: false,
panControl: true,
}
That basically disabled swipe events on Google Maps so users can swipe to scroll the webpage. If users want to actually pan the map they can click on the pan button UI.
As of version 3.22, Google Maps API has disabled the pan control button see official google doc. This creates a big problem for me - There is no other way to pan the map if I disable "draggable"
How can I let users have the ability to scroll the webpage using swipe gestures while also let them pan the map if they want to?
This completely depends on your your site's design/flow. I can offer up a couple solutions that I had to implement based on a similar situation to yours.
1) If the map is not a main content of your page, you can simply check if the browser is a mobile browser and replace the map div with a static map image that when clicked opens up a page dedicated to the map.
2) You can layer an action on top of the map that toggles the disabled property of the map via map.setOptions({draggable: true/false}); so the user can switch this on and off themselves.
This previous answer works. And allows it to be draggable for non-touch devices.
var myOptions = {
// your other options...
draggable: !("ontouchend" in document)
};
map = new google.maps.Map(mapElem, myOptions);
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.