34

Does anyone know how to suppress panning when you click and drag over top of a div box embedded within the map itself?

For example here, when you click and drag over top of the legend, the map drags with you. I want to suppress that function. I am aware if this technique, but i want to know if this is the only way:

map.dragging.disable();
PolyGeo
  • 65,136
  • 29
  • 109
  • 338
Mr. Concolato
  • 506
  • 1
  • 5
  • 10
  • I have implemented similar functionaility using a jQuery .hover listener (using handlerIn and handlerOut to disable and enable dragging). Not sure if that is an option for you: http://api.jquery.com/hover/ – evv_gis Jul 08 '14 at 21:59

4 Answers4

25

Using the example from the Leaflet website, note where the L.Control object is instantiated as info; this is the <div> box in the upper-right associated with the map's hover interaction. Here is where it is defined in index.html from the Leaflet example:

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

To disable the dragging when a user's cursor is inside this <div> box, add an event listener to the HTMLElement (a <div> element) that contains the L.Control object:

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

Recall that map was defined as the L.Map instance earlier.

Arthur
  • 2,292
  • 1
  • 17
  • 27
  • Thanks @Arthur, i am familiar with this approach. I was hoping someone might offer a solution using css as in pointer-events:auto or pointer-events:none or somthing like those, which do not quite work for me. If no one else posts a better solution, I will give you the check, as it will mean that that is the best solution. – Mr. Concolato Jul 09 '14 at 13:11
  • I should like to see that as well. It would be nice if CSS could solve this problem, but which element should have its pointer events managed? The leaflet-control element is contained by the leaflet-container element and the latter is receiving the pointer events that trigger zoom and panning. – Arthur Jul 09 '14 at 13:19
  • I have been trying to put it on the div of interest to no avail. – Mr. Concolato Jul 09 '14 at 13:21
  • Yeah, and that makes sense: the <div> of interest is a child of leaflet-control which itself is inside of leaflet-container. The events are received by the parent (leaflet-container) before the child (leaflet-control). – Arthur Jul 09 '14 at 15:09
20

An alternative solution to that is to stop event propagation with JavaScript (like it's done for Leaflet controls, e.g. zoom buttons):

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
  • 2,366
  • 14
  • 13
5

I think the easy way is,

$('div').on("mousedown", L.DomEvent.stopPropagation);

It will stop the dragging of the map inside the div element.

Tek Kshetri
  • 678
  • 8
  • 16
  • 1
    This is a very simple and elegant solution. If you don't use jQuery, this is roughly the same in pure JavaScript: document.getElementById("mydiv").onmousedown = L.DomEvent.stopPropagation;. – sgrubsmyon Jun 28 '23 at 09:28
4

A small optimization for the solution from @Arthur. Use mousedown and mouseup. So it didn't trigger when you just drag over your div. Only when you start dragging inside your div.

Attention use mouseup for the whole html

$('.yourDiv').mousedown( function() {
    map.dragging.disable();
});

$('html').mouseup( function() {
    map.dragging.enable();
});
Silvan
  • 141
  • 4