Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Geolocation - update marker with javascript and Leaflet

    Every time the location updates it places a new marker instead of moving the existing one. I just wanted there to be one marker on the screen instead of a new one placed every time the application updates its position (ignore the max age and frequency, I was testing something and I know they aren't the problem). Thanks in advance.
    Code:
    (code to load the map)
    
        function onLocationFound(e) {
    
                                    var marker= L.icon({iconUrl: 'greendot.png'});
        var radius = e.accuracy /2;
    
        L.marker(e.latlng, {icon: marker}).addTo(map).bindPopup("You are within " + radius + " meters from this point").openPopup();
    
    
    
                                      }
    
        function onLocationError(e) {
            alert(e.message);
        }
    
    
        map.on('locationfound', onLocationFound);
        map.on('locationerror', onLocationError);
    
        map.locate({watch: true, setView: true, maxZoom: 16, enableHighAccuracy: true, maximumAge:10000, frequency: 1});

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    one possible solution is to store a reference to the marker when it is created (the easiest way being with a dreaded global variable), then when your onLocationFound function runs, test if it exists (obviously it won't the first time it is run) and if it does, remove it from the map before creating a new one.

    I don't know which mapping app you are using, but in google maps it would be something like this:

    Code:
    var marker = null;
    
    function onLocationFound(e) {
      if (marker) {
        marker.setMap(null) //or your equivalent to remove a marker from the map
      }
      
    marker = L.icon({
        iconUrl: 'greendot.png'
      });
    
    //etc...

  • Users who have thanked xelawho for this post:

    min222002 (02-25-2013)

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    one possible solution is to store a reference to the marker when it is created (the easiest way being with a dreaded global variable), then when your onLocationFound function runs, test if it exists (obviously it won't the first time it is run) and if it does, remove it from the map before creating a new one.

    I don't know which mapping app you are using, but in google maps it would be something like this:

    Code:
    var marker = null;
    
    function onLocationFound(e) {
      if (marker) {
        marker.setMap(null) //or your equivalent to remove a marker from the map
      }
      
    marker = L.icon({
        iconUrl: 'greendot.png'
      });
    
    //etc...
    I tried a quick reply and I dont know if you got it so if not here it is again:
    Im using leaflet and cloudmade maps and the varible you gave me was named marker and I already had one with that name. Im not very good with javascript so is there any way you can give me the corrected code within the code I provided? Thanks again for your time.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    the variable is supposed to have the same name - if you only want one marker showing you need to overwrite the reference every time you call your location found function.

    looking at the cloudmade docs it seems to me that they treat a marker as an overlay, so you should call removeOverlay to get rid of it (or else you can use the marker's hide method, but that would not actually remove it):

    Code:
    var marker = null; //initiates marker as global variable
    
    function onLocationFound(e) {
      if (marker) { //tests if marker exists
        map.removeOverlay(marker) //if it does, remove it from the map
      }
      
    marker = L.icon({ // overwrites "marker" variable - notice there is no "var" here 
        iconUrl: 'greendot.png'
      });
    I've never used cloudmade, but that seems to be what you would want to do, given the code you have posted.

  • Users who have thanked xelawho for this post:

    min222002 (02-26-2013)

  • #5
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I am having another issue now but I believe your solution worked, thanks!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •