Disabilita la panoramica / trascinamento sulla mappa del volantino per div all'interno della mappa

Qualcuno sa come sopprimere la panoramica quando si fa clic e trascina sopra una casella div incorporata nella mappa stessa?

Ad esempio qui , quando fai clic e trascini sopra la legenda, la mappa si trascina con te. Voglio sopprimere quella funzione. Sono consapevole se questa tecnica, ma voglio sapere se questo è l'unico modo:

map.dragging.disable();

leaflet

— Signor Concolato
fonte

Ho implementato funzionalità simili usando un listener jQuery .hover (usando handlerIn e handlerOut per disabilitare e abilitare il trascinamento). Non sono sicuro se questa è un'opzione per te: api.jquery.com/hover

— evv_gis

Utilizzando l'esempio dal sito Web Leaflet, notare dove l' L.Controloggetto è istanziato come info; questa è la <div>casella in alto a destra associata all'interazione al passaggio del mouse sulla mappa. Ecco dove è definito index.htmldall'esempio di Leaflet:

    // 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);

Per disabilitare il trascinamento quando il cursore di un utente si trova all'interno di questa <div>casella , aggiungi un listener di eventi a HTMLElement(un <div>elemento) che contiene l' L.Controloggetto:

    // 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();
    });

Richiamo che è mapstato definito come L.Mapistanza in precedenza.

— Artù
fonte

Grazie @Arthur, ho familiarità con questo approccio. Speravo che qualcuno potesse offrire una soluzione usando css come in pointer-events: auto o pointer-events: nessuno o qualcosa del genere, che per me non funziona affatto. Se nessun altro pubblica una soluzione migliore, ti darò il controllo, poiché significherà che è la soluzione migliore.

— Concolato,

Anche a me piacerebbe vederlo. Sarebbe bello se CSS potesse risolvere questo problema, ma quale elemento dovrebbe gestire gli eventi puntatore? L' leaflet-controlelemento è contenuto leaflet-containerdall'elemento e quest'ultimo riceve gli eventi del puntatore che attivano lo zoom e il panning.

— Arthur,

Ho cercato di metterlo sul div di interesse senza alcun risultato.

— Concolato,

Sì, e questo ha un senso: l' <div>interesse è un figlio di leaflet-controlcui si è dentro leaflet-container. Gli eventi vengono ricevuti dal genitore ( leaflet-container) prima del figlio ( leaflet-control).

— Arthur,

Una soluzione alternativa è quella di interrompere la propagazione degli eventi con JavaScript (come per i controlli Leaflet, ad esempio i pulsanti di 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
fonte