25

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();
  • 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: api.jquery.com/hover – evv_gis Jul 8 '14 at 21:59
19

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.

  • 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 9 '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 9 '14 at 13:19
  • I have been trying to put it on the div of interest to no avail. – Mr. Concolato Jul 9 '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 9 '14 at 15:09
19

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.