JSONP working with Leaflet time slider

Question

I would like to integrate the time slider into a JSONP geoserver. Here is the current code I have http://jsfiddle.net/qcwcrwge/26/ and I would like to use the time slider with a layer called feature.properties.time.

I have tried to add the time slide libraries and the lines

var testlayer = L.geoJson(json),
 sliderControl = L.control.sliderControl({
 position: "topright",
 layer: feature.properties.time
 });
//For a Range-Slider use the range property:
sliderControl = L.control.sliderControl({
 position: "topright",
 layer: feature.properties.time,
 range: true
});
//Make sure to add the slider to the map ;-)
myMap.addControl(sliderControl);
//And initialize the slider
sliderControl.startSlider();

Just after the line

}).addTo(coolPlaces);

But it does not work.

Do you know what the problem can be?

Answer 1

For initializing the slider control, you will need jQuery and jQuery UI, too. Also, you have to include the leaflet.SliderControl.min.js, as you mentioned in your question.

To initialize the slider, you have to make a GeoJSON layer to pass:

var testlayer = L.geoJson(WFSLayer);

The slider control must be constructed with the GeoJSON layer, in this case called testlayer:

sliderControl = L.control.sliderControl({
 position: "topright",
 layer: testlayer,
 range: true
});

The last step is to activate the control, that is almost correct in your code snippet. You have to refer to your current map object, instead of myMap:

//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);
//And initialize the slider
sliderControl.startSlider();

Note: make sure, your GeoJSON features have a time property, like in the demo. You can have a glance at the demo features here. I don't know if the plugin can handle time formats which differ from the example GeoJSON time property, it's up to you to test (or look it up in the source code).

Updated fiddle: http://jsfiddle.net/GFarkas/qcwcrwge/30/.

Try to test your application in localhost, because as far as I can see, JSFiddle doesn't support range inputs.