-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathx.html
128 lines (110 loc) · 8.62 KB
/
x.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
<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/[email protected]/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://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_7f626e30fc3b416dbf178119fe222e65 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/iso8601.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.control.css"/>
</head>
<body>
<div class="folium-map" id="map_7f626e30fc3b416dbf178119fe222e65" ></div>
</body>
<script>
var map_7f626e30fc3b416dbf178119fe222e65 = L.map(
"map_7f626e30fc3b416dbf178119fe222e65",
{
center: [43.578842, -79.683668],
crs: L.CRS.EPSG3857,
zoom: 12,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_7049e89ac8b64ef3b61f9264799220a6 = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "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": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_7f626e30fc3b416dbf178119fe222e65);
L.Control.TimeDimensionCustom = L.Control.TimeDimension.extend({
_getDisplayDateFormat: function(date){
var newdate = new moment(date);
console.log(newdate)
return newdate.format("YYYY-MM-DD HH:mm:ss");
}
});
map_7f626e30fc3b416dbf178119fe222e65.timeDimension = L.timeDimension(
{
period: "PT1M",
}
);
var timeDimensionControl = new L.Control.TimeDimensionCustom(
{"autoPlay": true, "loopButton": false, "maxSpeed": 10, "minSpeed": 0.1, "playerOptions": {"loop": true, "startOver": true, "transitionTime": 200}, "position": "bottomleft", "timeSliderDragUpdate": false}
);
map_7f626e30fc3b416dbf178119fe222e65.addControl(this.timeDimensionControl);
var geoJsonLayer = L.geoJson({"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-79.683668, 43.578842], [-79.67463, 43.64334]]}, "properties": {"times": ["2021-06-13 18:31:41", "2021-06-13 18:41:41"], "style": {"color": "blue", "weight": 5}}}, {"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-79.67463, 43.64334], [-79.72385, 43.67037]]}, "properties": {"times": ["2021-06-13 18:41:41", "2021-06-13 18:51:41"], "style": {"color": "yellow", "weight": 5}}}, {"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-79.72385, 43.67037], [-79.67463, 43.64334]]}, "properties": {"times": ["2021-06-13 18:51:41", "2021-06-13 19:01:41"], "style": {"color": "green", "weight": 5}}}, {"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-79.67463, 43.64334], [-79.68331, 43.59709]]}, "properties": {"times": ["2021-06-13 19:01:41", "2021-06-13 19:11:41"], "style": {"color": "orange", "weight": 5}}}, {"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-79.68331, 43.59709], [-79.67463, 43.64334]]}, "properties": {"times": ["2021-06-13 19:11:41", "2021-06-13 19:21:41"], "style": {"color": "red", "weight": 5}}}, {"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-79.67463, 43.64334], [-79.78122, 43.59114]]}, "properties": {"times": ["2021-06-13 19:21:41", "2021-06-13 19:31:41"], "style": {"color": "blue", "weight": 5}}}, {"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-79.78122, 43.59114], [-79.67463, 43.64334]]}, "properties": {"times": ["2021-06-13 19:31:41", "2021-06-13 19:41:41"], "style": {"color": "yellow", "weight": 5}}}, {"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-79.67463, 43.64334], [-79.58327, 43.67772]]}, "properties": {"times": ["2021-06-13 19:41:41", "2021-06-13 19:51:41"], "style": {"color": "green", "weight": 5}}}, {"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-79.58327, 43.67772], [-79.67463, 43.64334]]}, "properties": {"times": ["2021-06-13 19:51:41", "2021-06-13 20:01:41"], "style": {"color": "orange", "weight": 5}}}, {"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-79.67463, 43.64334], [-79.683668, 43.578842]]}, "properties": {"times": ["2021-06-13 20:01:41", "2021-06-13 20:11:41"], "style": {"color": "red", "weight": 5}}}]}, {
pointToLayer: function (feature, latLng) {
if (feature.properties.icon == 'marker') {
if(feature.properties.iconstyle){
return new L.Marker(latLng, {
icon: L.icon(feature.properties.iconstyle)});
}
//else
return new L.Marker(latLng);
}
if (feature.properties.icon == 'circle') {
if (feature.properties.iconstyle) {
return new L.circleMarker(latLng, feature.properties.iconstyle)
};
//else
return new L.circleMarker(latLng);
}
//else
return new L.Marker(latLng);
},
style: function (feature) {
return feature.properties.style;
},
onEachFeature: function(feature, layer) {
if (feature.properties.popup) {
layer.bindPopup(feature.properties.popup);
}
}
})
var timestamped_geo_json_4746e26f8b214ed4a204a978545af12e = L.timeDimension.layer.geoJson(
geoJsonLayer,
{
updateTimeDimension: true,
addlastPoint: true,
duration: undefined,
}
).addTo(map_7f626e30fc3b416dbf178119fe222e65);
</script>