Leaflet SliderControl

by tr00st

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<script src="http://tr00st.co.uk/leaflet.SliderControl.js"></script>
<div id="map"></div>

<script id="pointsData" type='application/json'>{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "time": "2013-01-22 08:42:26+01" }, "geometry": { "type": "Point", "coordinates": [ 7.582512743, 51.933292258, 1 ] } }, { "type": "Feature", "properties": { "time": "2013-01-22 10:00:26+01" }, "geometry": { "type": "Point", "coordinates": [ 7.602516645, 51.94962073, 1 ] } }, { "type": "Feature", "properties": { "time": "2013-01-22 10:03:29+01" }, "geometry": { "type": "Point", "coordinates": [ 7.61132039, 51.967614681, 1 ] } }, { "type": "Feature", "properties": { "time": "2013-01-22 10:06:29+01" }, "geometry": { "type": "Point", "coordinates": [ 7.595284208, 51.976391375, 1 ] } }, { "type": "Feature", "properties": { "time": "2013-01-22 10:22:59+01" }, "geometry": { "type": "Point", "coordinates": [ 7.594649893, 52.001819278, 1 ] } }, { "type": "Feature", "properties": { "time": "2013-01-22 10:24:59+01" }, "geometry": { "type": "Point", "coordinates": [ 7.540678938, 51.971138575, 1 ] } }, { "type": "Feature", "properties": { "time": "2013-01-22 10:26:27+01" }, "geometry": { "type": "Point", "coordinates": [ 7.533023003, 51.999112128, 1 ] } }, { "type": "Feature", "properties": { "time": "2013-01-22 10:27:27+01" }, "geometry": { "type": "Point", "coordinates": [ 7.44920273, 51.976204843, 1 ] } }, { "type": "Feature", "properties": { "time": "2013-01-22 10:29:27+01" }, "geometry": { "type": "Point", "coordinates": [ 7.41380031, 52.003490927, 1 ] } }, { "type": "Feature", "properties": { "time": "2013-01-22 10:31:01+01" }, "geometry": { "type": "Point", "coordinates": [ 7.443067797, 51.979804442, 1 ] } }, { "type": "Feature", "properties": { "time": "2013-01-22 10:47:55+01" }, "geometry": { "type":...

SCSS

#map {
    width: 100%;
    height: 600px;
    margin-top: 3em;
}

JavaScript

var sliderControl = null;

var map = L.map('map').setView([51.9, 7.9], 9);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

json = JSON.parse($("#pointsData").text());

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

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