added cleanish time slider example in website folder

4 years ago · f4af4c7e9f
2 changed files with 92 additions and 329 deletions
--- a/website/map-timeslider-example.html
+++ b/website/map-timeslider-example.html
@ -0,0 +1,90 @@
 <!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="map/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);
            // 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>
--- a/website/map-timeslider.html
+++ b/website/map-timeslider.html
@ -11,7 +11,7 @@
        <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="map/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>
@ -70,334 +70,7 @@
            ).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