Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

266
Views
Leaflet map locationfound triggers unintended listener

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
    });
  }
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!