then
/
opencoil-paracity
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

added map with timeslider example (map-timeslider.html)

master
user 4 years ago
parent
d876c66eb1
commit
00d25f4060
1 changed files with 417 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 417
      website/map-timeslider.html

417
website/map-timeslider.html
View 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>
Write Preview
Loading…
Cancel
Save