[GIS] map.on(‘click’) event disables the double click zoom

leafletmapbox

I have a map that has an onclick event fired and displays a marker where the user has clicked. Problem is that this event seems to overrun the double click event. Because of this, when I double click the map, the map puts a marker and doesn't zoom. Anyone has an idea how I can solve this?

openmap = L.mapbox.map('map', 'julievelghe.nmjoj53p',{doubleClickZoom: true}).setView([49.152969, 6.473007], 5);

//on map click, create a marker
openmap.on('click',function(event){
    var coordinates = event.latlng;
    placeMarker(coordinates);
    alert("Single click");
});

Best Answer

This is what's happening in your code:

  • First click lands on the map
  • Marker is created
  • Second click lands on the newly created marker

For a double-click to be triggered, the two individual click events must land in the same target. You can achieve this by making the marker non-interactive with the {interactive: false} option.

Keep in mind this behaviour is currently buggy in Leaflet 1.0.0-beta2, see https://github.com/Leaflet/Leaflet/pull/3937 - you might want to use custom CSS classes for your markers and use pointer-events: none in your CSS.