Extract timestamp not defined using Leaflet Time Slider?

Question 1

I am new to coding, so there may be many things wrong with my code. I am trying to build a Leaflet time slider for some point data. The geojson data is of sites where water was sampled for mercury levels and represents samples taken at different locations every five years. I want the data for each sample year to show at the same time.

So far I get points on the map, a slider that doesn't work, and an error: SliderControl.js:183 Uncaught ReferenceError: _extractTimeStamp is not defined how do I define the extract timestamp?

Here is a sample of the data:

 {"type": "FeatureCollection",{
"type": "FeatureCollection",
"crs": { "type": "name", 
 "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
 { "type": "Feature", 
 "properties": 
 { "Site ID": "JB002", 
 "Year": 1993, 
 "Hg": 0.050000, 
 "Place": "Jamaica Bay", 
 "Start": 1993, 
 "End": 1993 
 }, 
"geometry": { 
 "type": "Point", 
 "coordinates": [ -73.797836, 40.63616 ] } },

and the code:

$(document).ready(function () {
var map = L.map('map').setView([40.748297,-73.941422], 11);
L.tileLayer('https://api.mapbox.com/styles/v1/eichners/cjqvwjoam3d7p2smt18p3nssn/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZWljaG5lcnMiLCJhIjoiY2lrZzVneDI4MDAyZ3VkbTZmYWlyejUzayJ9.vEGckM-D3AjV4jXmdibXyw', 
{
 tileSize: 512,
 zoomOffset: -1,
 attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var hgGeoJSON;
var sliderControl = null 
var hg
// 1. ADD Hg DATA
addHg(); 
function addHg() {
 $.getJSON( "geojson/Hg.geojson", function( data ) {
 var hg = data; 
 sliderControl = L.control.sliderControl({
 position: "topright",
 timeAttribute: "Year",
 time: '1000'
 });
 // POINT MARKER STYLE 
 var hgStyle=function (feature, latlng) { 
 return L.circleMarker(latlng, { 
 radius: (feature.properties.Hg)*2,
 fillColor: '#FF0000',
 color: '#FF0000',
 weight: 1, 
 fillOpacity: 0.6 
 })
 } 
 hgGeoJSON = L.geoJson(hg, {
 pointToLayer: hgStyle, 
 //onEachFeature: hgClick 
 });
 //LOAD DATA LAYERS AT END TO CONTROL ORDER
 hgGeoJSON.addTo(map);
 map.fitBounds(hgGeoJSON.getBounds()); 
 map.addControl(sliderControl);
 console.log("slider added");

//SliderControl.js:183 Uncaught ReferenceError: _extractTimeStamp is not defined sliderControl.startSlider(); }) }; });

and, my html with scripts, etc.

 <html>
 <head>
 <title>Leaflet time series _HEP Mercury</title>
 <meta charset="utf-8" />
 <!--stylesheets-->
 <link rel="stylesheet" href=jquery/jquery-ui/jquery-ui.css>
 <link rel="stylesheet" href=css/leaflet.css>
 <link rel="stylesheet" href=css/style.css>
 <script src="js/jquery.js"></script>
 <script src="jquery/jquery-ui/jquery-ui.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
 <script src="js/leaflet.js"></script>
 <script src="js/SliderControl.js"></script>
 <script src="js/main.js"></script>
 </head>
 <body>
 <div class ="wrapper">
 <div class="overlay">
 <div class="overlayContent">
 <!--<div id="info">-->
 <h1>Mercury 1993-2013</h1></br>
 </div>
 </div>
 </div>
 <div id="container">
 <div id="map"></div>
 </div>
 </body>
</html>

Question 2

What is missing is layer option in slider control definition:

sliderControl = L.control.sliderControl({
 layer: hgGeoJSON,
 position: "topright",
 timeAttribute: "Year",
 time: '1000'
});

Question 3

Thank you TomazicM. That might make a difference, but I'm still getting an error re. extract Timestamp so I can't tell; SliderControl.js:183 Uncaught ReferenceError: _extractTimeStamp is not defined

Question 4

And, I still get the error about layers: Error: You have to specify a layer via new SliderControl({layer: your_layer}); I'm not sure where else to specify it -- I did add to the slider options as suggested.

Question 5

Move slider control definition out of $.getJSON call and put it just before map.addControl(sliderControl) statement.

Question 6

the S in "extractTimestamp" needs to be lowercase

Question 7

that is correct in fact! there is a typo in LeafletSlider /SliderControl.js source on line 183: $('#slider-timestamp').html(_extractTimeStamp(... -> should be changed here to _extractTimestamp

TomazicM TomazicM 27.3k25 gold badges33 silver badges43 bronze badges · Accepted Answer · 2019-03-05 19:32:03Z

1

What is missing is layer option in slider control definition:

sliderControl = L.control.sliderControl({
 layer: hgGeoJSON,
 position: "topright",
 timeAttribute: "Year",
 time: '1000'
});

Share

Improve this answer

answered Mar 5, 2019 at 19:32

TomazicM's user avatar

TomazicM TomazicM

27.3k25 gold badges33 silver badges43 bronze badges

3

Thank you TomazicM. That might make a difference, but I'm still getting an error re. extract Timestamp so I can't tell; SliderControl.js:183 Uncaught ReferenceError: _extractTimeStamp is not defined

seichner
– seichner

2019年03月05日 23:00:48 +00:00
Commented Mar 5, 2019 at 23:00
And, I still get the error about layers: Error: You have to specify a layer via new SliderControl({layer: your_layer}); I'm not sure where else to specify it -- I did add to the slider options as suggested.

seichner
– seichner

2019年03月05日 23:39:25 +00:00
Commented Mar 5, 2019 at 23:39
Move slider control definition out of $.getJSON call and put it just before map.addControl(sliderControl) statement.

TomazicM
– TomazicM

2019年03月06日 12:05:21 +00:00
Commented Mar 6, 2019 at 12:05

Add a comment |

Stack Exchange Network

Extract timestamp not defined using Leaflet Time Slider?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Extract timestamp not defined using Leaflet Time Slider?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions