javascript - Incorporating time slider with leaflet

admin管理员组
文章数量:1024627

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.

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/

本文标签： javascriptIncorporating time slider with leafletStack Overflow

版权声明：本文标题：javascript - Incorporating time slider with leaflet - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745616808a2159339.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - Incorporating time slider with leaflet - Stack Overflow

1 Answer 1

1 Answer 1

更多相关文章