CODEWITHSUNDEEP
javascriptleaflet
vaibhav shah
vaibhav shah

Reputation: 5069

Disable map zoom on CircleMarker double click in leaflet

I'm trying to disable the zoom on the map when I click in a CircleMarker object, but until now, no success.

This is my code:

var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
myCircle.on("click", function () {
    //my click stuff
});
myCircle.on("dblclick", function () {
    //my dblclick stuff
});

Everytime the dblclick event is fired, the map is zoomed, how to disable it?

Upvotes: 21

Views: 22551

Answers (8)

keul
keul

Reputation: 7819

None of the answers above worked for me:

  • calling native ev.originalEvent.preventDefault() did nothing
  • returning false neither
  • I don't like the doubleClickZoomworkaround that much (although… it works!)

Using Leaflet DomEvent did the job for me:


import { DomEvent } from 'leaflet';

myFeature.on("dblclick", function (ev) {
  DomEvent.stopPropagation(ev)
});

Upvotes: 6

TheGreatestHacker
TheGreatestHacker

Reputation: 93

All answers here are after the Leaflet map object has been initialized.

I'd like to give my take by stating that you can also disable doubleClickZoom during map object initialization.

Note: This will disable doubleClickZoom to the whole map and not just circleMarkers.

map = L.map('map', {
      center: [39.8282, -98.5795],
      zoom: 5,
      doubleClickZoom: false
    });

P.S. I'm running leaflet version 1.7.1

Upvotes: 5

luisbello30
luisbello30

Reputation: 11

Try this... Disable map.doubleClickZoom when you mouse over the circle and enable when you leave

var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);

myCircle
    .on("click", function () {
        //my click stuff
    })
    .on("dblclick", function () {
        //my dblclick stuff
    })
    .on('mouseover', function () {
        map.doubleClickZoom.disable();
    })
    .on('mouseout', function () {
        map.doubleClickZoom.enable();
    });

Upvotes: 0

vobango
vobango

Reputation: 114

If anyone is here looking for a solution to the use case "I want to zoom in on the map on double-click but not if the double-click happens on an entity", this is how I solved it:

const circle = new L.circlemarker(...).addTo(map);
circle.on("dblclick", () => {
  map.doubleClickZoom.disable();

  doSomething();

  setTimeout(() => {
    map.doubleClickZoom.enable();
  }, 1); // Without the timeout the map will still zoom in on entity double-click
});

FYI event.preventDefault(); event.stopPropagation(); and return false; inside the "dblclick" handler did not work for me.

Upvotes: 3

Suma
Suma

Reputation: 34393

Following solution seems to work for me:

myCircle.ondblclick = function (event) {
    event.stopPropagation();
    return false;
};

I have also tried another one, which also works quite well in practice, but I find it a bit hacky:

myCircle.on("click", function () {
  map.doubleClickZoom.disable();
  setTimeout(function(){map.doubleClickZoom.enable();}, 1000);
});

Upvotes: 3

lee penkman
lee penkman

Reputation: 1238

You can return false from your dblclick handler which will stop the event from propagating e.g.

myCircle.on("dblclick", function () {
    //my dblclick stuff
    return false;
});

Now other elements (such as the map) won't handle that event

Upvotes: 0

anonymous anonymous
anonymous anonymous

Reputation: 208

First you need to disable the map double click zoom and then enable it again on the map click event. So when you double click the map after double clicking on the marker it zoom again ;) I tried it and it works for me perfectly! Enjoy!

map.doubleClickZoom.disable();

map.on('click', function (e) { 
  map.doubleClickZoom.enable();
 });

Upvotes: -2

user1969752
user1969752

Reputation:

try

var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
map.doubleClickZoom.disable();

refer this document

Upvotes: 32

Related Questions