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

adds layer manager

Browse Source
This commit is contained in:
Christian Beutel
2025-07-13 22:22:08 +02:00
parent baa7bb4ecf
commit eac9b2e489
23 changed files with 631 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/base/radio_group.svelte
View File

@@ -1,7 +1,7 @@
<script module lang="ts">
export type RadioItem = {
text: string;
value: string;
value: any;
icon?: string;
description?: string;
};

67
web/src/lib/components/map/style_switcher.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import type { StyleSwitcherControlOptions } from "$lib/vendor/maplibre-style-switcher/style-switcher-control";
import RadioGroup from "../base/radio_group.svelte";
import { _ } from "svelte-i18n";
import RadioGroup, { type RadioItem } from "../base/radio_group.svelte";
interface Props {
settings: StyleSwitcherControlOptions;
@@ -9,9 +9,20 @@
let { settings }: Props = $props();
let mapState = $state(settings.state);
let container: HTMLDivElement;
const mapStyles = $derived(settings.styles);
let styleItems: RadioItem[] = $derived(
Object.entries(settings.styles).map<RadioItem>(([name, style]) => ({
text: name,
value: style,
})),
);
let selectedStyle: number = $derived(
styleItems.findIndex((i) => i.text === mapState.base),
);
let showSwitcher: boolean = $state(false);
@@ -37,13 +48,13 @@
</button>
<div
class="absolute bg-menu-background rounded-lg px-4 py-2 mt-2 shadow-xl space-y-3"
class="absolute bg-menu-background rounded-lg px-4 py-2 mt-2 shadow-xl space-y-3 max-h-96 overflow-y-scroll"
class:hidden={!showSwitcher}
style="transform: translateX(calc(-100% + 29px))"
>
<div class="flex items-center gap-x-12">
<span class="font-semibold whitespace-nowrap text-base"
>Map style</span
>{$_("map-style")}</span
>
<button
class="fa fa-close !rounded-full"
@@ -53,29 +64,55 @@
</div>
<RadioGroup
name="completed"
items={mapStyles}
bind:selected={settings.state.selectedStyle}
onchange={(style) => settings.onMapStyleSwitch(settings.styles.indexOf(style), style)}
items={styleItems}
selected={selectedStyle}
onchange={(style) => {
mapState.base = style.text;
settings.onchange(mapState);
}}
></RadioGroup>
<hr class="border-input-border" />
<span class="font-semibold whitespace-nowrap text-base">Layers</span>
{#each settings.layers as l, i}
<span class="font-semibold whitespace-nowrap text-base"
>{$_("layer", { values: { n: 2 } })}</span
>
{#each Object.keys(settings.state.overlays) as overlay}
<div class="flex items-center mt-2 mb-4">
<input
id="{l.text}-layer-checkbox"
id="{overlay}-layer-checkbox"
type="checkbox"
checked={settings.state.selectedLayers[l.text]}
bind:checked={mapState.overlays[overlay]}
class="w-4 h-4 bg-input-background accent-primary border-input-border focus:ring-input-ring focus:ring-2"
onchange={(e) => {
const checked = (e.target as HTMLInputElement).checked;
settings.onLayerChange(checked, l);
settings.onchange(mapState);
}}
/>
<label for="{l.text}-layer-checkbox" class="ms-2 text-sm"
>{$_(l.text)}</label
<label for="{overlay}-layer-checkbox" class="ms-2 text-sm"
>{$_(overlay)}</label
>
</div>
{/each}
<hr class="border-input-border" />
<p class="font-semibold whitespace-nowrap text-base">{$_("pois")}</p>
{#each Object.entries(settings.state.pois) as [category, pois]}
<p class="text-sm font-medium whitespace-nowrap">{$_(category)}</p>
{#each Object.keys(pois) as poi}
<div class="flex items-center mt-2 mb-4">
<input
id="{poi}-poi-checkbox"
type="checkbox"
bind:checked={mapState.pois[category][poi]}
class="w-4 h-4 bg-input-background accent-primary border-input-border focus:ring-input-ring focus:ring-2"
onchange={(e) => {
settings.onchange(mapState);
}}
/>
<label for="{poi}-layer-checkbox" class="ms-2 text-sm"
>{$_(poi)}</label
>
</div>
{/each}
{/each}
</div>
</div>

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

@@ -1,7 +1,6 @@
<script lang="ts">
import { page } from "$app/state";
import directionCaret from "$lib/assets/svgs/caret-right-solid.svg";
import type { Settings } from "$lib/models/settings";
import type { Trail } from "$lib/models/trail";
import type { Waypoint } from "$lib/models/waypoint";
import { theme } from "$lib/stores/theme_store";
@@ -9,15 +8,19 @@
import { findStartAndEndPoints } from "$lib/util/geojson_util";
import { toGeoJson } from "$lib/util/gpx_util";
import {
baseMapStyles,
createMarkerFromWaypoint,
createPopupFromTrail,
FontawesomeMarker,
overlayLayers,
} from "$lib/util/maplibre_util";
import type { ElevationProfileControl } from "$lib/vendor/maplibre-elevation-profile/elevationprofile-control";
import { FullscreenControl } from "$lib/vendor/maplibre-fullscreen/fullscreen-control";
import MaplibreGraticule from "$lib/vendor/maplibre-graticule/maplibre-graticule";
import {
baseMapStyles,
overlays,
pois,
} from "$lib/vendor/maplibre-layer-manager/layers";
import { LayerManager } from "$lib/vendor/maplibre-layer-manager/maplibre-layer-manager";
import {
StyleSwitcherControl,
type StyleSwitcherControlOptions,
@@ -98,7 +101,7 @@
let epc: ElevationProfileControl;
let graticule: MaplibreGraticule;
let mapState: StyleSwitcherControlOptions["state"];
let layerManager: LayerManager;
let layers: Record<
string,
@@ -245,16 +248,6 @@
}
});
if (mapLoaded) {
for (const [k, v] of Object.entries(mapState.selectedLayers)) {
if (v) {
const layer = overlayLayers.find((l) => l.text === k);
if (!layer) continue;
addOverlayLayer(layer);
}
}
}
if (
!drawing &&
fitBounds !== "off" &&
@@ -874,30 +867,17 @@
)
).ElevationProfileControl;
const mapStyles: { text: string; value: string; thumbnail?: string }[] =
[
...((page.data.settings as Settings)?.tilesets ?? []).map(
(t) => ({
text: t.name,
value: t.url,
}),
),
...baseMapStyles,
];
mapState = JSON.parse(
localStorage.getItem("map-state") ??
'{"selectedLayers": {}, "selectedStyle": 0}',
);
if (!mapContainer) {
return;
}
for (const tileset of page.data.settings?.tilesets ?? []) {
baseMapStyles[tileset.name] = tileset.url;
}
const finalMapOptions: M.MapOptions = {
...{
container: mapContainer,
style: mapStyles[mapState.selectedStyle].value,
center: [initialState.lng, initialState.lat],
zoom: initialState.zoom,
},
@@ -905,6 +885,8 @@
};
map = new M.Map(finalMapOptions);
layerManager = new LayerManager(map);
elevationMarker = new FontawesomeMarker(
{
id: "elevation-marker",
@@ -924,25 +906,11 @@
img.src = directionCaret;
const switcherControl = new StyleSwitcherControl({
styles: mapStyles,
layers: overlayLayers,
onMapStyleSwitch: (i, style) => {
layers = {};
map?.setStyle(style.value);
mapState.selectedStyle = i;
localStorage.setItem("map-state", JSON.stringify(mapState));
styles: baseMapStyles,
onchange: (state) => {
layerManager.update(JSON.parse(JSON.stringify(state)));
},
onLayerChange: (checked, layer) => {
mapState.selectedLayers[layer.text] = checked;
localStorage.setItem("map-state", JSON.stringify(mapState));
if (checked) {
addOverlayLayer(layer);
} else {
removeOverlayLayer(layer);
}
},
state: mapState,
state: JSON.parse(JSON.stringify(layerManager.state)),
});
map.addControl(
@@ -1128,6 +1096,7 @@
map.on("load", () => {
initMap(true);
layerManager.init();
oninit?.(map!);
});
@@ -1181,26 +1150,6 @@
}
}
}
function addOverlayLayer(layer: RadioItem) {
map?.addSource(layer.text + "overlay-source", {
type: "raster",
tiles: [layer.value],
tileSize: 256,
});
map?.addLayer({
id: layer.text + "overlay-layer",
type: "raster",
source: layer.text + "overlay-source",
minzoom: 4,
});
}
function removeOverlayLayer(layer: RadioItem) {
map?.removeLayer(layer.text + "overlay-layer");
map?.removeSource(layer.text + "overlay-source");
}
</script>
<svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup} />