Disable Leaflet Interaction – How to Temporarily Disable Leaflet Interaction

leaflet

How can I temporary disable zoming/draging the Mapview in Leaflet.js
Tried so many ways but without any luck.
It's important to make it temporary and I also need the option to enable again.

Best Answer

your going to want to do (assuming your map is call map)

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

turn it on again with

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';

Related Solutions

[GIS] Leaflet marker cluster and popups

1) Marker Popups: Content in popups are pure HTML. You can add multiple rows with data. Here is a code snippet to add a marker and popup multi-row text on mouse click. You can add rows, create table or change fonts/ colors - whatever is allowed in HTML/CSS.

enter code here
//Add Marker with Popup Text
var mymarker = new L.Marker(map.getCenter());
mymarker.addTo(map).bindPopup(map.getCenter() +"<br>" + 
                            "Min Zoom" + map.getMinZoom() +"<br>" + 
                            "Max Zoom" + map.getMaxZoom());

The result would appear as in the figure below

enter image description here

2) Custom Markers: You can look at Custom Icons which has detailed steps with examples

3) Popup on MouseOver: I would recommend against Mouseover in maps unless you have an absolute need. Think of today's tablets and mobile devices. They don't support MouseOver. If the number of markers per bounding box goes up - it could get problematic with usability and performance. Should you absolutely need one you could try extending the event object.

Cheers,
Ramesh

[GIS] Change marker icon on click using leaflet

I ended up solving this. I also figured out you can add arbitrary options and access them later. That is useful for assigning unique ids to markers:

for (i = 0; i <= points.length-1; i++) {
    testmarker[i] = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon, id: i}); 
    testmarker[i].on('click', function(e) {
        e.target.setIcon(selectedIcon);
        document.getElementById('someDiv').innerHTML = points[e.target.options.id][2];
}); 
}

Best Answer

Related Solutions

[GIS] Leaflet marker cluster and popups

[GIS] Change marker icon on click using leaflet

Related Question