20

I am trying to build a map application using leaflet.js and I can not figure out how to use the .off method. The documentation doesn't have any examples and I can't seem to find anything anywhere else online. I have distilled the problem into a more simple chunk of code so my question could be more clear.

Basically I have it set up so that when you click the 'enable click' link it will add an event listener that adds a marker to the map every time you click it. I want to remove that event listener when you click 'disable click'.

Here is a link to the demo

Here is the code I have now.

$(document).ready(function(){

var map, cloudmade, sanAntonio, polygonPoints  


 map = new L.Map('map');
 cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/d4334cd6077140e3b92ccfae2b363070/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
});


 sanAntonio = new L.LatLng(29.4238889, -98.4933333); // geographical point (longitude and latitude)


 map.setView(sanAntonio, 13).addLayer(cloudmade);

//everything above sets up the map



function enableClick(){
  map.on('click', function(e) {    
    var marker = new L.Marker(e.latlng, {draggable:true});
    map.addLayer(marker);
  });//closes the click function

  this.disableClick = function(){
    map.off('click');
  }

}



//when 
$('#enable_click').click(function(){
  var enable_click = new enableClick()

  $('#disable_click').click(function(){
    enable_click.disableClick;
  });

});




});//closes the document ready function

I have already tried a bunch of different things so the whole 'this.disableClick' thing is just the latest strange thing I have tried. Anyone have a clue?

Spencer Cooley
  • 8,471
  • 16
  • 48
  • 63

1 Answers1

39

You need to pass the function to on and off by reference:

function doStuff() { ... }

map.on('click', doStuff);
...
map.off('click', doStuff);
Mourner
  • 3,171
  • 24
  • 21
  • 3
    Is the function still necessary when using off? – gotnull Oct 17 '14 at 00:13
  • 1
    Yes. This is probably because you can bind multiple handlers (functions) to a single event. See http://leafletjs.com/reference.html#events – nothingisnecessary Dec 20 '14 at 00:28
  • hi ,I've tried this , but no luck, this.map.off('click',function(evt){ console.log("click disabled"); }); – AhammadaliPK Nov 10 '17 at 12:45
  • 16
    It's not necessary anymore. Now .off("click") will remove all the listeners for 'click' event. (version 1.3.0 -> https://leafletjs.com/reference-1.3.0.html) – Roman May 14 '18 at 15:03