Leaflet map locationfound triggers unintended listener

Question

I have a leaflet map in which map.locate() can be called in two ways: 1. Easybutton location button, 2. A regular call every minute using setTimeout.

Each has their own locationfound listener, or at least I would like them to have - this is the problem: clicking the easybutton triggers both the control._map.on('locationfound'..) easybutton listener, AND the map.on('locationfound'..) listener inside getLocation().

The regular call to getLocation() only triggers the map.on('locationfound'..) listener. Is this something to do with scope? How do I get it so the easybutton only triggers its intended listener and the setTimeout call to map.locate() only triggers the listener in getLocation()?

  L.easyButton({
    position: easy_position,
    states:[
      {
        stateName: 'unloaded',
        icon: 'fa-location-arrow',
        title: 'load image',
        onClick: function(control){
          control.state("loading");
          control._map.on('locationfound', function(e){
            alert('location found - easybutton');
            this.setView(e.latlng,18); // go to current location
            control.state('loaded');
            setTimeout(function(){
              control.state('unloaded');
            }, 3000);
          });
          control._map.on('locationerror', function(){
            control.state('error');
            setTimeout(function(){
              control.state('unloaded');
            }, 3000);
          });
          control._map.locate();
          setTimeout(function(){
            control.state('unloaded');
          }, 10000);  // give it ten seconds to find the location
        }
      }, {
        stateName: 'loading',
        icon: 'fa-spinner fa-spin'
      }, {
        stateName: 'loaded',
        icon: 'fa-thumbs-up'
      }, {
        stateName: 'error',
        icon: 'fa-frown-o',
        title: 'location not found'
      }
    ]
  }).addTo(map);

  function updateLocation() {
    getLocation(false);
    setTimeout(updateLocation, 60000);
  }

  getLocation = function(goToLocation) {
    map.on('locationfound', function(e) {
      alert('location found - getLocation()');
      var lat = e.latitude;
      var lng = e.longitude;
      if(goToLocation) {
        pan_to(lat,lng,0.5);
      }
    });
    map.on('locationerror', function(e) {
      console.log(e);
    });
    map.locate({
      setView: false,
      maxZoom: 16
    });
  }

Answer 1

You can mitigate your issue by using map.once() method to attach your event listeners (both in your regular process and in your button), so that they are removed after firing once:

Behaves as on(…), except the listener will only get fired once and then removed.

There are still some transient situations where both listeners can be fired at the same time: in case your button is clicked while your regular process has initiated a location, but the result is still pending, or the reverse.

Unfortunately Leaflet does not differentiate between calls to map.locate() method. Hence @IvanSanchez's suggestion of directly using the browser API.

You could eliminate those transient situations by managing a flag / mutex whenever you start a location, and not execute the other, or delay it, in case your mutex is locked.