docs/examples/multipletimelines.html
<!DOCTYPE html>
<html>
<head>
<title>Multiple L.Timelines on One L.timelineSliderControl</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="./leaflet.timeline.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
/*
* Everything fullscreen.
*/
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
/*
* You could style the timeline however you like, but we just make it wider here.
*/
.leaflet-left {
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var polygons = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
start: "1970-01-05",
end: "1979-12-31",
},
geometry: {
type: "Polygon",
coordinates: [
[
[52.3828125, 58.90464570302001],
[52.3828125, 70.25945200030641],
[97.03125, 70.25945200030641],
[97.03125, 58.90464570302001],
[52.3828125, 58.90464570302001],
],
],
},
},
{
type: "Feature",
properties: {
start: "1980-01-01",
end: "1989-12-31",
},
geometry: {
type: "Polygon",
coordinates: [
[
[111.09374999999999, 57.32652122521709],
[111.09374999999999, 71.24435551310671],
[149.765625, 71.24435551310671],
[149.765625, 57.32652122521709],
[111.09374999999999, 57.32652122521709],
],
],
},
},
{
type: "Feature",
properties: {
start: "1990-01-01",
end: "1999-12-31",
},
geometry: {
type: "Polygon",
coordinates: [
[
[42.5390625, 37.996162679728116],
[42.5390625, 51.944264879028765],
[94.74609375, 51.944264879028765],
[94.74609375, 37.996162679728116],
[42.5390625, 37.996162679728116],
],
],
},
},
{
type: "Feature",
properties: {
start: "2000-01-01",
end: "2009-12-31",
},
geometry: {
type: "Polygon",
coordinates: [
[
[-113.90625, 14.604847155053898],
[-113.90625, 74.1160468394894],
[10.546875, 74.1160468394894],
[10.546875, 14.604847155053898],
[-113.90625, 14.604847155053898],
],
],
},
},
],
};
var points = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
start: "1981-01-01",
end: "1983-12-31",
},
geometry: {
type: "Point",
coordinates: [122.34374999999999, 68.13885164925573],
},
},
{
type: "Feature",
properties: {
start: "1981-01-01",
end: "1984-12-31",
},
geometry: {
type: "Point",
coordinates: [132.1875, 49.15296965617039],
},
},
{
type: "Feature",
properties: {
start: "1988-01-01",
end: "1989-12-31",
},
geometry: {
type: "Point",
coordinates: [90, 65.5129625532949],
},
},
{
type: "Feature",
properties: {
start: "1990-01-01",
end: "1991-12-31",
},
geometry: {
type: "Point",
coordinates: [79.98046875, 53.4357192066942],
},
},
{
type: "Feature",
properties: {
start: "1991-01-01",
end: "1992-12-31",
},
geometry: {
type: "Point",
coordinates: [-24.609375, 49.61070993807422],
},
},
{
type: "Feature",
properties: {
start: "1993-01-01",
end: "1993-07-01",
},
geometry: {
type: "Point",
coordinates: [-94.21875, 24.5271348225978],
},
},
{
type: "Feature",
properties: {
start: "1994-01-01",
end: "1994-12-31",
},
geometry: {
type: "Point",
coordinates: [35.15625, 43.58039085560786],
},
},
{
type: "Feature",
properties: {
start: "1996-01-01",
end: "1997-01-01",
},
geometry: {
type: "Point",
coordinates: [39.375, -33.7243396617476],
},
},
{
type: "Feature",
properties: {
start: "1997-01-01",
end: "1997-12-31",
},
geometry: {
type: "Point",
coordinates: [-31.640625, -13.2399454992863],
},
},
{
type: "Feature",
properties: {
start: "1999-01-01",
end: "2000-01-01",
},
geometry: {
type: "Point",
coordinates: [122.34374999999999, -34.88593094075315],
},
},
],
};
/*
* Create the map
*/
var map = L.map("map").setView([0, 0], 2);
L.tileLayer(
"https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png",
{
maxZoom: 18,
attribution:
'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
}
).addTo(map);
var slider = L.timelineSliderControl({
formatOutput: function (date) {
return moment(date).format("YYYY-MM-DD");
},
});
map.addControl(slider);
var polygonTimeline = L.timeline(polygons);
polygonTimeline.addTo(map);
var pointTimeline = L.timeline(points);
pointTimeline.addTo(map);
slider.addTimelines(polygonTimeline, pointTimeline);
</script>
</body>
</html>