¿Obteniendo la ubicación actual del usuario automáticamente cada "x" segundos para poner en un mapa de Leaflet?

Question

Necesito obtener la ubicación actual del usuario automáticamente cada "X" segundos (5 o 10 segundos) y mostrarla en un mapa simple de Leaflet.

He visto el ejemplo de Leaflet en Mobile aquí http://leafletjs.com/examples/mobile.html ...

    Ejemplo móvil de Leaflet

        body {
        padding: 0;
        margin: 0;
        }
        html, body, #map {
        height: 100%;
    }

    var map = L.map('map');

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
        maxZoom: 18,
        attribution: 'Datos del mapa &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contribuyentes, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imágenes © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(map);

    function onLocationFound(e) {
        var radius = e.accuracy / 2;

        L.marker(e.latlng).addTo(map)
            .bindPopup("Estás dentro de " + radius + " metros de este punto").openPopup();

        L.circle(e.latlng, radius).addTo(map);
    }

    function onLocationError(e) {
        alert(e.message);
    }

    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    map.locate({setView: true, maxZoom: 16});

... y podría ser útil como punto de partida para mí, pero no sé cómo actualizar la ubicación actual del usuario sin refrescar / recargar todo el mapa, que obviamente no es la solución.

¿Alguien tiene algún código de ejemplo que pueda ayudarme?

Answer 1

Con algunas modificaciones, puedes usar setInterval() como un temporizador y eliminar la posición de usuario existente en cada pasada.

Del mismo ejemplo, aquí está el código completo, con comentarios adicionales incorporados:

  Ejemplo móvil de Leaflet

    body {
      padding: 0;
      margin: 0;
    }
    html, body, #map {
      height: 100%;
    }

    var map = L.map('map');

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
      maxZoom: 18,
      attribution: 'Datos del mapa &copy; <a href="http://openstreetmap.org">Colaboradores de OpenStreetMap</a>, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imágenes © <a href="http://mapbox.com">Mapbox</a>',
      id: 'mapbox.streets'
    }).addTo(map);

    // espacios reservados para L.marker y L.circle que representan la posición actual del usuario y la precisión    
    var current_position, current_accuracy;

    function onLocationFound(e) {
      // si la posición está definida, entonces eliminar el marcador de posición existente y el círculo de precisión del mapa
      if (current_position) {
          map.removeLayer(current_position);
          map.removeLayer(current_accuracy);
      }

      var radius = e.accuracy / 2;

      current_position = L.marker(e.latlng).addTo(map)
        .bindPopup("Estás dentro de " + radius + " metros de este punto").openPopup();

      current_accuracy = L.circle(e.latlng, radius).addTo(map);
    }

    function onLocationError(e) {
      alert(e.message);
    }

    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    // envolver map.locate en una función    
    function locate() {
      map.locate({setView: true, maxZoom: 16});
    }

    // llamar a locate cada 3 segundos... para siempre
    setInterval(locate, 3000);

Answer 2

Estaba usando esta librería para trabajar con react, y estaba buscando una manera de configurar el mapa en la ubicación actual del usuario. Lo siguiente debería funcionar.

El método .locate llama a la API para buscar la ubicación actual del usuario. Set view actualiza el mapa, maxZoom intenta hacer zoom en el mapa 16 pasos.

var map = L.map('map').locate({setView: true, maxZoom: 16});

Mi componente react tiene la siguiente función:

componentDidMount: function() {
var map = L.map('map').locate({setView: true, maxZoom: 16});
L.esri.basemapLayer('Gray').addTo(map);

// crea el control de geocodificación y agrégalo al mapa
var searchControl = L.esri.Geocoding.geosearch().addTo(map);

// crea un grupo de capas vacío para almacenar los resultados y agrégalo al mapa
var results = L.layerGroup().addTo(map);

// escucha el evento de resultados y agrega cada resultado al mapa
searchControl.on("results", function(data) {
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
        results.addLayer(L.marker(data.results[i].latlng));
    }
});