Add polyline head marker example

IvanSanchez · Apr 14, 2020 · b84b44e · b84b44e
1 parent 628ef92
commit b84b44e
Show file tree

Hide file tree

Showing 3 changed files with 173 additions and 9 deletions.
diff --git a/demo-timestamp.html b/demo-timestamp.html
@@ -0,0 +1,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/[email protected]/dist/leaflet.css"
+		  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+		  crossorigin=""/>
+	<style>
+		.leaflet-div-icon{
+			border: none;
+			background: #ffffff00;
+		}
+	</style>
+	<script src="https://unpkg.com/[email protected]/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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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>
diff --git a/demo.html b/demo.html
@@ -3,10 +3,17 @@
 <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/[email protected]/dist/leaflet.css"
 		  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
 		  crossorigin=""/>
+	<style>
+		.leaflet-div-icon{
+			border: none;
+			background: #ffffff00;
+		}
+	</style>
 	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
 			integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
 			crossorigin=""></script>
@@ -22,7 +29,9 @@
 		<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()"></p>
+		<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"></p>
 		<button onclick='snakeLaunch()'>LAUNCH A SNAKE!</button><button onclick='snakeReset()'>RESET THE SNAKE!</button>
 	</div>
 
@@ -63,13 +72,6 @@
 			path.snakeOut();
 		}
 
-		let checkBoxHead = document.getElementById("checkFollowHead");
-		let followHead = false;
-		snakeFollow();
-		function snakeFollow(){
-			followHead = checkBoxHead.checked; //this can be setup during polyline creation
-		}
-
 		function snakeLaunch(){
 			path.snakeIn();
 			setTimeout(function () {
@@ -79,18 +81,49 @@
 
 		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(checkBoxShowMarker.checked && !map.hasLayer(headMarker)){
+				map.addLayer(headMarker);
+			}
+		});
+
 		path.on('snakeIn snakeInEnd', function(ev){
-			if(followHead){
+			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>
diff --git a/route-time.js b/route-time.js