CODEWITHSUNDEEP
javascriptleafletmapbox
shaunjacobsen
shaunjacobsen

Reputation: 639

Mapbox JS markers not being removed using .removeLayer()

I have a function that successfully adds markers to a map using the mapbox javascript library. However, I want the function to clear all markers from the map before adding two new ones, so that only two markers are showing at a time.

I have looked at other questions/answers here, but none of them have worked so far; markers are just continually added without being removed.

var map = L.mapbox.map(...);

function updateMarkers(d) {
  var featureLayer = L.mapbox.featureLayer();
  map.removeLayer(featureLayer);
    getCoordX = d.stn_f_c;
    getCoordX = getCoordX.split(",");
    getCoordY = d.stn_t_c;
  getCoordY = getCoordY.split(",");
    featureLayer = L.marker([getCoordX[0],getCoordX[1]], {
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'bicycle',
            'marker-color': '#66CD00'
        })
    }).addTo(map);
  featureLayer += L.marker([getCoordY[0],getCoordY[1]], {
    icon: L.mapbox.marker.icon({
      'marker-size': 'large',
      'marker-symbol': 'bicycle',
      'marker-color': '#FF6666'
    })
  }).addTo(map);
}

Thank you in advance for any assistance.

Upvotes: 1

Views: 2313

Answers (1)

iH8
iH8

Reputation: 28638

The 'removeLayer' method just removes the layer from your map instance and keeps it intact so you can re-add it later. You'll need to call the clearLayers() of L.mapbox.FeatureLayer which will remove all the added features from the layer:

featureLayer.clearLayers();

Also you're overwriting the reference featureLayer which holds your layer instance with an instance of L.Marker:

featureLayer = L.marker(...);

The next marker you're using the += assignment operator on the featureLayer reference (which now holds a reference to the first marker) that won't work. It's for adding values, not object instances:

featureLayer += L.marker(...);

There are two ways to add a single layer (marker, polygon, etc) to a featureLayer, using the addLayer method of the featureLayer, or using the addTo method of the object you're trying to add:

featureLayer.addLayer(marker);
// or
marker.addTo(featureLayer);

Another weird thing you're doing is the adding of the coordinates. You split the string value to an array: 

getCoordX = d.stn_f_c;
getCoordX = getCoordX.split(",");

Now (i'm assuming) you have an array with two values, then you're using those seperately and creating an array again: 

L.marker([getCoordX[0],getCoordX[1]])

You can just skip that and just do:

L.marker(getCoordX)

Which is in fact the same. I've cleaned your code but am unable to test it, so forgive me if i made a freehand error:

var map = L.mapbox.map(...);

// Create empty layer
var featureLayer = L.mapbox.featureLayer().addTo(map);

function updateMarkers (d) {

    // Clear layer
    featureLayer.clearLayers();

    // Splitting the value and adding it in one go
    L.marker(d.stn_f_c.split(","), {
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'bicycle',
            'marker-color': '#66CD00'
        })
    }).addTo(featureLayer); // Add to the featureLayer

    L.marker(d.stn_t_c.split(","), {
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'bicycle',
            'marker-color': '#FF6666'
        })
    }).addTo(featureLayer);

}

Hope that helps

Upvotes: 2

Related Questions