¿Cómo puedo deshabilitar temporalmente el zoom / borrado de Mapview en Leaflet.js? Lo intenté de muchas maneras pero sin suerte. Es importante que sea temporal y también necesito la opción para habilitar nuevamente.
¿Cómo puedo deshabilitar temporalmente el zoom / borrado de Mapview en Leaflet.js? Lo intenté de muchas maneras pero sin suerte. Es importante que sea temporal y también necesito la opción para habilitar nuevamente.
vas a querer hacer (asumiendo que tu mapa es 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';
Vuelve a encenderlo con
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';
Si no desea deshabilitar cada controlador manualmente, puede recorrerlos todos y deshabilitarlos / habilitarlos.
Deshabilitar
map._handlers.forEach(function(handler) {
handler.disable();
});
Habilitar
map._handlers.forEach(function(handler) {
handler.enable();
});
Creo que puedes envolver tu mapa con un contenedor de ayuda y puedes desactivarlo con una clase de CSS simple como is-locked
.
Esto es de lo que estoy hablando:
.map-container {
position: relative;
}
.map-container .map {
position: relative;
z-index: 1;
}
.map-container.is-locked:after {
position: absolute;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
display: block;
}
Espero que ayude.
Lea otras preguntas en las etiquetas leaflet