Enhancement/polyline-arrow-symbol

src/components/map/RouteMap.svelte

@@ -1,7 +1,7 @@
 <script>
 	/* global google */
 	import { onMount, onDestroy } from 'svelte';
-	import { createPolyline, loadGoogleMapsLibrary } from '$lib/googleMaps';
+	import { createPolyline, loadGoogleMapsLibrary, addArrowToPolyline } from '$lib/googleMaps';
 
 	export let map;
 	export let tripId;
@@ -39,6 +39,7 @@
 
 			if (shape) {
 				polyline = await createPolyline(shape);
+				addArrowToPolyline(polyline);
 				polyline.setMap(map);
 			}
 		}

src/lib/colors.js

@@ -0,0 +1,4 @@
+export const COLORS = {
+	POLYLINE: '#00FF00',
+	POLYLINE_ARROW: '#8250DF'
+};

src/lib/googleMaps.js

@@ -1,3 +1,5 @@
+import { COLORS } from '$lib/colors';
+
 /**
  * Loads the Google Maps JavaScript library.
  * @param {string} apiKey - The API key for accessing the Google Maps API.
@@ -154,10 +156,37 @@ export async function createPolyline(shape) {
 	const polyline = new window.google.maps.Polyline({
 		path,
 		geodesic: true,
-		strokeColor: '#00FF00',
+		strokeColor: COLORS.POLYLINE,
 		strokeOpacity: 1.0,
 		strokeWeight: 4
 	});
 
 	return polyline;
 }
+
+/**
+ * Adds an arrow to the polyline.
+ * @param {google.maps.Polyline} polyline - The polyline to which the arrow will be added.
+ */
+export function addArrowToPolyline(polyline) {
+	if (!(polyline instanceof google.maps.Polyline)) {
+		console.error('Invalid polyline');
+		return;
+	}
+	const arrowSymbol = {
+		path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
+		scale: 2,
+		strokeColor: COLORS.POLYLINE_ARROW,
+		strokeWeight: 3
+	};
+
+	polyline.setOptions({
+		icons: [
+			{
+				icon: arrowSymbol,
+				offset: '100%',
+				repeat: '50px'
+			}
+		]
+	});
+}

src/routes/api/oba/shape/[shapeId]/+server.js

@@ -9,7 +9,6 @@ export async function GET({ params }) {
 
 	try {
 		const response = await fetch(apiURL);
-		console.log('response:', response);
 
 		if (!response.ok) {
 			throw new Error(`HTTP error! status: ${response.status}`);