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

Question

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?

score 4 · Accepted Answer · answered Aug 19 '16 at 15:52

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/

Wow---thank you so much! That's exactly what I needed. I really appreciate that you clarified the difference between the markers group and the layers. :-) — user2441511, Aug 19 '16 at 19:00
In Leaflet vocabulary, everything you can add to the map (except for controls) is a _layer_ : a marker, a layer group, a tile layer, etc. As for your `markersID`, in JavaScript, `{}` makes it an [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), aka associative array, or dictionary. `[]` would have made it an [array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), which is actually a specific type of object. — ghybs, Aug 19 '16 at 20:01
Mmmm, okay, that makes sense. Thank you. As a note to myself and others, I was able to get my original solution to work by defining `markersID` as an array (albeit still duplicating the markers, and needing to update the id value of `individualPoints` to yield a 0th entry). Fiddle: https://jsfiddle.net/anfw0n6w/3/. Your solution is definitely cleaner. :-) — user2441511, Aug 19 '16 at 20:10

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

1 Answers1