Hide Markers - Mapbox

Question

I have added markers as given in example below.

for (let x = 0; x < mapMarkers.length; x++) {
  //mapObject.totalMarkers.push(createMarker(mapMarkers[x].whereLat, mapMarkers[x].whereLng, mapMarkers[x].id, detailContId));
  markerClusters.addLayer(createMarker(mapMarkers[x].whereLat, mapMarkers[x].whereLng, mapMarkers[x].id, detailContId));

}

markerClusters.on('clusterclick', function(a) {
  zoomLevel = mapObject.getZoom();
  if (zoomLevel < appConfig.userSetting.maxZoom) {
    mapObject.zoomIn();
  } else {
    a.layer.spiderfy();
  }
});

mapObject.addLayer(markerClusters);

Now I want to hide some markers. I have done some Rnd like given below but not able to succeed. Any help is great for me.

objMap.removeLayer(mapMarkers[0]); 

Answer 1

objMap.removeLayer(mapMarkers[0]); 

This would make sense if you were adding mapMarkers to the map, but as this code shows, that isn't the case: mapMarkers is the data that you transform into marker objects using the createMarker method before adding to the map.

Conceptually, you have mapObject , that contains markerClusters , that contains markers (which you aren't assigning variable names to). So, if you want to remove a specific marker from the markerclusters, you need to call removeLayer from the cluster's perspective, not from the map's.

So you can use markerCluster.eachLayer , like

markerClusters.eachLayer(function (layer, i) {
  if (i == 0) markerClusters.removeLayer(layer);
});

That would remove the first layer. If you have some other criteria for which cluster you want to remove, you'll need to either store the markers in an array before adding them to the cluster, or change that simple if statement into something that tests whether the marker should be removed.