Leaflet Map: Update Marker Using Navigator.geolocation.watchposition?

I'm trying to use a leaflet map to show the current position of the user on the map. Something like a live GPS tracking. This is my current code: var watchID; var geoLoc

Solution 1:

Hm it's not clear for me why you are using, two same methods for the same approach. You are using Geolocation.watchPosition() and map.locate(), which do fundamentally the same things. In this snippet Geolocation.watchPosition() has no purpose, it only call's showLocation(position), which just initialize two variables. The second method you are using is map.locate(), what should be your function of choice. Here you are doing right to add your marker, but regarding to the docs you have to set the watch option to true using map.locate() . You are going better to remove the Geolocation.watchPosition() and to it simply with map.locate():

function initializeMapAndLocator(){

varmap = L.map('map_2385853')

googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    }).addTo(map);



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

function onLocationFound(e) {
    var radius = e.accuracy / 2;
    L.marker(e.latlng).addTo(map)
        .bindPopup("You are within " + radius + " meters from this point").openPopup();
    L.circle(e.latlng, radius).addTo(map);
}

map.on('locationfound', onLocationFound);

}


initializeMapAndLocator();

Here goes a FIDDLE triggering locate and adding a marker with circle.