update marker location with leaflet API

Question

I want to build web app with the Leaflet API. First my user is geolocated with IP then if he accepts I try to update his position with HTML5 geolocation (accuracy is better).

My problem is that the marker position is not updated on the map and the code bellow fails with no error. I have try hundred of different syntax and methods from leaflet documentation to update marker position (ie. setLatLng) but I did not succeed. I would like to understand what's wrong with my code.

My problem is solved by doing like this :

    var lat = (e.latlng.lat);
    var lng = (e.latlng.lng);
    var newLatLng = new L.LatLng(lat, lng);
    marker.setLatLng(newLatLng);

Old code was:

//initial IP based geolocation

var lat = google.loader.ClientLocation.latitude;
var lng = google.loader.ClientLocation.longitude;

//place marker on the map

var marker = L.marker([lat,lng]).addTo(map);

//start HTML5 geolocation 

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

function onLocationFound(e) {

    var marker = L.marker([e.latlng.lat,e.latlng.lng]).update(marker);
    alert ('New latitude is ' + e.latlng.lat)
}

map.on('locationfound', onLocationFound);

when I use addTo(map) it create a new marker but no update of the existing one. Any idea ? — floflo, Jan 05 '13 at 17:37

Dr.Molle · Accepted Answer · 2013-01-05T21:40:35.507

The code inside your question is a little bit confusing, it's hard to say what the issue is when you only post snippets.

As it is, this code:

    var lat = (e.latlng.lat);
    var lng = (e.latlng.lng);
    var newLatLng = new L.LatLng(lat, lng);
    marker.setLatLng(newLatLng);

..should work as expected inside onLocationFound().

You can simplify it:

marker.setLatLng(e.latlng);

However, I guess the problem is a scope-issue, some of your variables (e.g. marker) is not accessible inside onLocationFound.

Here an example how to achieve it:

function init(){
    var map             = L.map('map', {center: [51.505, -0.09], zoom: 13}),
        marker          = L.marker(map.getCenter()).addTo(map),
        glcl            = google.loader.ClientLocation,
        onLocationfound = function(e){
          marker.setLatLng(e.latlng);
          map.setView(marker.getLatLng(),map.getZoom()); 
          alert('Marker has been set to position :'+marker.getLatLng().toString());
        };

    L.tileLayer('http://{s}.tile.cloudmade.com/[yourCloudmadeKey]/997/256/{z}/{x}/{y}.png').addTo(map);

    map.on('locationfound', onLocationfound);

    if(glcl){//when google.loader.ClientLocation contains result
       onLocationfound({latlng:[glcl.latitude,glcl.longitude]});
    }else{alert('google.loader.ClientLocation fails');}

    map.locate();
}

Demo: http://jsfiddle.net/doktormolle/6ftGz/

I have problem with 'e.latlng'. After 'glcl' is execute 'e.latlng' return '48.733,2.283' and after 'locationfound' is executed it returns 'LatLng(48.73, 1.36401)'. How can I separate latitude and longitude ? thank you — floflo, Jan 08 '13 at 20:39
latitude: `(e.latlng[0]||e.latlng.lat)` longitude: `(e.latlng[1]||e.latlng.lng)` — Dr.Molle, Jan 09 '13 at 01:10
Thank a lot I'll try. I got it with some less estetic code : `if(e.latlng.lat){latitude = e.latlng.lat, longitude = e.latlng.lng} else{latitude = glcl.latitude, longitude = glcl.longitude}` — floflo, Jan 09 '13 at 06:59
This is useful to know when attempting to add the SmoothMarkerBouncing plugin in conjunction with marker dragging. Whilst dragging Markers within the browser looks fine, subsequently firing the bounce event will reset the marker to its initial position unless this resetting, i.e. marker.setLatLng(newLatLng), is applied post dragend. — Mr Davros, Dec 11 '18 at 12:21

score 24 · Answer 2 · answered Mar 24 '14 at 06:00

24

Try update() of marker method it works for me

var lat = (e.latlng.lat);
var lng = (e.latlng.lng);
marker.setLatLng([lat, lng]).update();  // Updates your defined marker position

answered Mar 24 '14 at 06:00

Kedar.Aitawdekar

2,364
1
23
25

update marker location with leaflet API

2 Answers2

Linked