On one of our main pages, Leaflet map occupies 90% of the page with only the top nav (position: fixed;)
But on touch devices, user can accidentally zoom-in not on a map, but on the entire page. If they do - there is no way for them to un-zoom to see the top nav, because any touch action would zoom-in-out the map.
Ideally, I'm trying to find solution so that the page would zoom-out, after Leaflet reaches minZoom level. Any other ideas are welcome! Thanks!
Cannot be done.
Leaflet relies on the touch-action CSS property to prevent the browser from pinch-zooming the whole page.
Note how there is no value for that property that allows to pinch-zoom only out. Leaflet can only enable/disable pinch-zooming as a whole.
You could disable the touchZoom handler of the map by running something like map.touchZoom.disable(), or map.on('zoomend', function(){ if (map.getZoom()===map.options.minZoom) map.touchZoom.disable() }) but that will disable all pinch-zooming in Leaflet, and enable all pinch-zooming of the whole page.
Related
I'm using google maps markers to show some locations with custom icons. Sometimes there are a lot and on mobile the markers take up a good portion of the screen.
I set google maps to gestureHandling: 'cooperative', so the page can be scrolled while the map is on screen. When the user starts scrolling on a marker, the "Use two fingers to move the map" info appears but the page does not scroll. Start dragging anywhere on the map, the page scrolls just like intended.
This behaviour can also be observed on the Marker API Docs (https://developers.google.com/maps/documentation/javascript/examples/marker-simple) in mobile mode (touch).
Is there a way to unlock page scrolling when the user starts on a marker?
I found that adding a touchstart listener to all marker <img tags which stops propagation will block google's event and thus allow page scrolling.
I've had luck with the following code, but it is worth noting that:
tilesloaded is not strictly when markers are loaded so its a bit of a race condition. If you can find a better event then let me know.
The selector is a bit messy, it captures all of my marker images but I'd be happier if it was more intentionally specific.
google.maps.event.addListenerOnce(map, "tilesloaded", () => document.querySelectorAll(`.gm-style div[role='button'] img[draggable='false']`).forEach(x => x.addEventListener("touchstart", (e) => { e.stopImmediatePropagation() })));
I've also upvoted the issue but I'm not holding my breath.
I am using InfoBox to display information boxes on a custom Google map, but when the user is scrolling around the map with dragging (ie. on an iPad or other mobile device, or with their mouse), attempting to drag on an open InfoBox window does nothing (ie. the map doesn't move).
Is there some way to allow the drag scrolling to continue, even while on an InfoBox? I feel like it should just be a simple option but I can't see anything in the documentation.
I've tried moving the InfoBox to the mapPane (instead of the floatPane) but it didn't help.
So I want to make a scroll zoom feature on a map I have created. The map contains an image and a number of divs positioned on top of the map marking out positions (pins).
I have found a number of jQuery tools which allows me to scroll zoom on an image. And I could probably try and use the mouse position and scroll amount to edit the coordinates of my divs as well. Is this the best way of going about this, or does anyone know any jQuery tools that will allow me to scroll zoom in and out of divs?
Here are some tools I found for scrolling on images.
image zoomer
Wheel zoom
You could try using leaflet.js. It is a lightweight javascript library meant to be used for maps, but it also work for images. This tutorial could help you start, and you might want to check this post.
Here is a very basic example of what it could look like.
I am working on Leaflet with a custom image whose tiles are being generated using "zoomify". I am currently facing the issues below:
1) On minimum zoom level, the image should not be draggable which is achieved using map.dragging.disable().
But the issue arises when the image is currently at maximum zoom level and user is dragging, as I don't want the focus to go beyond the tiles, i.e user should not be able to see "grey border" once he reaches beyond the bounds limit. Is it possible to do using Leaflet. For example, user drags the image and once grey border is starting to appear, the drag gets disabled. Although it does come back to current position by setting bounceAtZoomLimits: false as well as map.fitBounds(), but that is only when user ends dragging.
2) On Pinch zooming, the user can zoom in/out as much he/she can. Hence the image could contract as much as the user pinch zooms IN as well as pinch zooms OUT. Is it possible to stop this behaviour, i.e the user can only pinch zoom IN to the maximum zoom level set as well as pinch zoom OUT to the minimum zoom level set?
Any help would be appreciated. Thanks :)
Leaflet checks bounds only after dragging. You need to add drag process listener to fix tile layer position in action:
map.setMaxBounds(bounds);
map.on('drag', function() {
map.panInsideBounds(bounds, { animate: false });
});
Example: http://jsfiddle.net/asleepwalker/exqar2w4/
UPD: I wrote a small plugin to perform it. Here is it: https://github.com/asleepwalker/leaflet.hardbounds
This has been answered here.
In Leaflet 1.0.0+ there is an option maxBoundsViscosity to "slow down map dragging" or make "the bounds fully solid".
When implementing a bing maps based solution, the logo on the bottom left (highlighted in image above) causes a search box to appear to search with bing. Has anyone been successful in disabling this feature?
Ideally the solution will not involve disabling hovering events on the map completely, as there are hover events that we have implemented to provide functionality.
When initialising the map, set the enableSearchLogo property to False.
http://msdn.microsoft.com/en-us/library/gg427603.aspx