I am very new to leaflet and programming in general.
I've set up a map that has a travelTimes_geojson.js that is overlaying in mutlipolygons on the map with click popups.
What I'd like to do next is to add a animation or timeline bar that has a play, pause, reload controls that will load all of my var s in the travelTimes_geojson.js and show the popupContent (or days and weeks of time that has past) as each is displayed. For example, user clicks play and then dayOne turns on and the animation or timeline bar shows the string "1 day" then dayTwo turns on and animation or timeline bar shows the string "2 day" and so on.
As I said, I am very new to all of this and I've been looking for a tutuorial, but cannot find anything that explains in detail how I'd go about this. Any and all assistance is greatly appreciate!
var weekFive = {
"type": "Feature",
"properties": {
"popupContent": "5 weeks",
"style": {
weight: 2,
color: "#999",
opacity: 0.8,
fillColor: "#769F5F",
fillOpacity: 0.5
}
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[ -90.094, 29.824 ], [ -90.103, 29.813 ], [ -90.111, 29.802 ], [ -90.12, 29.792 ], [ -90.128, 29.781 ], [ -90.136, 29.77 ], [ -90.144, 29.76 ], [ -90.152, 29.749 ], [ -90.16, 29.739 ], [ -90.168, 29.728 ], [ -90.175, 29.718 ], [ -90.183, 29.707 ], [ -90.191, 29.697 ], [ -90.198, 29.686 ], [ -90.205, 29.676 ], [ -90.213, 29.666 ], [ -90.22, 29.655 ], [ -90.227, 29.645 ], [ -90.234, 29.635 ], [ -90.241, 29.625 ], [ -90.248, 29.614 ], [ -90.254, 29.604 ], [ -90.261, 29.594 ], [ -90.268, 29.584 ], [ -90.274, 29.574 ], [ -90.28, 29.564 ], [ -90.287, 29.554 ], [ -90.293, 29.545 ], [ -90.299, 29.535 ], [ -90.305, 29.525 ], [ -90.311, 29.515 ], [ -90.317, 29.506 ], [ -90.323, 29.496 ], [ -90.329, 29.486 ], [ -90.334, 29.477 ], [ -90.34, 29.467 ], [ -90.345, 29.458 ], [ -90.351, 29.449 ], [ -90.356, 29.439 ], [ -90.361, 29.43 ], [ -90.367, 29.421 ], [ -90.372, 29.412 ], [ -90.377, 29.403 ], [ -90.382, 29.394 ], [ -90.387, 29.385 ], [ -90.391, 29.376 ], [ -90.396, 29.367 ], [ -90.401, 29.359 ], [ -90.405, 29.35 ], [ -90.414, 29.333 ], [ -90.414, 29.333 ], [ -90.903, 29.057 ]
]
]
]
}
};
var map = L.map('map', {
zoom: 5,
center: [36.505, -82.09],
});
map.setMaxBounds([
[22.843102, -101.204367],
[50.135038, -63.806440]
]);
L.tileLayer('tiles/TravelTimes_base/{z}/{x}/{y}.png', {
attribution: '© 2015 beth',
minZoom: 4,
maxZoom: 8
}).addTo(map);
L.control.scale().addTo(map);
function onEachFeature(feature, layer) {
var popupContent = "<p>It took " +
feature.properties.popupContent + " to travel this far from New York city in 1800</p>";
layer.bindPopup(popupContent);
}
L.geoJson([bicycleRental, dayOne, dayTwo, dayThree, dayFour, dayFive, daySix, weekOne, weekTwo, weekThree, weekFour, weekFive, weekSix], {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);