refactor: extract routing layers from Map.svelte

src/lib/components/lnv/Map.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import {
-		GeoJSONSource,
-		LineLayer,
 		MapLibre,
 		Marker,
 		Protocol,
@@ -16,6 +14,7 @@
 	import { location } from "./location.svelte";
 	import { protocol } from "$lib/services/OfflineTiles";
 	import { saved } from "$lib/saved.svelte";
+	import RoutingLayers from "$lib/services/navigation/RoutingLayers.svelte";
 
 	onMount(() => {
 		window.addEventListener("resize", map.updateMapPadding);
@@ -32,36 +31,6 @@
 
 <Protocol scheme="tiles" loadFn={protocol} />
 
-<!-- <Protocol
-	scheme="tiles"
-	loadFn={async (params) => {
-		console.log(params.url);
-		const url = params.url
-			.replace("tiles://", "")
-			.replace("tiles.openfreemap.org/", "");
-		const path = url.split("/")[0];
-		if (path == "natural_earth") {
-			const t = await fetch("https://tiles.openfreemap.org/" + url);
-			if (t.status == 200) {
-				const buffer = await t.arrayBuffer();
-				return { data: buffer };
-			} else {
-				throw new Error(`Tile fetch error: ${t.statusText}`);
-			}
-		} else if (path == "planet") {
-			const t = await fetch("https://tiles.openfreemap.org/" + url);
-			if (t.status == 200) {
-				const buffer = await t.arrayBuffer();
-				return { data: buffer };
-			} else {
-				throw new Error(`Tile fetch error: ${t.statusText}`);
-			}
-		} else {
-			throw new Error("Invalid tiles protocol path");
-		}
-	}}
-/> -->
-
 <MapLibre
 	class="w-full h-full"
 	style="/style.json"
@@ -117,23 +86,6 @@
 			color="red"
 		/>
 	{/if}
-	<!-- <Hash /> -->
-	<!-- <GeolocateControl
-		positionOptions={{
-			enableHighAccuracy: true,
-		}}
-		trackUserLocation={true}
-		autoTrigger={true}""
-		ongeolocate={(e: GeolocationPosition) => {
-			const speed = Math.round((e.coords.speed || 0) * 3.6); // In km/h
-			const accuracy = Math.round(e.coords.accuracy);
-			geolocate.currentLocation = {
-				lat: e.coords.latitude,
-				lon: e.coords.longitude,
-			};
-			// $inspect(`Geolocation: ${e.coords.latitude}, ${e.coords.longitude} (Speed: ${speed} km/h, Accuracy: ${accuracy} m)`);
-		}}
-	/> -->
 	{#if pin.isDropped}
 		<Marker lnglat={{ lat: pin.lat, lng: pin.lng }} />
 	{/if}
@@ -168,94 +120,7 @@
 		/>
 	{/if}
 
-	{#if routing.geojson.routePast}
+	<RoutingLayers />
-		<GeoJSONSource id="route-past" data={routing.geojson.routePast}>
-			<LineLayer
-				id="route-past-border"
-				source="route-past"
-				layout={{ "line-join": "round", "line-cap": "round" }}
-				paint={{
-					"line-color": "#FFFFFF",
-					"line-width": 13,
-				}}
-			></LineLayer>
-			<LineLayer
-				id="route-past"
-				source="route-past"
-				layout={{ "line-join": "round", "line-cap": "round" }}
-				paint={{
-					"line-color": "#acacac",
-					"line-width": 8,
-				}}
-			></LineLayer>
-		</GeoJSONSource>
-	{/if}
-	{#if routing.geojson.al0}
-		<GeoJSONSource id="al0" data={routing.geojson.al0}>
-			<LineLayer
-				id="al0-border"
-				source="al0"
-				layout={{ "line-join": "round", "line-cap": "round" }}
-				paint={{
-					"line-color": "#FFFFFF",
-					"line-width": 13,
-				}}
-			></LineLayer>
-			<LineLayer
-				id="al0"
-				source="al0"
-				layout={{ "line-join": "round", "line-cap": "round" }}
-				paint={{
-					"line-color": "#94aad4",
-					"line-width": 8,
-				}}
-			></LineLayer>
-		</GeoJSONSource>
-	{/if}
-	{#if routing.geojson.al1}
-		<GeoJSONSource id="al1" data={routing.geojson.al1}>
-			<LineLayer
-				id="al1-border"
-				source="al1"
-				layout={{ "line-join": "round", "line-cap": "round" }}
-				paint={{
-					"line-color": "#FFFFFF",
-					"line-width": 13,
-				}}
-			></LineLayer>
-			<LineLayer
-				id="al1"
-				source="al1"
-				layout={{ "line-join": "round", "line-cap": "round" }}
-				paint={{
-					"line-color": "#94aad4",
-					"line-width": 8,
-				}}
-			></LineLayer>
-		</GeoJSONSource>
-	{/if}
-	{#if routing.geojson.route}
-		<GeoJSONSource id="route" data={routing.geojson.route}>
-			<LineLayer
-				id="route-border"
-				source="route"
-				layout={{ "line-join": "round", "line-cap": "round" }}
-				paint={{
-					"line-color": "#FFFFFF",
-					"line-width": 13,
-				}}
-			></LineLayer>
-			<LineLayer
-				id="route"
-				source="route"
-				layout={{ "line-join": "round", "line-cap": "round" }}
-				paint={{
-					"line-color": "#3478f6",
-					"line-width": 8,
-				}}
-			></LineLayer>
-		</GeoJSONSource>
-	{/if}
 
 	{#if location.available}
 		<div class="maplibregl-user-location-dot" bind:this={locationDot}></div>

src/lib/services/navigation/RoutingLayers.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { GeoJSONSource, LineLayer } from "svelte-maplibre-gl";
+	import { routing } from "./routing.svelte";
+</script>
+
+{#snippet layer(data: GeoJSON.Feature, id: string, color: string)}
+	<GeoJSONSource {id} {data}>
+		<LineLayer
+			id="{id}-border"
+			source={id}
+			layout={{ "line-join": "round", "line-cap": "round" }}
+			paint={{
+				"line-color": "#FFFFFF",
+				"line-width": 13,
+			}}
+		></LineLayer>
+		<LineLayer
+			{id}
+			source={id}
+			layout={{ "line-join": "round", "line-cap": "round" }}
+			paint={{
+				"line-color": color,
+				"line-width": 8,
+			}}
+		></LineLayer>
+	</GeoJSONSource>
+{/snippet}
+
+{#if routing.geojson.routePast}
+	{@render layer(routing.geojson.routePast, "route-past", "#acacac")}
+{/if}
+{#if routing.geojson.al0}
+	{@render layer(routing.geojson.al0, "al0", "#94aad4")}
+{/if}
+{#if routing.geojson.al1}
+	{@render layer(routing.geojson.al1, "al1", "#94aad4")}
+{/if}
+{#if routing.geojson.route}
+	{@render layer(routing.geojson.route, "route", "#3478f6")}
+{/if}