How to auto-update a marker on a leaflet map, with meteor

Question

For a school project we are having this idea of making a geospatial tag-game. You log in on our app, your location is shown on the map, and whenever you get close to another player, you tag that person. (Like children's tag but with meteor)

The issue we are having, we seem not able to auto-update our marker on the leaflet map. There's an marker showing it's just not updating.

We tried using Player.update in a time but it doesn't work.

Any suggestions?

The code

     if (Meteor.isClient) {

    var userLatitude;
    var userLongitude;

    var map;

    Template.map.rendered = function () {

        // Setup map
        map = new L.map('map', {
            dragging: false,
            zoomControl: false,
            scrollWheelZoom: false,
            doubleClickZoom: false,
            boxZoom: false,
            touchZoom: false
        });

        map.setView([52.35873, 4.908228], 17);
        //map.setView([51.9074877, 4.4550772], 17);

        L.tileLayer('http://{s}.tile.cloudmade.com/9950b9eba41d491090533c541f170f3e/997@2x/256/{z}/{x}/{y}.png', {
            maxZoom: 17
        }).addTo(map);

        // If user has location then place marker on map
        if (userLatitude && userLongitude) {
            var marker = L.marker([userLatitude, userLongitude]).addTo(map);
        }

        var playersList = players.find().fetch();
        playersList.forEach(function(players) {
            // Change position of all markers
            var marker = L.marker([players.latitude, players.longitude], options={"id" : 666}).addTo(map);
        });
    };

    // If the collection of players changes (location or amount of players)
    Meteor.autorun(function() {

        var playersList = players.find().fetch();
        playersList.forEach(function(players) {
            // Change position of all markers
            var marker = L.marker([players.latitude, players.longitude]).addTo(map);
        });
    });
}



if (Meteor.isServer) {
    Meteor.startup(function () {
        // code to run on server at startup

    });
}











    /*
Template.hello.events({
        'click input' : function () {
        // template data, if any, is available in 'this'
        if (typeof console !== 'undefined')
            console.log("You pressed the button");
        }
    });
*/

/*
if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {                   
                userLatitude = 52.35873;
                userLongitude = 4.908228;

                players.insert({
                    name: "Martijn",
                    latitude: userLatitude,
                    longitude: userLongitude
                });
            });
        }
*/

Answer 1

You need to clear the existing markers, otherwise they remain on the map. The easiest / most efficient way to do this is to attach the markers to a LayerGroup when you're creating them. Then, when you want to update, clear all the markers, and then add them again.

Add layer group declaration at the top, so you have

var map, markers;

After initialising the map,

markers = new L.LayerGroup().addTo(map);

Change this line:

var marker = L.marker([userLatitude, userLongitude]).addTo(map);

to:

var marker = L.marker([userLatitude, userLongitude]).addTo(markers);

in your autorun, before the forEach,

markers.clearLayers();

then in your foreach,

var marker = L.marker([players.latitude, players.longitude]).addTo(markers);