LeafletSlider

The Leaflet Time-Slider enables you to dynamically add and remove Markers on a map by using a JQuery UI slider .

Check out the Demo!

Usage

Add:

• SliderControl.js
• JQuery
• JQueryUI - CSS
• JQueryUI - JS

to your normal Leaflet map.

To enable the Slider you have to pass in a layer to the SliderControl, add the Slider. The Control has to be initialized by using the method startSlider(); on the control.

//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(json);
var sliderControl = L.control.sliderControl({position: "topright", layer: testlayer});
		
//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);

//And initialize the slider
sliderControl.startSlider();

Adjust the used time property so that it fits your project:

$('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 19));

You can also use a range-slider by using the range property:

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

The Leaflet Slider can also be used for usual LayerGroups with mixed features (Markers and Lines, etc.)

var marker1 = L.marker([51.5, -0.09]);
var marker2 = L.marker([51.6, -0.09]);
var marker3 = L.marker([51.7, -0.09]);
var marker4 = L.marker([51.8, -0.09]);
	
var pointA = new L.LatLng(51.8, -0.09);
var pointB = new L.LatLng(51.9, -0.2);
var pointList = [pointA, pointB];

var polyline = new L.Polyline(pointList, {
	color: 'red',
	weight: 3,
	opacity: 1,
	smoothFactor: 1
});
		
		
layerGroup = L.layerGroup([marker1, marker2, marker3, marker4, polyline ]);
var sliderControl = L.control.sliderControl({layer:layerGroup});
map.addControl(sliderControl);
sliderControl.startSlider();

Bower

Leaflet Slider is also a registered package in Bower (based on nodejs). Integrate the source in your project with:

npm install -g bower
bower install leaflet-slider

Author

Dennis Wilhelm, 2013