adds layer manager

2025-07-13 22:22:08 +02:00
parent baa7bb4ecf
commit eac9b2e489
23 changed files with 631 additions and 133 deletions
--- a/web/src/lib/assets/svgs/pois/bakery.svg
+++ b/web/src/lib/assets/svgs/pois/bakery.svg
@@ -0,0 +1,3 @@
+<path
+fill="white"
+        d="M257.5 27.6c-.8-5.4-4.9-9.8-10.3-10.6c-22.1-3.1-44.6 .9-64.4 11.4l-74 39.5C89.1 78.4 73.2 94.9 63.4 115L26.7 190.6c-9.8 20.1-13 42.9-9.1 64.9l14.5 82.8c3.9 22.1 14.6 42.3 30.7 57.9l60.3 58.4c16.1 15.6 36.6 25.6 58.7 28.7l83 11.7c22.1 3.1 44.6-.9 64.4-11.4l74-39.5c19.7-10.5 35.6-27 45.4-47.2l36.7-75.5c9.8-20.1 13-42.9 9.1-64.9c-.9-5.3-5.3-9.3-10.6-10.1c-51.5-8.2-92.8-47.1-104.5-97.4c-1.8-7.6-8-13.4-15.7-14.6c-54.6-8.7-97.7-52-106.2-106.8zM208 144a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM144 336a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm224-64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
--- a/web/src/lib/components/base/radio_group.svelte
+++ b/web/src/lib/components/base/radio_group.svelte
@@ -1,7 +1,7 @@
 <script module lang="ts">
    export type RadioItem = {
        text: string;
-        value: string;
+        value: any;
        icon?: string;
        description?: string;
    };
--- a/web/src/lib/components/map/style_switcher.svelte
+++ b/web/src/lib/components/map/style_switcher.svelte
@@ -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>
--- a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte
+++ b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte
@@ -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} />
--- a/web/src/lib/i18n/locales/de.json
+++ b/web/src/lib/i18n/locales/de.json
@@ -190,6 +190,7 @@
  "joined": "Beigetreten",
  "language": "Sprache",
  "latitude": "Breitengrad",
+  "layer": "{n, plural, =1 {Ebene} other {Ebenen}}",
  "license": "Lizenz",
  "like-status": "\"Gefällt mir\" Status",
  "liked": "Gefällt mir",
@@ -210,6 +211,7 @@
  "make-one": "Neues erstellen!",
  "make-thumbnail": "Thumbnail festlegen",
  "map": "Karte",
+  "map-style": "Map style",
  "max-hiking-difficulty": "Max. Schwierigkeit der Wanderung",
  "metric": "Metrisch",
  "moderate": "Mittel",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Route auswählen",
  "planned-a-trail": "hat eine Route geplant",
  "planned-tours": "Geplante Touren",
+  "pois": "Interessante Orte",
  "polish": "Polnisch",
  "portuguese": "Portugiesisch",
  "print": "Drucken",
--- a/web/src/lib/i18n/locales/en.json
+++ b/web/src/lib/i18n/locales/en.json
@@ -190,6 +190,7 @@
  "joined": "Joined",
  "language": "Language",
  "latitude": "Latitude",
+  "layer": "{n, plural, =1 {Layer} other {Layers}}",
  "license": "License",
  "like-status": "Like Status",
  "liked": "Liked",
@@ -210,6 +211,7 @@
  "make-one": "Make one!",
  "make-thumbnail": "Make thumbnail",
  "map": "Map",
+  "map-style": "Map style",
  "max-hiking-difficulty": "Max. Hiking Difficulty",
  "metric": "Metric",
  "moderate": "Moderate",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Pick a trail",
  "planned-a-trail": "planned a trail",
  "planned-tours": "Planned tours",
+  "pois": "POIs",
  "polish": "Polish",
  "portuguese": "Portuguese",
  "print": "Print",
--- a/web/src/lib/i18n/locales/es.json
+++ b/web/src/lib/i18n/locales/es.json
@@ -190,6 +190,7 @@
  "joined": "Afiliado",
  "language": "Idioma",
  "latitude": "Latitud",
+  "layer": "",
  "license": "Licencia",
  "like-status": "Like Status",
  "liked": "Liked",
@@ -210,6 +211,7 @@
  "make-one": "¡Crea uno!",
  "make-thumbnail": "Generar miniaturas",
  "map": "Mapa",
+  "map-style": "",
  "max-hiking-difficulty": "Max. Hiking Difficulty",
  "metric": "Métrica",
  "moderate": "Medio",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Escoge una ruta",
  "planned-a-trail": "planificada una ruta",
  "planned-tours": "Planned tours",
+  "pois": "",
  "polish": "Polaco",
  "portuguese": "Portugués",
  "print": "Imprimir",
--- a/web/src/lib/i18n/locales/eu.json
+++ b/web/src/lib/i18n/locales/eu.json
@@ -190,6 +190,7 @@
  "joined": "Joined",
  "language": "Language",
  "latitude": "Latitude",
+  "layer": "",
  "license": "License",
  "like-status": "Like Status",
  "liked": "Liked",
@@ -210,6 +211,7 @@
  "make-one": "Make one!",
  "make-thumbnail": "Make thumbnail",
  "map": "Map",
+  "map-style": "",
  "max-hiking-difficulty": "Max. Hiking Difficulty",
  "metric": "Metric",
  "moderate": "Moderate",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Pick a trail",
  "planned-a-trail": "planned a trail",
  "planned-tours": "Planned tours",
+  "pois": "",
  "polish": "Polish",
  "portuguese": "Portuguese",
  "print": "Print",
--- a/web/src/lib/i18n/locales/fr.json
+++ b/web/src/lib/i18n/locales/fr.json
@@ -190,6 +190,7 @@
  "joined": "Rejoint",
  "language": "Langue",
  "latitude": "Latitude",
+  "layer": "",
  "license": "Licence",
  "like-status": "Like Status",
  "liked": "Aimé",
@@ -210,6 +211,7 @@
  "make-one": "Faites-en un !",
  "make-thumbnail": "Créer une miniature",
  "map": "Carte",
+  "map-style": "",
  "max-hiking-difficulty": "Max. Hiking Difficulty",
  "metric": "Métrique",
  "moderate": "Moyenne",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Choisir un itinéraire",
  "planned-a-trail": "a plannifié un itinéraire",
  "planned-tours": "Tournées planifiées",
+  "pois": "",
  "polish": "polonais",
  "portuguese": "Portugais",
  "print": "Imprimer",
--- a/web/src/lib/i18n/locales/hu.json
+++ b/web/src/lib/i18n/locales/hu.json
@@ -190,6 +190,7 @@
  "joined": "Joined",
  "language": "Nyelf",
  "latitude": "Szélesség",
+  "layer": "",
  "license": "License",
  "like-status": "Like Status",
  "liked": "Liked",
@@ -210,6 +211,7 @@
  "make-one": "Készítsen egyet!",
  "make-thumbnail": "Készítsen miniatűrképet",
  "map": "Térkép",
+  "map-style": "",
  "max-hiking-difficulty": "Max. Hiking Difficulty",
  "metric": "Metrikus",
  "moderate": "Mérsékelt",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Válasszon útvonalat",
  "planned-a-trail": "planned a trail",
  "planned-tours": "Planned tours",
+  "pois": "",
  "polish": "Lengyel",
  "portuguese": "Portugál",
  "print": "Print",
--- a/web/src/lib/i18n/locales/it.json
+++ b/web/src/lib/i18n/locales/it.json
@@ -190,6 +190,7 @@
  "joined": "Aggiunto",
  "language": "Lingua",
  "latitude": "Latitudine",
+  "layer": "",
  "license": "Licenza",
  "like-status": "Like Status",
  "liked": "Liked",
@@ -210,6 +211,7 @@
  "make-one": "Creane uno!",
  "make-thumbnail": "Imposta miniatura",
  "map": "Mappa",
+  "map-style": "",
  "max-hiking-difficulty": "Max. Hiking Difficulty",
  "metric": "Metrico",
  "moderate": "Moderato",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Scegli un percorso",
  "planned-a-trail": "percorso pianificato",
  "planned-tours": "Planned tours",
+  "pois": "",
  "polish": "Polacco",
  "portuguese": "Portoghese",
  "print": "Stampa",
--- a/web/src/lib/i18n/locales/nl.json
+++ b/web/src/lib/i18n/locales/nl.json
@@ -190,6 +190,7 @@
  "joined": "Aangesloten",
  "language": "Taal",
  "latitude": "Breedtegraad",
+  "layer": "",
  "license": "Licentie",
  "like-status": "",
  "liked": "Leuk gevonden",
@@ -210,6 +211,7 @@
  "make-one": "Maak er een aan!",
  "make-thumbnail": "Miniatuur maken",
  "map": "Kaart",
+  "map-style": "",
  "max-hiking-difficulty": "Max. Hiking Moeilijkheid",
  "metric": "Metrisch",
  "moderate": "Gemiddeld",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Kies een Route",
  "planned-a-trail": "een route gepland",
  "planned-tours": "Geplande tochten",
+  "pois": "",
  "polish": "Pools",
  "portuguese": "Portugees",
  "print": "Afdrukken",
--- a/web/src/lib/i18n/locales/pl.json
+++ b/web/src/lib/i18n/locales/pl.json
@@ -190,6 +190,7 @@
  "joined": "Dołączono",
  "language": "Język",
  "latitude": "Szerokość",
+  "layer": "",
  "license": "Licencja",
  "like-status": "Status polubień",
  "liked": "Polubiony",
@@ -210,6 +211,7 @@
  "make-one": "Stwórz ją!",
  "make-thumbnail": "Zrób miniaturkę",
  "map": "Mapa",
+  "map-style": "",
  "max-hiking-difficulty": "Maksymalny poziom trudności wędrówki",
  "metric": "Metryczne",
  "moderate": "Średni",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Wybierz szlak",
  "planned-a-trail": "zaplanowano szlak",
  "planned-tours": "Planowane trasy",
+  "pois": "",
  "polish": "Polski",
  "portuguese": "Portugalski",
  "print": "Drukuj",
--- a/web/src/lib/i18n/locales/pt.json
+++ b/web/src/lib/i18n/locales/pt.json
@@ -190,6 +190,7 @@
  "joined": "Joined",
  "language": "Língua",
  "latitude": "Latitude",
+  "layer": "",
  "license": "Licença",
  "like-status": "Like Status",
  "liked": "Liked",
@@ -210,6 +211,7 @@
  "make-one": "Faz um!",
  "make-thumbnail": "Faça miniatura",
  "map": "Mapa",
+  "map-style": "",
  "max-hiking-difficulty": "Max. Hiking Difficulty",
  "metric": "Métrica",
  "moderate": "Moderado",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Escolha uma trilha",
  "planned-a-trail": "planned a trail",
  "planned-tours": "Planned tours",
+  "pois": "",
  "polish": "Polonês",
  "portuguese": "Português",
  "print": "Imprimir",
--- a/web/src/lib/i18n/locales/ru.json
+++ b/web/src/lib/i18n/locales/ru.json
@@ -190,6 +190,7 @@
  "joined": "Зарегистрирован",
  "language": "Язык",
  "latitude": "Широта",
+  "layer": "",
  "license": "Лицензия",
  "like-status": "Статус лайка",
  "liked": "Лайкнуто",
@@ -210,6 +211,7 @@
  "make-one": "Создайте!",
  "make-thumbnail": "Сделать миниатюру",
  "map": "Карта",
+  "map-style": "",
  "max-hiking-difficulty": "Макс. сложность",
  "metric": "Метрическая",
  "moderate": "Средний",
@@ -278,6 +280,7 @@
  "pick-a-trail": "Выберите трек",
  "planned-a-trail": "запланировал(а) трек",
  "planned-tours": "Запланированные маршруты",
+  "pois": "",
  "polish": "Польский",
  "portuguese": "Португальский",
  "print": "Печать",
--- a/web/src/lib/i18n/locales/zh.json
+++ b/web/src/lib/i18n/locales/zh.json
@@ -190,6 +190,7 @@
  "joined": "Joined",
  "language": "语言",
  "latitude": "维度",
+  "layer": "",
  "license": "开源协议",
  "like-status": "Like Status",
  "liked": "Liked",
@@ -210,6 +211,7 @@
  "make-one": "立刻注册！",
  "make-thumbnail": "生成缩略图",
  "map": "地图",
+  "map-style": "",
  "max-hiking-difficulty": "Max. Hiking Difficulty",
  "metric": "公制",
  "moderate": "中等",
@@ -278,6 +280,7 @@
  "pick-a-trail": "选择一个路线",
  "planned-a-trail": "planned a trail",
  "planned-tours": "Planned tours",
+  "pois": "",
  "polish": "波兰语",
  "portuguese": "葡萄牙语",
  "print": "打印",
--- a/web/src/lib/util/maplibre_util.ts
+++ b/web/src/lib/util/maplibre_util.ts
@@ -11,43 +11,6 @@ import { handleFromRecordWithIRI } from "./activitypub_util";
 import { getFileURL } from "./file_util";
 import { formatDistance, formatElevation, formatTimeHHMM } from "./format_util";
 import { icons } from "./icon_util";
-import type { RadioItem } from "$lib/components/base/radio_group.svelte";
-
-
-export const baseMapStyles: RadioItem[] = [
-    {
-        text: "OpenFreeMap",
-        value: "/styles/ofm.json",
-    },
-    {
-        text: "OpenTopoMap",
-        value: "/styles/otm.json",
-    },
-    {
-        text: "Carto Light",
-        value: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
-    },
-    {
-        text: "Carto Dark",
-        value: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
-    },
-]
-
-export const overlayLayers: RadioItem[] = [
-    {
-        text: "hiking",
-        value: "https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png",
-    },
-    {
-        text: "cycling",
-        value: "https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png",
-    },
-    {
-        text: "MTB",
-        value: "https://tile.waymarkedtrails.org/mtb/{z}/{x}/{y}.png",
-    },
-]
-

 export class FontawesomeMarker extends M.Marker {
    constructor(options: { icon: string, fontSize?: string, width?: number, backgroundColor?: string, fontColor?: string, id?: string }, markerOptions?: M.MarkerOptions) {
--- a/web/src/lib/vendor/maplibre-layer-manager/layers.ts
+++ b/web/src/lib/vendor/maplibre-layer-manager/layers.ts
@@ -0,0 +1,249 @@
+import Bakery from "$lib/assets/svgs/pois/bakery.svg?raw"
+import type { MapMouseEvent, Marker, StyleSpecification } from "maplibre-gl"
+
+export interface BaseLayer {
+    markers?: Record<string, Marker>,
+    spec: StyleSpecification,
+    listener?: {
+        onMouseUp?: (e: MapMouseEvent) => void,
+        onMouseDown?: (e: MapMouseEvent) => void,
+        onEnter?: (e: MapMouseEvent) => void,
+        onLeave?: (e: MapMouseEvent) => void,
+        onMouseMove?: (e: MapMouseEvent) => void,
+    }
+}
+
+export const baseMapStyles: Record<string, string | StyleSpecification> = {
+    "OpenFreeMap": "/styles/ofm.json",
+    "OpenTopoMap": {
+        version: 8,
+        sources: {
+            openTopoMap: {
+                type: 'raster',
+                tiles: ['https://tile.opentopomap.org/{z}/{x}/{y}.png'],
+                tileSize: 256,
+                maxzoom: 17,
+                attribution:
+                    '&copy; <a href="https://www.opentopomap.org" target="_blank">OpenTopoMap</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
+            },
+        },
+        layers: [
+            {
+                id: 'openTopoMap',
+                type: 'raster',
+                source: 'openTopoMap',
+            },
+        ],
+    },
+    "CyclOSM": {
+        version: 8,
+        sources: {
+            cyclOSM: {
+                type: 'raster',
+                tiles: [
+                    'https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
+                    'https://b.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
+                    'https://c.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
+                ],
+                tileSize: 256,
+                maxzoom: 18,
+                attribution:
+                    '&copy; <a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            },
+        },
+        layers: [
+            {
+                id: 'cyclOSM',
+                type: 'raster',
+                source: 'cyclOSM',
+            },
+        ],
+    },
+    "Carto Light": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+    "Carto Dark": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+}
+
+export const overlays: Record<string, StyleSpecification> = {
+    hiking: {
+        version: 8,
+        name: "waymarkedTrailsHiking",
+        sources: {
+            waymarkedTrailsHiking: {
+                type: 'raster',
+                tiles: ['https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png'],
+                tileSize: 256,
+                maxzoom: 18,
+                attribution:
+                    '&copy; <a href="https://www.waymarkedtrails.org" target="_blank">Waymarked Trails</a>',
+            },
+        },
+        layers: [
+            {
+                id: 'waymarkedTrailsHiking',
+                type: 'raster',
+                source: 'waymarkedTrailsHiking',
+            },
+        ],
+    },
+    cycling: {
+        version: 8,
+        name: "waymarkedTrailsCycling",
+
+        sources: {
+            waymarkedTrailsCycling: {
+                type: 'raster',
+                tiles: ['https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png'],
+                tileSize: 256,
+                maxzoom: 18,
+                attribution:
+                    '&copy; <a href="https://www.waymarkedtrails.org" target="_blank">Waymarked Trails</a>',
+            },
+        },
+        layers: [
+            {
+                id: 'waymarkedTrailsCycling',
+                type: 'raster',
+                source: 'waymarkedTrailsCycling',
+            },
+        ],
+    },
+    MTB: {
+        version: 8,
+        name: "waymarkedTrailsMTB",
+
+        sources: {
+            waymarkedTrailsMTB: {
+                type: 'raster',
+                tiles: ['https://tile.waymarkedtrails.org/mtb/{z}/{x}/{y}.png'],
+                tileSize: 256,
+                maxzoom: 18,
+                attribution:
+                    '&copy; <a href="https://www.waymarkedtrails.org" target="_blank">Waymarked Trails</a>',
+            },
+        },
+        layers: [
+            {
+                id: 'waymarkedTrailsMTB',
+                type: 'raster',
+                source: 'waymarkedTrailsMTB',
+            },
+        ],
+    },
+    Skiing: {
+        name: "waymarkedTrailsWinter",
+        version: 8,
+        sources: {
+            waymarkedTrailsWinter: {
+                type: 'raster',
+                tiles: ['https://tile.waymarkedtrails.org/slopes/{z}/{x}/{y}.png'],
+                tileSize: 256,
+                maxzoom: 18,
+                attribution:
+                    '&copy; <a href="https://www.waymarkedtrails.org" target="_blank">Waymarked Trails</a>',
+            },
+        },
+        layers: [
+            {
+                id: 'waymarkedTrailsWinter',
+                type: 'raster',
+                source: 'waymarkedTrailsWinter',
+            },
+        ],
+    }
+}
+
+export type POI = { q: string, icon: { svg: any, bg: string } }
+export const pois: Record<string, POI> = {
+    "grocery-store": { q: "nwr[shop=supermarket];nwr[shop=convenience];", icon: { svg: "", bg: "red" } },
+    "bakery": { q: "nwr[shop=bakery];", icon: { svg: Bakery, bg: "coral" } },
+    "food-drinks": { q: "nwr[amenity=restaurant];nwr[amenity=fast_food];nwr[amenity=cafe];nwr[amenity=pub];nwr[amenity=bar];", icon: { svg: "", bg: "red" } },
+    "toilet": { q: "nwr[amenity=toilets];", icon: { svg: "", bg: "red" } },
+    "drinking-water": { q: "nwr[amenity=drinking_water];nwr[amenity=water_point];nwr[natural=spring][drinking_water=yes];", icon: { svg: "", bg: "red" } },
+    "shower": { q: "nwr[amenity=shower];", icon: { svg: "", bg: "red" } },
+    "shelter": { q: "nwr[amenity=shelter];", icon: { svg: "", bg: "red" } },
+    "barrier": { q: "nwr[barrier=true];", icon: { svg: "", bg: "red" } },
+    "attraction": { q: "nwr[tourism=attraction];", icon: { svg: "", bg: "red" } },
+    "viewpoint": { q: "nwr[tourism=viewpoint];", icon: { svg: "", bg: "red" } },
+    "hotel": { q: "nwr[tourism=hotel];nwr[tourism=hostel];nwr[tourism=guest_house];nwr[tourism=motel];", icon: { svg: "", bg: "red" } },
+    "camp-site": { q: "nwr[tourism=camp_site];", icon: { svg: "", bg: "red" } },
+    "hut": { q: "nwr[tourism=alpine_hut];nwr[tourism=wilderness_hut];", icon: { svg: "", bg: "red" } },
+    "peak": { q: "nwr[natural=peak];", icon: { svg: "", bg: "red" } },
+    "mountain-pass": { q: "nwr[mountain_pass=yes];", icon: { svg: "", bg: "red" } },
+    "climbing": { q: "nwr[sport=climbing];", icon: { svg: "", bg: "red" } },
+    "bicylce-parking": { q: "nwr[amenity=bicycle_parking];", icon: { svg: "", bg: "red" } },
+    "bicycle-rental": { q: "nwr[amenity=bicycle_rental];", icon: { svg: "", bg: "red" } },
+    "bicycle-shop": { q: "nwr[shop=bicycle];", icon: { svg: "", bg: "red" } },
+    "gas-station": { q: "nwr[amenity=fuel];", icon: { svg: "", bg: "red" } },
+    "parking": { q: "nwr[amenity=parking];", icon: { svg: "", bg: "red" } },
+    "car-repair": { q: "nwr[shop=car_repair];", icon: { svg: "", bg: "red" } },
+    "motorcycle-repair": { q: "nwr[shop=motorcycle_repair];", icon: { svg: "", bg: "red" } },
+    "railway-station": { q: "nwr[railway=station];", icon: { svg: "", bg: "red" } },
+    "subway": { q: "nwr[railway=subway_entrance];", icon: { svg: "", bg: "red" } },
+    "tram": { q: "nwr[railway=tram_stop];", icon: { svg: "", bg: "red" } },
+    "bus": { q: "nwr[public_transport=stop_position][bus=yes];nwr[public_transport=platform][bus=yes];", icon: { svg: "", bg: "red" } },
+    "ferry": { q: "nwr[amenity=ferry_terminal];", icon: { svg: "", bg: "red" } },
+}
+
+
+
+export type MapState = {
+    base: keyof typeof baseMapStyles,
+    overlays: { [K in keyof typeof overlays]: boolean }
+    pois: Record<string, Record<string, boolean>>
+}
+
+export const defaultMapState: MapState = {
+    base: "OpenFreeMap",
+    overlays: {
+        waymarkedTrailsHiking: false,
+        waymarkedTrailsCycling: false,
+        waymarkedTrailsHorseRiding: false,
+        waymarkedTrailsMTB: false,
+        waymarkedTrailsSkating: false,
+        waymarkedTrailsWinter: false,
+    },
+    pois: {
+        food: {
+            "food-drinks": false,
+            "grocery-store": false,
+            bakery: false,
+        },
+        tourism: {
+            "camp-site": false,
+            attraction: false,
+            hotel: false,
+            hut: false,
+            viewpoint: false,
+        },
+        ammenity: {
+            "drinking-water": false,
+            barrier: false,
+            shelter: false,
+            shower: false,
+            toilet: false,
+        },
+        hiking: {
+            "mountain-pass": false,
+            climbing: false,
+            peak: false,
+        },
+        cycling: {
+            "bicycle-rental": false,
+            "bicycle-shop": false,
+            "bicylce-parking": false,
+        },
+        "car-motorcycle": {
+            "car-repair": false,
+            "gas-station": false,
+            "motorcycle-repair": false,
+            parking: false,
+        },
+        "public-transport": {
+            "railway-station": false,
+            bus: false,
+            ferry: false,
+            subway: false,
+            tram: false,
+        }
+    }
+}
--- a/web/src/lib/vendor/maplibre-layer-manager/maplibre-layer-manager.ts
+++ b/web/src/lib/vendor/maplibre-layer-manager/maplibre-layer-manager.ts
@@ -0,0 +1,144 @@
+import * as M from "maplibre-gl";
+import { baseMapStyles, defaultMapState, pois, type BaseLayer, type MapState } from "./layers";
+import { OverlayLayer } from "./overlay-layer";
+import { OverpassLayer } from "./overpass-layer";
+
+
+
+export class LayerManager {
+    private map: M.Map;
+    state!: MapState;
+    layers: Record<string, BaseLayer> = {};
+
+    constructor(map: M.Map) {
+        this.map = map;
+
+        const storedMapState = localStorage.getItem("map-state")
+        if (storedMapState) {
+            this.state = JSON.parse(storedMapState)
+        } else {
+            this.state = defaultMapState
+        }
+    }
+
+    init() {
+        this.map.on('moveend', () => { });
+
+        this.map.on('styledata', () => {
+            this.restoreLayers();
+        })
+        try {
+            this.update(this.state, true);
+
+            const overpassLayer = new OverpassLayer()
+            this.addLayer("overpass", overpassLayer)
+
+        } catch (e) {
+            console.error(e)
+            // map is probably not initialized yet
+        }
+    }
+
+    update(newState: MapState, initialize: boolean = false) {
+        const oldState = this.state;
+
+        if (oldState.base != newState.base || initialize) {
+            this.updateBaseLayer(baseMapStyles[newState.base])
+        }
+
+        for (const [name, active] of Object.entries(newState.overlays)) {
+            const oldOverlayActive = oldState.overlays[name]
+
+            if (active && (!oldOverlayActive || initialize)) {
+                this.addLayer(name, new OverlayLayer(name))
+            } else if (oldOverlayActive && !active) {
+                this.removeLayer(name)
+            }
+        }
+
+        const overpassLayer = this.layers.overpass;
+        if (overpassLayer) {
+            const castedOverpassLayer = overpassLayer as OverpassLayer
+            castedOverpassLayer.updateLayer(newState, this.map.getBounds()).then(() => {
+                this.loadIcons(castedOverpassLayer.pois);
+                (this.map.getSource('overpass') as M.GeoJSONSource).setData(castedOverpassLayer.data);
+            })
+        }
+
+        this.state = newState
+        localStorage.setItem("map-state", JSON.stringify(this.state));
+    }
+
+    private updateBaseLayer(layer: string | M.StyleSpecification) {
+        this.map.setStyle(layer);
+    }
+
+
+    private addLayer(id: string, layer: BaseLayer) {
+        for (const [id, s] of Object.entries(layer.spec.sources)) {
+            if (!this.map.getSource(id)) {
+                this.map.addSource(id, s)
+            }
+        }
+
+        for (const l of layer.spec.layers) {
+            if (!this.map.getLayer(l.id)) {
+                this.map.addLayer(l)
+            }
+        }
+
+        this.layers[id] = layer
+    }
+
+    private removeLayer(id: string) {
+        const layer = this.layers[id];
+        if (!layer) {
+            return;
+        }
+        for (const l of layer.spec.layers) {
+            if (this.map.getLayer(l.id)) {
+                this.map.removeLayer(l.id)
+            }
+        }
+
+        for (const [id, _] of Object.entries(layer.spec.sources)) {
+            if (this.map.getSource(id)) {
+                this.map.removeSource(id)
+            }
+        }
+        delete this.layers[id]
+
+    }
+
+    private restoreLayers() {
+        for (const [id, layer] of Object.entries(this.layers)) {
+            this.addLayer(id, layer)
+        }
+    }
+
+    private loadIcons(activePois: string[]) {
+        activePois.forEach((poi) => {
+            if (!this.map.hasImage(`overpass-${poi}`)) {
+                let icon = new Image(100, 100);
+                icon.onload = () => {
+                    if (!this.map.hasImage(`overpass-${poi}`)) {
+                        this.map.addImage(`overpass-${poi}`, icon);
+                    }
+                };
+
+                const svg = `
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+                    <circle cx="20" cy="20" r="20" fill="${pois[poi].icon.bg}" />
+                    <g transform="translate(8 8) scale(0.05)">
+                    ${pois[poi].icon.svg}
+                    </g>
+                </svg>
+                `
+                
+                icon.src =
+                    'data:image/svg+xml,' +
+                    encodeURIComponent(svg);
+            }
+        });
+    }
+}
--- a/web/src/lib/vendor/maplibre-layer-manager/overlay-layer.ts
+++ b/web/src/lib/vendor/maplibre-layer-manager/overlay-layer.ts
@@ -0,0 +1,10 @@
+import type { StyleSpecification } from "maplibre-gl";
+import { overlays, type BaseLayer } from "./layers";
+
+export class OverlayLayer implements BaseLayer {
+    spec: StyleSpecification;
+
+    constructor(name: string) {
+        this.spec = overlays[name]
+    }
+}
--- a/web/src/lib/vendor/maplibre-layer-manager/overpass-layer.ts
+++ b/web/src/lib/vendor/maplibre-layer-manager/overpass-layer.ts
@@ -0,0 +1,92 @@
+import type { LngLatBounds, StyleSpecification } from "maplibre-gl";
+import { pois, type BaseLayer, type MapState } from "./layers";
+import type { OverpassResponse } from "./types";
+
+export class OverpassLayer implements BaseLayer {
+    private overpassApiURL: string = "https://overpass.private.coffee/api/interpreter"
+
+    data: GeoJSON.FeatureCollection = ({ type: 'FeatureCollection', features: [] });
+    pois: string[] = [];
+
+    spec: StyleSpecification = {
+        version: 8,
+        name: "overpass",
+        sources: {
+            overpass: {
+                type: 'geojson',
+                data: this.data,
+            }
+        },
+        layers: [
+            {
+                id: 'overpass',
+                type: 'symbol',
+                source: 'overpass',
+                layout: {
+                    'icon-image': ['get', 'icon'],
+                    'icon-size': 0.25,
+                    'icon-padding': 0,
+                    'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
+                },
+            }
+        ],
+    };
+
+
+    async updateLayer(state: MapState, bounds: LngLatBounds) {
+        let activePOIs: string[] = []
+        for (const category of Object.keys(state.pois)) {
+            for (const [name, active] of Object.entries(state.pois[category])) {
+                if (active) {
+                    activePOIs.push(name)
+                }
+            }
+        }
+        const q = this.getOverpassQuery(activePOIs, bounds)
+        if (!q.length) {
+            return;
+        }
+        const r = await fetch(`${this.overpassApiURL}?data=${q}`)
+        const response: OverpassResponse = await r.json();
+
+        this.updateData(response)
+        this.pois = activePOIs
+    }
+
+    private updateData(data: OverpassResponse, ) {
+        let pois: GeoJSON.Feature[] = [];
+
+        if (data.elements === undefined) {
+            return;
+        }
+
+        for (let element of data.elements) {
+            console.log(element);
+            
+            pois.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'Point',
+                    coordinates: element.center
+                        ? [element.center.lon, element.center.lat]
+                        : [element.lon, element.lat],
+                },
+                properties: {
+                    id: element.id,
+                    lat: element.center ? element.center.lat : element.lat,
+                    lon: element.center ? element.center.lon : element.lon,
+                    icon: `overpass-bakery`,
+                    tags: element.tags,
+                    type: element.type,
+                },
+            });
+        }
+        this.data.features = pois;
+    }
+
+    private getOverpassQuery(data: string[], bounds: LngLatBounds) {
+        const q = data.map(p => pois[p].q).join('')
+        return `[bbox:${bounds.getSouth()},${bounds.getWest()},${bounds.getNorth()},${bounds.getEast()}][out:json];(${q});out center;`;
+    }
+
+}
--- a/web/src/lib/vendor/maplibre-layer-manager/types.ts
+++ b/web/src/lib/vendor/maplibre-layer-manager/types.ts
@@ -0,0 +1,21 @@
+export interface OverpassResponse {
+    elements: OverpassElement[];
+    generator: string;
+    osm3s: {
+        copyright: string;
+        timestamp_osm_base: string;
+    };
+    version: number;
+}
+export interface OverpassElement {
+    id: number;
+    center?: {
+        lat: number,
+        lon: number,
+    }
+    lat: number;
+    lon: number;
+    nodes?: number[];
+    tags?: Record<string, string>;
+    type: string;
+}
--- a/web/src/lib/vendor/maplibre-style-switcher/style-switcher-control.ts
+++ b/web/src/lib/vendor/maplibre-style-switcher/style-switcher-control.ts
@@ -1,21 +1,15 @@
-import type { RadioItem } from "$lib/components/base/radio_group.svelte";
 import StyleSwitcher from "$lib/components/map/style_switcher.svelte";
-import { type ControlPosition, type IControl } from "maplibre-gl";
+import { type ControlPosition, type IControl, type StyleSpecification } from "maplibre-gl";
 import { mount } from "svelte";
+import type { MapState, pois } from "../maplibre-layer-manager/layers";
 /**
 * Style switcher control options
 */

 export type StyleSwitcherControlOptions = {
-    styles: RadioItem[];
-    layers: RadioItem[];
-    onMapStyleSwitch: (index: number, style: RadioItem) => void
-    onLayerChange: (checked: boolean, layer: RadioItem) => void
-
-    state: {
-        selectedStyle: number;
-        selectedLayers: Record<string, boolean>
-    };
+    styles: Record<string, string | StyleSpecification>;
+    onchange: (state: MapState) => void
+    state: MapState;
 };

 export class StyleSwitcherControl implements IControl {