Add polyline head marker example

IvanSanchez · Apr 13, 2020 · 5944e18 · 5944e18
1 parent 628ef92
commit 5944e18
Showing 1 changed file with 42 additions and 9 deletions.
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" onclick="snakeHideHeadMarkerOnEnd()"></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(!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>