trafficcue/trafficcue-client
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: extract routing layers from Map.svelte
Some checks failed
TrafficCue CI / check (push) Failing after 53s
Details
TrafficCue CI / build (push) Successful in 45s
Details

Browse Source
This commit is contained in:
Cfp
2025-07-12 11:13:03 +02:00
parent cb78ea4845
commit 82a5cb3e31
2 changed files with 42 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/lib/components/lnv/Map.svelte
View File

@ -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}
<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}
<RoutingLayers />
{#if location.available}
<div class="maplibregl-user-location-dot" bind:this={locationDot}></div>

40
src/lib/services/navigation/RoutingLayers.svelte Normal file
View File

@ -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}