brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes colors of trails on map

Browse Source
This commit is contained in:
Christian Beutel
2024-12-02 21:22:47 +01:00
parent a40e1be511
commit 9901f2f4bf
1 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/lib/components/trail/map_with_elevation_maplibre.svelte
View File

@@ -59,6 +59,19 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const trailColors = [
"#3549BB",
"#592E9E",
"#47A2CD",
"#62D5BC",
"#7DDE95",
"#759E2E",
"#BBA535",
"#CD6F47",
"#D5627B",
"#DE7DC5",
];
$: data = getData(trails); $: data = getData(trails);
$: if (data && map) { $: if (data && map) {
@@ -155,7 +168,7 @@
trails.forEach((t, i) => { trails.forEach((t, i) => {
const layerId = t.id ?? i.toString(); const layerId = t.id ?? i.toString();
addTrailLayer(t, layerId, data[i]); addTrailLayer(t, layerId, i, data[i]);
}); });
Object.keys(layers).forEach((layerId) => { Object.keys(layers).forEach((layerId) => {
@@ -257,6 +270,7 @@
function addTrailLayer( function addTrailLayer(
trail: Trail, trail: Trail,
id: string, id: string,
index: number,
geojson: GeoJSON | null | undefined, geojson: GeoJSON | null | undefined,
) { ) {
if (!geojson || !map) { if (!geojson || !map) {
@@ -290,7 +304,7 @@
source: id, source: id,
minzoom: minZoom, minzoom: minZoom,
paint: { paint: {
"line-color": "#648ad5", "line-color": trailColors[index % trailColors.length],
"line-width": 5, "line-width": 5,
}, },
}); });
@@ -326,12 +340,12 @@
export function highlightTrail(id: string) { export function highlightTrail(id: string) {
map?.setPaintProperty(id, "line-width", 7); map?.setPaintProperty(id, "line-width", 7);
map?.setPaintProperty(id, "line-color", "#2766e3"); // map?.setPaintProperty(id, "line-color", "#2766e3");
} }
export function unHighlightTrail(id: string) { export function unHighlightTrail(id: string) {
map?.setPaintProperty(id, "line-width", 5); map?.setPaintProperty(id, "line-width", 5);
map?.setPaintProperty(id, "line-color", "#648ad5"); // map?.setPaintProperty(id, "line-color", "#648ad5");
} }
export function focusTrail(trail: Trail, e?: M.MapMouseEvent) { export function focusTrail(trail: Trail, e?: M.MapMouseEvent) {
@@ -436,7 +450,7 @@
return; return;
} }
for (const m of markers) { for (const m of markers) {
m.remove() m.remove();
} }
} }
@@ -454,7 +468,7 @@
const mapStyles: { text: string; value: string; thumbnail?: string }[] = const mapStyles: { text: string; value: string; thumbnail?: string }[] =
[ [
...(($page.data.settings as Settings).tilesets ?? []).map( ...(($page.data.settings as Settings)?.tilesets ?? []).map(
(t) => ({ (t) => ({
text: t.name, text: t.name,
value: t.url, value: t.url,
@@ -586,10 +600,14 @@
map.on("styledata", () => { map.on("styledata", () => {
trails.forEach((t, i) => { trails.forEach((t, i) => {
addTrailLayer(t, t.id ?? i.toString(), data?.at(i)); addTrailLayer(t, t.id ?? i.toString(), i, data?.at(i));
}); });
if (showTerrain && $page.data.settings?.terrain && !map?.getSource("terrain")) { if (
showTerrain &&
$page.data.settings?.terrain &&
!map?.getSource("terrain")
) {
map!.addSource("terrain", { map!.addSource("terrain", {
type: "raster-dem", type: "raster-dem",
url: $page.data.settings.terrain, url: $page.data.settings.terrain,