added map with timeslider example (map-timeslider.html)
This commit is contained in:
user
parent
d876c66eb1
commit
00d25f4060
417
website/map-timeslider.html
Normal file
417
website/map-timeslider.html
Normal file
@ -0,0 +1,417 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<script>
|
||||
L_NO_TOUCH = false;
|
||||
L_DISABLE_3D = false;
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
||||
<!-- timeslider -->
|
||||
<script src="SliderControl.js"></script>
|
||||
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
|
||||
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
|
||||
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
|
||||
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
|
||||
<style>
|
||||
#map_66b5a6264dfa4a998dc8fa32442df74c {
|
||||
position: relative;
|
||||
width: 100.0%;
|
||||
height: 100.0%;
|
||||
left: 0.0%;
|
||||
top: 0.0%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="folium-map" id="map_66b5a6264dfa4a998dc8fa32442df74c" ></div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
var map_66b5a6264dfa4a998dc8fa32442df74c = L.map(
|
||||
"map_66b5a6264dfa4a998dc8fa32442df74c",
|
||||
{
|
||||
center: [52.51619, 13.377693],
|
||||
crs: L.CRS.EPSG3857,
|
||||
zoom: 13,
|
||||
zoomControl: false,
|
||||
preferCanvas: false,
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var tile_layer_fc34de30640440e29213a6dc88212e3c = L.tileLayer(
|
||||
"https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
|
||||
{"attribution": "Map tiles by \u003ca href=\"http://stamen.com\"\u003eStamen Design\u003c/a\u003e, under \u003ca href=\"http://creativecommons.org/licenses/by/3.0\"\u003eCC BY 3.0\u003c/a\u003e. Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 25, "maxZoom": 25, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var marker_e7a96a6d6b08479ba6d17d42769e5202 = L.marker(
|
||||
[52.513729, 13.417783],
|
||||
{}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var icon_7e68fd836a604f9481171759656817aa = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_e7a96a6d6b08479ba6d17d42769e5202.setIcon(icon_7e68fd836a604f9481171759656817aa);
|
||||
|
||||
|
||||
var popup_61a4a06251134ea18ad31a8baefc871a = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_249b1b5f870c4628a7054479a1f76450 = $(`<div id="html_249b1b5f870c4628a7054479a1f76450" style="width: 100.0%; height: 100.0%;"><strong>ARTWORK_TITLE<br>short descriptive one liner about the work<strong/></div>`)[0];
|
||||
popup_61a4a06251134ea18ad31a8baefc871a.setContent(html_249b1b5f870c4628a7054479a1f76450);
|
||||
|
||||
|
||||
marker_e7a96a6d6b08479ba6d17d42769e5202.bindPopup(popup_61a4a06251134ea18ad31a8baefc871a)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
marker_e7a96a6d6b08479ba6d17d42769e5202.bindTooltip(
|
||||
`<div>
|
||||
ARTIST_NAME_HERE
|
||||
</div>`,
|
||||
{"sticky": true}
|
||||
);
|
||||
|
||||
|
||||
var marker_26e0d61227da43a3baa1236bca4b5d4d = L.marker(
|
||||
[52.461211, 13.321236],
|
||||
{}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var icon_292d966206b84639bc1fa8173c4e505d = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_26e0d61227da43a3baa1236bca4b5d4d.setIcon(icon_292d966206b84639bc1fa8173c4e505d);
|
||||
|
||||
|
||||
var popup_786ff33144074d16a13fac5a70c80413 = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_3734a12f0bcc4939ac37e24b7131c514 = $(`<div id="html_3734a12f0bcc4939ac37e24b7131c514" style="width: 100.0%; height: 100.0%;"><strong>ARTWORK_TITLE<br>short descriptive one liner about the work<strong/></div>`)[0];
|
||||
popup_786ff33144074d16a13fac5a70c80413.setContent(html_3734a12f0bcc4939ac37e24b7131c514);
|
||||
|
||||
|
||||
marker_26e0d61227da43a3baa1236bca4b5d4d.bindPopup(popup_786ff33144074d16a13fac5a70c80413)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
marker_26e0d61227da43a3baa1236bca4b5d4d.bindTooltip(
|
||||
`<div>
|
||||
ARTIST_NAME_HERE
|
||||
</div>`,
|
||||
{"sticky": true}
|
||||
);
|
||||
|
||||
|
||||
var marker_80f591aca16a4339926dddf57e90560e = L.marker(
|
||||
[52.54126, 13.368985],
|
||||
{}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var icon_2210d702cc0549b592e3c7f2fdd6cfb7 = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_80f591aca16a4339926dddf57e90560e.setIcon(icon_2210d702cc0549b592e3c7f2fdd6cfb7);
|
||||
|
||||
|
||||
var popup_510b919682944cfbb44983a15afc56ef = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_ced036b517b84177a9fe276aad7d6fe5 = $(`<div id="html_ced036b517b84177a9fe276aad7d6fe5" style="width: 100.0%; height: 100.0%;"><strong>ARTWORK_TITLE<br>short descriptive one liner about the work<strong/></div>`)[0];
|
||||
popup_510b919682944cfbb44983a15afc56ef.setContent(html_ced036b517b84177a9fe276aad7d6fe5);
|
||||
|
||||
|
||||
marker_80f591aca16a4339926dddf57e90560e.bindPopup(popup_510b919682944cfbb44983a15afc56ef)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
marker_80f591aca16a4339926dddf57e90560e.bindTooltip(
|
||||
`<div>
|
||||
ARTIST_NAME_HERE
|
||||
</div>`,
|
||||
{"sticky": true}
|
||||
);
|
||||
|
||||
|
||||
var marker_3ace0978bcfb4182a6974fc0df0b4896 = L.marker(
|
||||
[52.511607, 13.29455],
|
||||
{}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var icon_43d7ff98c7db401dbc989eaeeb3e14bd = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_3ace0978bcfb4182a6974fc0df0b4896.setIcon(icon_43d7ff98c7db401dbc989eaeeb3e14bd);
|
||||
|
||||
|
||||
var popup_d21e7ba7d872418e8b292c88e70bcb9f = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_920805c9df724127a26990cbf65070ff = $(`<div id="html_920805c9df724127a26990cbf65070ff" style="width: 100.0%; height: 100.0%;"><strong>ARTWORK_TITLE<br>short descriptive one liner about the work<strong/></div>`)[0];
|
||||
popup_d21e7ba7d872418e8b292c88e70bcb9f.setContent(html_920805c9df724127a26990cbf65070ff);
|
||||
|
||||
|
||||
marker_3ace0978bcfb4182a6974fc0df0b4896.bindPopup(popup_d21e7ba7d872418e8b292c88e70bcb9f)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
marker_3ace0978bcfb4182a6974fc0df0b4896.bindTooltip(
|
||||
`<div>
|
||||
ARTIST_NAME_HERE
|
||||
</div>`,
|
||||
{"sticky": true}
|
||||
);
|
||||
|
||||
|
||||
var marker_3089ec748547475eb4974983d6bd5fb4 = L.marker(
|
||||
[52.501228, 13.346171],
|
||||
{}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var icon_c176bb2c0b694c0bb18140dc46fb319b = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_3089ec748547475eb4974983d6bd5fb4.setIcon(icon_c176bb2c0b694c0bb18140dc46fb319b);
|
||||
|
||||
|
||||
var popup_f66d8723ad934c15ad31aa2175e70928 = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_4b058379e7c94dce8cdfe2ba9b5aee7b = $(`<div id="html_4b058379e7c94dce8cdfe2ba9b5aee7b" style="width: 100.0%; height: 100.0%;"><strong>ARTWORK_TITLE<br>short descriptive one liner about the work<strong/></div>`)[0];
|
||||
popup_f66d8723ad934c15ad31aa2175e70928.setContent(html_4b058379e7c94dce8cdfe2ba9b5aee7b);
|
||||
|
||||
|
||||
marker_3089ec748547475eb4974983d6bd5fb4.bindPopup(popup_f66d8723ad934c15ad31aa2175e70928)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
marker_3089ec748547475eb4974983d6bd5fb4.bindTooltip(
|
||||
`<div>
|
||||
ARTIST_NAME_HERE
|
||||
</div>`,
|
||||
{"sticky": true}
|
||||
);
|
||||
|
||||
|
||||
var marker_8aa6d065125e49eea01ae4a1a89a1425 = L.marker(
|
||||
[52.526517, 13.47936],
|
||||
{}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var icon_c64f390265e34ff89cc5dc85a5ae3ec3 = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_8aa6d065125e49eea01ae4a1a89a1425.setIcon(icon_c64f390265e34ff89cc5dc85a5ae3ec3);
|
||||
|
||||
|
||||
var popup_e88378d5d1864be9b7317c8311b61ad0 = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_0f913dc365cd43778e6bc5f977d0e825 = $(`<div id="html_0f913dc365cd43778e6bc5f977d0e825" style="width: 100.0%; height: 100.0%;"><strong>ARTWORK_TITLE<br>short descriptive one liner about the work<strong/></div>`)[0];
|
||||
popup_e88378d5d1864be9b7317c8311b61ad0.setContent(html_0f913dc365cd43778e6bc5f977d0e825);
|
||||
|
||||
|
||||
marker_8aa6d065125e49eea01ae4a1a89a1425.bindPopup(popup_e88378d5d1864be9b7317c8311b61ad0)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
marker_8aa6d065125e49eea01ae4a1a89a1425.bindTooltip(
|
||||
`<div>
|
||||
ARTIST_NAME_HERE
|
||||
</div>`,
|
||||
{"sticky": true}
|
||||
);
|
||||
|
||||
|
||||
var marker_55e3f8cd86fe4056984dac1020908704 = L.marker(
|
||||
[52.493582, 13.448384],
|
||||
{}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var icon_995a38895cbe41eeac1c6282de7a1f9d = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_55e3f8cd86fe4056984dac1020908704.setIcon(icon_995a38895cbe41eeac1c6282de7a1f9d);
|
||||
|
||||
|
||||
var popup_59c224cc790645a0ab94edf5b00e1f1d = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_f8d5d83663794c19a47b6e1bb0a3be53 = $(`<div id="html_f8d5d83663794c19a47b6e1bb0a3be53" style="width: 100.0%; height: 100.0%;"><strong>ARTWORK_TITLE<br>short descriptive one liner about the work<strong/></div>`)[0];
|
||||
popup_59c224cc790645a0ab94edf5b00e1f1d.setContent(html_f8d5d83663794c19a47b6e1bb0a3be53);
|
||||
|
||||
|
||||
marker_55e3f8cd86fe4056984dac1020908704.bindPopup(popup_59c224cc790645a0ab94edf5b00e1f1d)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
marker_55e3f8cd86fe4056984dac1020908704.bindTooltip(
|
||||
`<div>
|
||||
ARTIST_NAME_HERE
|
||||
</div>`,
|
||||
{"sticky": true}
|
||||
);
|
||||
|
||||
|
||||
var marker_b320a63368694eefacaa44e83b5a3217 = L.marker(
|
||||
[52.512555, 13.316421],
|
||||
{}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var icon_2e9b075e6bba430e9ef62b9fdea2b25a = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_b320a63368694eefacaa44e83b5a3217.setIcon(icon_2e9b075e6bba430e9ef62b9fdea2b25a);
|
||||
|
||||
|
||||
var popup_ebe7023b4e624dd4a2476dc5d5a9165c = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_53372c11bb064447b261ee8b3493ef96 = $(`<div id="html_53372c11bb064447b261ee8b3493ef96" style="width: 100.0%; height: 100.0%;"><strong>ARTWORK_TITLE<br>short descriptive one liner about the work<strong/></div>`)[0];
|
||||
popup_ebe7023b4e624dd4a2476dc5d5a9165c.setContent(html_53372c11bb064447b261ee8b3493ef96);
|
||||
|
||||
|
||||
marker_b320a63368694eefacaa44e83b5a3217.bindPopup(popup_ebe7023b4e624dd4a2476dc5d5a9165c)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
marker_b320a63368694eefacaa44e83b5a3217.bindTooltip(
|
||||
`<div>
|
||||
ARTIST_NAME_HERE
|
||||
</div>`,
|
||||
{"sticky": true}
|
||||
);
|
||||
|
||||
|
||||
var marker_a44c470f65ba4d2089d170e056c659c5 = L.marker(
|
||||
[52.525817, 13.404346],
|
||||
{}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var icon_04247df2d8614d8b83714af7a2f3919f = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_a44c470f65ba4d2089d170e056c659c5.setIcon(icon_04247df2d8614d8b83714af7a2f3919f);
|
||||
|
||||
|
||||
var popup_5c922ab0cbf24dc8af30bd533e2a4117 = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_d8bb3d6aefed4d4b9fc7fa9f696a1393 = $(`<div id="html_d8bb3d6aefed4d4b9fc7fa9f696a1393" style="width: 100.0%; height: 100.0%;"><strong>ARTWORK_TITLE<br>short descriptive one liner about the work<strong/></div>`)[0];
|
||||
popup_5c922ab0cbf24dc8af30bd533e2a4117.setContent(html_d8bb3d6aefed4d4b9fc7fa9f696a1393);
|
||||
|
||||
|
||||
marker_a44c470f65ba4d2089d170e056c659c5.bindPopup(popup_5c922ab0cbf24dc8af30bd533e2a4117)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
marker_a44c470f65ba4d2089d170e056c659c5.bindTooltip(
|
||||
`<div>
|
||||
ARTIST_NAME_HERE
|
||||
</div>`,
|
||||
{"sticky": true}
|
||||
);
|
||||
|
||||
|
||||
var marker_12769282a2f642adb0a22c281916ef69 = L.marker(
|
||||
[52.504926, 13.358061],
|
||||
{}
|
||||
).addTo(map_66b5a6264dfa4a998dc8fa32442df74c);
|
||||
|
||||
|
||||
var icon_9ac68ca37f8f4c7e8f4cf465fdf5ca85 = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "prefix": "glyphicon"}
|
||||
);
|
||||
marker_12769282a2f642adb0a22c281916ef69.setIcon(icon_9ac68ca37f8f4c7e8f4cf465fdf5ca85);
|
||||
|
||||
|
||||
var popup_489cff9561604268911b7e9f86aa4391 = L.popup({"maxWidth": "100%"});
|
||||
|
||||
|
||||
var html_fe5ace1c8a2f43a6aa49f145ccb72078 = $(`<div id="html_fe5ace1c8a2f43a6aa49f145ccb72078" style="width: 100.0%; height: 100.0%;"><strong>ARTWORK_TITLE<br>short descriptive one liner about the work<strong/></div>`)[0];
|
||||
popup_489cff9561604268911b7e9f86aa4391.setContent(html_fe5ace1c8a2f43a6aa49f145ccb72078);
|
||||
|
||||
|
||||
marker_12769282a2f642adb0a22c281916ef69.bindPopup(popup_489cff9561604268911b7e9f86aa4391)
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
marker_12769282a2f642adb0a22c281916ef69.bindTooltip(
|
||||
`<div>
|
||||
ARTIST_NAME_HERE
|
||||
</div>`,
|
||||
{"sticky": true}
|
||||
);
|
||||
|
||||
|
||||
// time slider
|
||||
// time can be gotten from the api (lastLocationUpdate)
|
||||
|
||||
//test markers
|
||||
var marker1 = L.marker([52.504926, 13.358061], {time: "2020-10-09T08:00:29Z"});
|
||||
var marker2 = L.marker([52.506926, 13.358061], {time: "2020-10-09T09:00:29Z"});
|
||||
var marker3 = L.marker([52.508926, 13.358061], {time: "2020-10-09T10:00:29Z"});
|
||||
|
||||
var map = map_66b5a6264dfa4a998dc8fa32442df74c;
|
||||
// layerGroup = L.layerGroup([marker_e7a96a6d6b08479ba6d17d42769e5202]);
|
||||
layerGroup = L.layerGroup([marker1, marker2, marker3]);
|
||||
var sliderControl = L.control.sliderControl({layer:layerGroup});
|
||||
map.addControl(sliderControl);
|
||||
sliderControl.startSlider();
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user