How To Use Leaflet Slider Along With Markercluster In Javascript?

i am making a map that uses a slider to show or hide markers, and i want to add clustering functionality, each one alone works perfectly, but i want the slider to show the markers,

Solution 1:

Edit March 2016:

You can now simply use the plugin Leaflet.MarkerCluster.LayerSupport to achieve this, without having to change Leaflet Slider plugin code.

See the demo LayerSupport with LeafletSlider plugin.

In your case, you would do:

var markers = L.layerGroup();

// Add all your markers into `markers` Layer Group.// Check into MCG Layer Support!// Add to map first before checking in.
L.markerClusterGroup.layerSupport().addTo(map).checkIn(markers);

var sliderControl = L.control.sliderControl({
  position: "topright",
  layer: markers,
  range: false,
  follow: 3
});

map.addControl(sliderControl);
sliderControl.startSlider();

Disclosure: I am the author of that plugin.

---

Original answer:

Refrain from adding (removing) individual markers directly to (from) the map, when they are handled by a MarkerClusterGroup which is on the map at the same time.

MCG expects to be the only group managing the markers, and if you want to show / hide some of the markers, you have to use markers.addLayer(myMarker); (or removeLayer), where markers is your MCG.

The Leaflet Time-Slider (sliderControl) plugin is therefore incompatible as-is with MCG: it directly adds (removes) markers to (from) the map. It does not know anything about your MCG.

Nevertheless, you should be able to make it compatible with MCG by replacing any map.addLayer by markers.addLayer (same for removeLayer) in the plugin code. Do not forget to add your MCG to the map.