I have a Leaflet map and I want to completely disable panning whether using the mouse, touchscreen, or keyboard, so that the map appears like a static image. I have added map.dragging.disable(); which works for mouse dragging.
But when the map container is focused using the Tab key, pressing the arrow keys on the keyboard will still pan the map. Is there any solution for this?
I think that there are a couple options on Leaflet maps that should resolve your issue.
First, the dragging option, if false, should prevent the mouse from dragging the map.
Next, the keyboard option, if false, should prevent the user from navigating the map with the keyboard.
Also, you should consider setting doubleClickZoom to false if you want your map to be static.
Finally, examine the map option documentation to ensure that I haven't missed any relevant options.
Hope this helps.
Related
I am using react leaflet tooltip for a mapbox map.
I'm having a lot of trouble trying to keep react leaflet tooltip open when the mouse is over either the marker or the tooltip itself? I want to be able to open on hover and then click on something inside the tooltip, and I want to close when the mouse leaves the marker or the tooltip.
So if the mouse is in the red then the tooltip is open, and if it is not, then the tooltip is closed.
Any pointers appreciated
I tried what was available in the api https://leafletjs.com/SlavaUkraini/reference.html#tooltip, but I think there may be more customization I don't have the expertise to build may be needed to pull off this behavior.
One way to do it is to not set it to close when the mouse leaves.
Then it will be up to the user to either click on the map or click "close" to close the popup.
If any other markers are hovered that show popups then the original one will be automatically closed.
I've created a Google Maps map using vue-google-maps, when the user double clicks on the map it zooms in towards the mouse location.
I would like to turn this into a single mouse click, so when the user clicks somewhere on the map it automatically zooms in.
The best solution I could come up with is to listen for a click event and then simulate a mouse double click with dblclick but this doesn't work
$("#certificate-dashboard-map").click(function() {
$(this).dblclick();
});
How could I simulate a double mouse click that would trigger Google Maps ? Any other solutions would also be welcome ofcourse.
It turns out there is a option to enable single click zoom in vue-google-maps, which can be enabled by adding :zoom-on-click="true" to the map component
Is it possible to make it so you can only zoom in and out by using the zoom buttons as opposed to been able to pinch the screen? Perhaps only sensing one touch at a time or something similar?
The solution is right there in the Leaflet documentation: simply set the map option touchZoom to false when instantiating the map.
I'm pretty new to Openlayers and I have a problem with map panning using middle mouse button. Basically, I want to use the middle mouse button only for map panning, so that when other tools are selected/used (as identify feature tool) the middle mouse won't be used for selecting (only left mouse button).
Any suggestion?
I have a 'moveend' listener established on an OpenLayers map. I can pan or zoom the map and the listener fires as expected. I also have the need in this app to programmatically change the zoom and the center location, however, when I do the 'moveend' listener fires. Is it possible to distinguish between user-driven view changes and programmatic view changes in OpenLayers?
I am using JavaScript OpenLayers version 2.12.
I don't think there is a way to distingish. But here's what you can do. When you programmatically zoom or change the center location, you can temporarily unregister the moveend event, and then re-register it afterwards:
map.events.unregister( "moveend", map, function );
.
.
programatically zoom
.
.
map.events.register( "moveend", map, function );
Also, when zooming or moving map programmaticaly, you could set some variable to true.
In listener, check that variable. If it's true, map is moved programmaticaly. After checking, set it back to false.