CODEWITHSUNDEEP
javascriptleafletmarkerclustererleaflet.markercluster
user2441511
user2441511

Reputation: 11116

Leaflet markercluster: How can I create a markercluster with numbered markers?

I am trying to create a markercluster that has markers with IDs, because I would later like to remove a single marker from the map. However, I'm having trouble even getting these labeled markers to appear on the map. I'm loading them from a geoJSON formatted variable individualPoints. I can add these markers to the map directly with the following code snippet:

// create object to save markers
var markersID = {};

// exchanges latitude & longitude
function switchLatLong(oldLocation) {
  return new L.LatLng(oldLocation[1], oldLocation[0]);
}

var geoJsonLayer = L.geoJson(individualPoints, {
  onEachFeature: function(feature, layer) {
    /* can add directly to the map--this works */
    markersID[feature.properties.id] = 
        L.marker(switchLatLong(feature.geometry.coordinates))
            .addTo(map);
  }
});

But I want them to be in a cluster, so I think I need to tag each marker with an ID (as in this question), then add this group to the cluster as follows:

var geoJsonLayer = L.geoJson(individualPoints, {
  onEachFeature: function(feature, layer) {
    /* tag the marker with the id */
    markersID[feature.properties.id] = 
        L.marker(switchLatLong(feature.geometry.coordinates));
  }
});

// create a marker cluster group, and add the markers to this.
var markers = L.markerClusterGroup({});
/* here's where I'm trying to toggle to use the markers with ID numbers */
//markers.addLayer(geoJsonLayer); // this works
markers.addLayers(markersID);   // this doesn't

Adding geoJsonLayer works just fine, but adding markersID doesn't. So I must be adding markersID incorrectly. Here's a jsfiddle. https://jsfiddle.net/anfw0n6w/

Questions: Is there some better way to create markers that have an ID that I can refer to later? How else can I add markersID to the markerClusterGroup?

Upvotes: 2

Views: 2088

Answers (1)

ghybs
ghybs

Reputation: 53185

Is there some better way to create markers that have an ID that I can refer to later?

There are ways that work :-)

How else can I add markersID to the markerClusterGroup?

Since your markersID is a plain object, you cannot. addLayer accepts a Marker or a Layer Group (like your L.geoJson), and addLayers accepts an array of Markers.

Do not mix your need to refer to your markers later on, with the need to add them to your Marker Cluster Group.

What happens is that within your onEachFeature, you duplicate your Markers (create new ones) in markersID, instead of keeping a reference to the same layer that is built by L.geoJson. If you just keep a reference to layer, then you can refer directly to those markers, and you can directly add your L.geoJson layer group to your Marker Cluster Group:

var markersID = {};

var geoJsonLayer = L.geoJson(individualPoints, {
  onEachFeature: function(feature, layer) {
    // make a marker with that number
    // actually no need to duplicate the marker.
    //markersID[feature.properties.id] = L.marker(switchLatLong(feature.geometry.coordinates));
    markersID[feature.properties.id] = layer;
  }
});

markers.addLayer(geoJsonLayer); // this works
map.addLayer(markers);

// This will work, you just need to get the appropriate `id`.
markers.removeLayer(markersID[id]);

Demo: https://jsfiddle.net/anfw0n6w/1/

Upvotes: 4

Related Questions