0

I use leaflet markercluster along with the ui slider (modified so it can handle a markercluster group as a entry layer, see How to use leaflet slider along with markercluster in Javascript?).

I managed to make it work except "time" is not sorted in my slider. I don't know what rule SliderControl.js follows to sort the markers but it seems random to me. My data variable (Data_GL) is well time sorted and I specified "timeStrLength: 10" in SliderControl.js.

Here's my code :

var sliderControl = null;

var map = L.map('map').setView([23, 2], 3);
map.options.maxZoom=13;

var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
L.tileLayer(osmUrl, {attribution: osmAttrib, id: 'mapbox.streets'}).addTo(map);

var markers = L.markerClusterGroup();
markers.addTo(map);

//Filling layer
var mapdata=Data_GL;

for (var i = 0; i < mapdata.length; i++) {
  var marker = L.marker([mapdata[i].latitude,mapdata[i].longitude],{title: mapdata[i].Platform,icon: cssic0,time: mapdata[i].time});
  marker.bindPopup(mapdata[i].Platform + "<br><b>Type </b>: " + mapdata[i].mtype + "<br><b>Last Update </b>: " + mapdata[i].time);
  console.log(marker.time);
  marker.addTo(markers);};

//Slider
var sliderControl = L.control.sliderControl({layer:markers , range:true});
map.addControl(sliderControl);

sliderControl.startSlider();

Data_GL looks like that :

var Data_GL = [
{"latitude":37.783380,"longitude":15.956680,"mtype":"GL","Platform":"61283","time":"2005-02-21"}, 
{"latitude":37.864970,"longitude":15.826730,"mtype":"GL","Platform":"61282","time":"2005-02-25"}, 
{"latitude":47.639170,"longitude":-8.469670,"mtype":"GL","Platform":"62595","time":"2006-03-12"}, 
{"latitude":59.562670,"longitude":-39.745000,"mtype":"GL","Platform":"64556","time":"2006-08-24"},
...

I tried this solution (http://jsfiddle.net/nathansnider/ngeLm8c0/4/) but I don't really know how to apply it to a markercluster group.

Community
  • 1
  • 1
Quai20
  • 109
  • 6

1 Answers1

0

Unfortunately LeafletSlider plugin does not sort layers automatically, even though it does read and show a timestamp.

That is why in the post related to the JSFiddle you mention, the author proposes to sort the input GeoJSON features.

(related post: TimeSlider Plugin and Leaflet - Markers not appearing in order)

But in fact, you should rather sort the options.markers array once you have created the sliderControl, because the order in the GeoJSON can potentially not be followed once it is read by the slider control.

So you would do something like:

var sliderControl = L.control.sliderControl({layer:markers , range:true});

sliderControl.options.markers.sort(function (a, b) {
    return (a.properties.time > b.properties.time);
});

map.addControl(sliderControl);

sliderControl.startSlider();

Note: I updated the first mentioned post with a new method to make LeafletSlider compatible with Leaflet.markercluster. There is no longer need to modify LeafletSlider code, you just use an extra plugin called Leaflet.MarkerCluster.LayerSupport (I am the author).

Community
  • 1
  • 1
ghybs
  • 47,565
  • 6
  • 74
  • 99
  • 1
    Also updated my [answer to the related post](http://stackoverflow.com/a/35881206/5403120) to include the correct sorting method. Hopefully this will help avoid further confusion. – nathansnider Mar 15 '16 at 18:59
  • Thanks very much but sliderControl.options.markers.sort(...) does not work for me. It crashes the application with this error : "Uncaught TypeError: Cannot read property 'sort' of null" Maybe that's because markers is not a layer but a cluster group ? – Quai20 Mar 16 '16 at 07:48
  • Ok now that I use your plugin Leaflet.MarkerCluster.LayerSupport, I don't need to sort anymore. This is working. I'm now facing another issue with your plugin. I want to combine the slider and the L.control.layer (ie, your 2 demos combined) with Cluster suport. But this is another topic. Many thanks to you – Quai20 Mar 16 '16 at 08:25