feat: Add arrow symbol to polyline in RouteMap component

OneBusAway · Aug 22, 2024 · b117093 · b117093
1 parent f16738a
commit b117093
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/src/components/map/RouteMap.svelte b/src/components/map/RouteMap.svelte
@@ -39,6 +39,7 @@
 
 			if (shape) {
 				polyline = await createPolyline(shape);
+				addArrowToPolyline();
 				polyline.setMap(map);
 			}
 		}
@@ -54,6 +55,25 @@
 		}
 	}
 
+	function addArrowToPolyline() {
+		const arrowSymbol = {
+			path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
+			scale: 2,
+			strokeColor: '#FF0000',
+			strokeWeight: 3
+		};
+
+		polyline.setOptions({
+			icons: [
+				{
+					icon: arrowSymbol,
+					offset: '100%',
+					repeat: '50px'
+				}
+			]
+		});
+	}
+
 	function addStopMarker(stopTime, stop) {
 		const marker = new google.maps.Marker({
 			position: { lat: stop.lat, lng: stop.lon },