0

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>
1

What is missing is layer option in slider control definition:

sliderControl = L.control.sliderControl({
    layer: hgGeoJSON,
    position: "topright",
    timeAttribute: "Year",
    time: '1000'
});
  • 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 Mar 5 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 Mar 5 at 23:39
  • Move slider control definition out of $.getJSON call and put it just before map.addControl(sliderControl) statement. – TomazicM Mar 6 at 12:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.