forked from IvanSanchez/Leaflet.Polyline.SnakeAnim
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdemo-timestamp.html
130 lines (104 loc) · 4.28 KB
/
demo-timestamp.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
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Leaflet debug page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<style>
.leaflet-div-icon{
border: none;
background: #ffffff00;
}
</style>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script src="L.Polyline.SnakeAnim.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<div>
<p></p>
<button onclick='snake()'>SNAKE! IT'S A SNAKE!</button><button onclick='snakeOut()'>SNAKE! GO OUT!</button>
</div>
<div>
<p><label for="checkFollowHead">Follow head: </label><input type="checkbox" id="checkFollowHead" onclick="snakeFollow()">
<label for="checkShowMarker">Show a marker on head</label><input type="checkbox" id="checkShowMarker" onclick="snakeShowMarker()">
<label for="checkHideHeadMarker">Hide the head marker at the end</label><input type="checkbox" id="checkHideHeadMarker" onclick="snakeHideHeadMarkerOnEnd()"></p>
<button onclick='snakeLaunch()'>LAUNCH A SNAKE!</button><button onclick='snakeReset()'>RESET THE SNAKE!</button>
</div>
<script src="route.js"></script>
<script>
/*let latlngs = [];
for (let i = 0; i < route.length; i++) {
latlngs.push(new L.LatLng(route[i][0], route[i][1]));
}*/
// Shorter path for development
let latlngs = [new L.LatLng(51,0), new L.LatLng(52,0), new L.LatLng(52,1), new L.LatLng(51,1), new L.LatLng(51.5,0.5)];
let timestamps = [[new Date('2020-01-01T00:00:00'), new Date('2020-01-01T00:01:00'), new Date('2020-01-01T00:02:00'), new Date('2020-01-01T00:04:00'), new Date('2020-01-01T00:05:00')]];
const len = latlngs.length;
let path = L.polyline(latlngs, { snakingTimeSpeed: 100 });
path._snakeTimestamps = timestamps;
let map = L.map('map');
let positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
map.fitBounds(L.latLngBounds(latlngs));
map.addLayer(L.marker(latlngs[0]));
map.addLayer(L.marker(latlngs[len - 1]));
map.addLayer(path);
path.bindPopup("Hello world");
function snake() {
path.snakeIn();
}
function snakeOut(){
path.snakeOut();
}
function snakeLaunch(){
path.snakeIn();
setTimeout(function () {
path.snakeOut();
}, 1000)
}
function snakeReset(){
path.snakeReset();
headMarker.setLatLng(latlngs[len - 1]);
}
let checkBoxHead = document.getElementById("checkFollowHead");
let carIcon = L.divIcon({html: '<i class="fas fa-car fa-2x" style="color:#ff0000;"></i>', iconAnchor:[12,20], popupAnchor:[0,-20]});
let headMarker = L.marker(latlngs[0], {icon: carIcon}).bindPopup("<p>I'm a fast <strong style='color: #ff0000'>red</strong> car!</p>", { autoPan: false });
let checkBoxShowMarker = document.getElementById("checkShowMarker");
let checkBoxHideHeadMarker = document.getElementById("checkHideHeadMarker");
snakeShowMarker();
function snakeShowMarker(){
if(checkBoxShowMarker.checked){
map.addLayer(headMarker);
}else if(map.hasLayer(headMarker)){
map.removeLayer(headMarker);
}
}
/*path.on('snakeInStart snakeOutStart snakeIn snakeOut snakeInEnd snakeOutEnd', function(ev){
console.log(ev.type);
});*/
path.on('snakeInStart', function(ev){
if(!map.hasLayer(headMarker)){
map.addLayer(headMarker);
}
});
path.on('snakeIn snakeInEnd', function(ev){
if(checkBoxHead.checked){
map.setView(ev);
}
headMarker.setLatLng(ev);
});
path.on('snakeInEnd', function(ev){
if(checkBoxHideHeadMarker.checked && map.hasLayer(headMarker)){
map.removeLayer(headMarker);
}
});
</script>
</body>
</html>