Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

269
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda