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 m…

Accepted Answer

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);
```

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

Solution

Problem