Leaflet - how to remove previous marker automatically

Question

the following javascript code will enable the creation of markers on the map on map click local and global in realtime with node.js / socket.io. This works fine but each added marker is visible. like this example: http://jsfiddle.net/brettdewoody/LK35U/ Now, when the second marker has been added to the map, I need to remove the previous marker (first one) automatically, then add 3rd marker -> remove 2nd marker and so on. Can anyone help me understand how to do this? Maybe with grouplayer? How does it work? ``` // generate unique user id var userId = Math.random().toString(16).substring(2,15); var socket = io.connect('http://localhost:4000'); var doc = $(document); // custom marker's icon styles var tinyIcon = L.Icon.extend({ options: { iconSize: [25, 39], iconAnchor: [12, 36], shadowSize: [41, 41], shadowAnchor: [12, 38], popupAnchor: [0, -30] } }); var anyIcon = new tinyIcon({ iconUrl: "assets/img/icon.png" }); var sentData = {} var connects = {}; var markers = {}; var active = false…

Accepted Answer

You can remove layers from the map using the removeLayer function of L.Map. A marker is also seen as a layer in Leaflet. So in your onclick handler, first remove the current marker, then create a new marker and add to the map. Something like this will do the trick:

```
var marker = null;

map.on('click', function (e) {
    if (marker !== null) {
        map.removeLayer(marker);
    }
    marker = L.marker(e.latlng).addTo(map);
});
```

Working example on Plunker: http://plnkr.co/edit/NRl0VQi3wSGK3p8aHlHs?p=preview

EDIT: After rereading your question i've got a better understanding of what you are trying to accomplish. I think this is what you are looking for:

```
var myId = 'abc'; // My user id

// other user id's and their markers
var markers = {
    'def': L.marker([51.441767, 5.470247]).addTo(map),
    'ghi': L.marker([51.441767, 5.480247]).addTo(map),
    'jkl': L.marker([51.441767, 5.490247]).addTo(map)
};

map.on('click', function (e) {
    // check if my user id in marker object and thus on the map
    if (markers.hasOwnProperty(myId)) {
        // remove the marker
        map.removeLayer(markers[myId]);
    }
    // place (or overwrite) marker with my uid in object and add to map
    markers[myId] = L.marker(e.latlng).addTo(map);
});
```

Here's another working example on Plunker: http://plnkr.co/edit/X8NQVF1FDbNKTV5a5nwn?p=preview

Leaflet - how to remove previous marker automatically

Solution

Problem

Related problems