Leaflet time slider issue for a beginner

Question

I just started learning leaflet and the trying to learn things as I implement them in my project. The leaflet time slider here is one of my first 3rd party contributor implementation that I'm attempting. I followed the directions in a straight forward manner.

Below is the simplified code:

html

<div id="map">
</div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="js/SliderControl.js"></script>
<script src="js/script.js"></script>    
</body>
</html>

js

var map = L.map('map').setView([40.7241745, -73.9841674], 11);

L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
maxZoom: 16
}).addTo(map);

var myData = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-74.0481651,40.7208714]},"properties":{"endDate":"12/8/14 22:00","startDate":"12/8/14 19:00"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.9924459,40.7176705]},"properties":{"endDate":"12/9/14 19:00","startDate":"12/9/14 19:00"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.4557279,40.6790963]},"properties":{"endDate":"12/9/14 22:00","startDate":"12/9/14 20:00"}}]}

var mylayer = L.geoJson(myData).addTo(map);
var sliderControl = L.control.sliderControl({position: "topright", layer: mylayer});
map.addControl(sliderControl);
sliderControl.startSlider();
$('#slider-timestamp').html(options.markers[ui.value].feature.properties.startDate.substr(0, 19));
// only change I made was use startDate instead of default time as startDate is a column in my //feature set.
css

div#map {
 height: 600px;
 width: 800px;
 margin-left: auto;
 margin-bottom: auto;
 margin-top: auto;
 margin-right: auto;
 left: 20px;
 border-color: #000000;
 z-index: 0;
}

body {
 padding: 0px;
 background-color: #fff;
}

I added all the files as suggested in the link, If anyone has experience with this. Kindly let me know what else am I missing. I understand that I have not posed a concrete issue because the errors I got on my console were on source script leading me to believe that my script is not communicating properly with the module.

Thanks!

Answer 1

You're loading the jQuery UI stylesheet with a script tag:

<script src="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"></script>

You should load it using the style tag:

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

You forgot to load the leaflet stylesheet:

<link type="text/css" rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />

Doing that, everything works just fine. It has one error which is not fatal, which i'm guessing is a bug in SliderControl or error in the documentation: I had to comment out this line which errors with "ui.value not defined":

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

Here's the working example on Plunker: http://plnkr.co/edit/K5nd6eZAfDfkfyEXHgMI?p=preview