I'm very new to using leaflet and javascript. I'm trying to implement a time slider using leaflet. I've had a look at
1) https://github.com/dwilhelm89/LeafletSlider,
2) https://gis.stackexchange.com/questions/120331/jsonp-working-with-leaflet-time-slider and
3) TimeSlider Plugin and Leaflet - Markers not appearing in order
and I'm still having trouble. My HTML file looks like:
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script type="text/javascript" src="C:\Users\Lukasz Obara\OneDrive\Programing\JavaScript\Leaflet\Plugins\SliderControl.js"></script>
</head>
<body>
<meta charset="utf-8">
<title>Slider</title>
<style> html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</body>
<div id="map"></div>
<script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\slider.geojson'></script>
<script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\leaflet_demo_slider.js'></script>
my slider.geojson file:
var slider = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.1966, 31.7825]
},
"properties": {
"GPSId": "2",
"DateStart": "2015-06-23",
"DateClosed": "2016-01-23",
"GPSUserName": "fake2",
"GPSUserColor": "#FF5500",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.2, 31.780117]
},
"properties": {
"GPSId": "6",
"DateStart": "2015-06-23",
"DateClosed": "2016-01-23",
"GPSUserName": "fake1",
"GPSUserColor": "#00FF57",
"Gender": "Female",
"Active": 0
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.201715, 31.779548]
},
"properties": {
"GPSId": "15",
"DateStart": "2015-02-21",
"DateClosed": "2016-02-28",
"GPSUserName": "fake10",
"GPSUserColor": "#00FF57",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.200987, 31.779606]
},
"properties": {
"GPSId": "16",
"DateStart": "2015-01-01",
"DateClosed": "2016-01-01",
"GPSUserName": "fake11",
"GPSUserColor": "#00FF57",
"Gender": "Female",
"Active": 0
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.200987, 31.780522]
},
"properties": {
"GPSId": "17",
"DateStart": "2015-02-04",
"DateClosed": "2016-09-21",
"GPSUserName": "fake12",
"GPSUserColor": "#00FF57",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.201435, 31.780981]
}
}],
};
and my javascript leaflet_demo_slider.js file
var map = L.map('map', {
center: [31.780117, 35.2],
zoom: 17,
minZoom: 2,
maxZoom: 20
});
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);
var sliderControl = null;
//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(slider, {
onEachFeature: function (feature, layer) {
layer.bindPopup("<h1>" + feature.properties.GPSUserName + "</h1><p>Other info</p>");
}
});
var sliderControl = L.control.sliderControl({
position: "topright",
layer: testlayer,
range: true,
timeAttribute: "DateStart"
});
//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);
//And initialize the slider
sliderControl.startSlider();
If I remove all the slider options within the javascript file and simply have
L.geoJson(slider, {
onEachFeature: function (feature, layer) {
layer.bindPopup("<h1>" + feature.properties.GPSUserName + "</h1><p>Other info</p>");
}
})addTo(map);
then I'm able to see the the markers, but with what I have I only am able to generate a map.
The problem appears to be your last GeoJSON feature, which does not have a
DateStartproperty (for the slider) or aGPSUserNameproperty (for the popup). If you delete that feature, it will work:http://jsfiddle.net/ngeLm8c0/6/
These sorts of problems are often easier to diagnose if you look at the console output, where errors are logged. In most browsers, you can access the console (and other developer tools) by hitting F12. Of course, it is not always clear what is going wrong just from the error messages, but even if you don't understand the error you're getting, it is helpful to include the error messages with your questions here, so others can more easily diagnose your problem.