javascript - Incorporating time slider with leaflet

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) ,

2) 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="">

<head profile="">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <link rel="stylesheet" href=".7.2/leaflet.css"/>
  <link rel="stylesheet" href=".9.2/themes/base/jquery-ui.css" type="text/css">

  <script type="text/javascript" src=".9.2/jquery-ui.js"></script>
  <script type="text/javascript" src=".9.1.min.js"></script>
  <script type="text/javascript" src=".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/tiles/1.0.0/map/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="/" title="MapQuest" target="_blank">MapQuest</a> <img src=".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.

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./dwilhelm89/LeafletSlider,

2) https://gis.stackexchange./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/1999/xhtml">

<head profile="http://gmpg/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

  <script type="text/javascript" src="http://code.jquery./ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript" src="http://code.jquery./jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="http://cdn.leafletjs./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./tiles/1.0.0/map/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest./" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest./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.

Share Improve this question edited May 23, 2017 at 12:02 CommunityBot 11 silver badge asked Apr 8, 2016 at 6:07 Lukasz 2,61611 gold badges42 silver badges58 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

The problem appears to be your last GeoJSON feature, which does not have a DateStart property (for the slider) or a GPSUserName property (for the popup). If you delete that feature, it will work:

http://jsfiddle/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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Incorporating time slider with leaflet - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)