JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div id='map'></div>

CSS

body { padding: 0; margin: 0; }

html, body, #map {
	height: 100%;
	width: 100%;
}

JavaScript

var sliderControl = null;

var camps = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"STATUS":"UNOCCUPIED","DATE_START":"2015-06-23","DATE_CLOSED":"2016-01-23"},"geometry":{"type":"Point","coordinates":[64.6875,34.97600151317591]}},{"type":"Feature","properties":{"STATUS":"OCCUPIED","DATE_START":"2014-01-21","DATE_CLOSED":"2015-05-25"},"geometry":{"type":"Point","coordinates":[65.335693359375,36.26199220445664]}},{"type":"Feature","properties":{"STATUS":"UNOCCUPIED","DATE_START":"2015-09-13","DATE_CLOSED":""},"geometry":{"type":"Point","coordinates":[67.587890625,35.969115075774845]}}]};

camps.features.sort(function(a, b) {
  return (a.properties.DATE_START > b.properties.DATE_START);
});

var map = L.map('map', {
    center: [33.67406853374198,66.9287109375],
	zoom: 7
}).addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));


//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(camps, {
		onEachFeature: function(feature,layer){
			layer.bindPopup(feature.properties.DATE_START);
		}
	});
	
var sliderControl = L.control.sliderControl({position: "topright", layer: testlayer, timeAttribute: 'DATE_START'});

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

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

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