Deshabilite la panorámica / arrastre en el mapa de folleto para div dentro del mapa

25

¿Alguien sabe cómo suprimir la panorámica cuando hace clic y arrastra sobre la parte superior de un cuadro div incrustado dentro del mapa?

Por ejemplo , aquí , cuando hace clic y arrastra sobre la parte superior de la leyenda, el mapa se arrastra con usted. Quiero suprimir esa función. Soy consciente de esta técnica, pero quiero saber si esta es la única manera:

map.dragging.disable();
leaflet Señor concolato
fuente
He implementado una funcionalidad similar usando un escucha jQuery .hover (usando handlerIn y handlerOut para deshabilitar y habilitar el arrastre). No estoy seguro si esa es una opción para usted: api.jquery.com/hover
evv_gis

Respuestas:

20

Usando el ejemplo del sitio web de Leaflet, observe dónde L.Controlse instancia el objeto como info; Este es el <div>cuadro en la esquina superior derecha asociado con la interacción de desplazamiento del mapa. Aquí es donde se define a index.htmlpartir del ejemplo del folleto:

    // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };

    info.addTo(map);

Para deshabilitar el arrastre cuando el cursor de un usuario está dentro de este <div>cuadro , agregue un detector de eventos al HTMLElement(un <div>elemento) que contiene el L.Controlobjeto:

    // Disable dragging when user's cursor enters the element
    info.getContainer().addEventListener('mouseover', function () {
        map.dragging.disable();
    });

    // Re-enable dragging when user's cursor leaves the element
    info.getContainer().addEventListener('mouseout', function () {
        map.dragging.enable();
    });

Recuerde que mapse definió como la L.Mapinstancia anterior.

Arturo
fuente
Gracias @ Arthur, estoy familiarizado con este enfoque. Esperaba que alguien pudiera ofrecer una solución usando css como en pointer-events: auto o pointer-events: ninguno o algo así, que no funciona para mí. Si nadie más publica una solución mejor, le daré el cheque, ya que significará que esa es la mejor solución.
Sr. Concolato
Me gustaría ver eso también. Sería bueno si CSS pudiera resolver este problema, pero ¿qué elemento debería tener sus eventos de puntero gestionados? El leaflet-controlelemento está contenido por el leaflet-containerelemento y este último está recibiendo los eventos de puntero que activan el zoom y la panorámica.
Arthur
He estado tratando de ponerlo en el div de interés en vano.
Sr. Concolato
Sí, y eso tiene sentido: el <div>de interés es un hijo del leaflet-controlque está dentro leaflet-container. Los eventos son recibidos por el padre ( leaflet-container) antes que el niño ( leaflet-control).
Arthur
19

Una solución alternativa a esto es detener la propagación de eventos con JavaScript (como se hace para los controles de folleto, por ejemplo, botones de zoom):

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.disableClickPropagation(div);
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}
Ilja Zverev
fuente