Desactivar la interacción de los prospectos temporalmente

Question

¿Cómo puedo desactivar temporalmente el zoming/draging del Mapview en Leaflet.js? Lo he intentado de muchas maneras pero sin suerte. Es importante que sea temporal y también necesito la opción de habilitar de nuevo.

Answer 1

Que vas a querer hacer (suponiendo que tu mapa se llame 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';

vuelva 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';

Answer 2

Si no quieres desactivar cada manejador manualmente, puedes hacer un bucle sobre todos ellos y desactivarlos/activarlos.

Desactivar

map._handlers.forEach(function(handler) {
    handler.disable();

});

Activar

map._handlers.forEach(function(handler) {
    handler.enable();

});

Answer 3

Creo que puedes envolver tu mapa con un contenedor de ayuda y puedes desactivarlo con una simple clase CSS como is-locked .

Esto es 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 sea de ayuda.

Answer 4

Estoy usando react-leaflet con bastantes manejadores de eventos personalizados añadidos a mi mapa leaflet. No puedo detener la propagación en el domevent del leaflet porque al hacerlo se producen problemas (sobre todo con componentes de otros frameworks que estoy utilizando como material-ui).

Así que en caso de que alguien esté en el mismo barco, ¡aquí hay una solución que me está funcionando!

import React, { useEffect, useRef } from 'react'
import { DomEvent } from 'leaflet'
import { useLeaflet } from 'react-leaflet'

const PreventLeafletControl = (props) => {
  const controlRef = useRef()
  const leaflet = useLeaflet()
  useEffect(() => {
    if (controlRef) {
      const eventsClone = leaflet.map._events
      const eventsEmpty = Object.keys(eventsClone).reduce((accumulator, key) =>
        accumulator[key] = []
      , {})
      DomEvent.addListener(controlRef.current, 'mouseover', () => {
        leaflet.map._events = eventsEmpty
        leaflet.map._handlers.forEach(handler => handler.disable())
      })
      DomEvent.addListener(controlRef.current, 'mouseout', () => {
        leaflet.map._handlers.forEach(handler => handler.enable())
        leaflet.map._events = eventsClone
      })
    }
  })

  return <div ref={controlRef}>
    {props.children}
  </div>
}

export default PreventLeafletControl

Sólo envolver <PreventLeafletControl> alrededor de su componente de interfaz de usuario personalizado y debería estar bien.