improve filtering to always show layers in the same order

website/src/lib/components/map/layer-control/utils.ts

@@ -1,5 +1,4 @@
 import type { LayerTreeType } from '$lib/assets/layers';
-import { writable } from 'svelte/store';
 
 export function anySelectedLayer(node: LayerTreeType) {
     return (

website/src/lib/logic/settings.ts

@@ -10,8 +10,7 @@ import {
     defaultOverpassQueries,
     defaultOverpassTree,
     defaultTerrainSource,
-    overlays,
-    overpassQueryData,
+    overpassTree,
     type CustomLayer,
     type LayerTreeType,
 } from '$lib/assets/layers';
@@ -161,23 +160,42 @@ function getLayerValidator(allowed: Record<string, any>, fallback: string) {
             : fallback;
 }
 
-function filterLayerTree(t: LayerTreeType, allowed: Record<string, any>): LayerTreeType {
+function filterLayerTree(t: LayerTreeType, allowed: LayerTreeType | undefined): LayerTreeType {
     const filtered: LayerTreeType = {};
+    const values = Object.values(t);
+    if (values.length == 0) return filtered;
+    if (typeof values[0] === 'boolean') {
+        if (allowed) {
+            Object.keys(allowed).forEach((key) => {
+                if (Object.hasOwn(t, key)) {
+                    filtered[key] = t[key];
+                }
+            });
+        }
         Object.entries(t).forEach(([key, value]) => {
-        if (typeof value === 'object') {
-            filtered[key] = filterLayerTree(value, allowed);
-        } else if (
-            allowed.hasOwnProperty(key) ||
-            key.startsWith('custom-') ||
-            key.startsWith('extension-')
+            if (
+                !Object.hasOwn(filtered, key) &&
+                (key.startsWith('custom-') || key.startsWith('extension-'))
             ) {
                 filtered[key] = value;
             }
         });
+    } else {
+        Object.entries(t).forEach(([key, value]) => {
+            if (typeof value === 'object') {
+                filtered[key] = filterLayerTree(
+                    value,
+                    typeof allowed === 'object' && typeof allowed[key] === 'object'
+                        ? allowed[key]
+                        : undefined
+                );
+            }
+        });
+    }
     return filtered;
 }
 
-function getLayerTreeValidator(allowed: Record<string, any>) {
+function getLayerTreeValidator(allowed: LayerTreeType) {
     return (value: LayerTreeType) => filterLayerTree(value, allowed);
 }
 
@@ -259,32 +277,32 @@ export const settings = {
     selectedBasemapTree: new Setting(
         'selectedBasemapTree',
         defaultBasemapTree,
-        getLayerTreeValidator(basemaps)
+        getLayerTreeValidator(defaultBasemapTree)
     ),
     currentOverlays: new SettingInitOnFirstRead(
         'currentOverlays',
         defaultOverlays,
-        getLayerTreeValidator(overlays)
+        getLayerTreeValidator(defaultOverlayTree)
     ),
     previousOverlays: new Setting(
         'previousOverlays',
         defaultOverlays,
-        getLayerTreeValidator(overlays)
+        getLayerTreeValidator(defaultOverlayTree)
     ),
     selectedOverlayTree: new Setting(
         'selectedOverlayTree',
         defaultOverlayTree,
-        getLayerTreeValidator(overlays)
+        getLayerTreeValidator(defaultOverlayTree)
     ),
     currentOverpassQueries: new SettingInitOnFirstRead(
         'currentOverpassQueries',
         defaultOverpassQueries,
-        getLayerTreeValidator(overpassQueryData)
+        getLayerTreeValidator(overpassTree)
     ),
     selectedOverpassTree: new Setting(
         'selectedOverpassTree',
         defaultOverpassTree,
-        getLayerTreeValidator(overpassQueryData)
+        getLayerTreeValidator(overpassTree)
     ),
     opacities: new Setting('opacities', defaultOpacities),
     customLayers: new Setting<Record<string, CustomLayer>>('customLayers', {}),

website/src/routes/[[language]]/help/+layout.svelte

@@ -20,7 +20,7 @@
 
 <div class="grow flex flex-col items-center p-12">
     <div class="max-w-5xl flex flex-row gap-24">
-        <div class="hidden md:flex flex-col gap-2 w-40 sticky top-26 self-start shrink-0">
+        <div class="hidden md:flex flex-col gap-2 w-40 sticky top-[101px] self-start shrink-0">
             <div class="mb-2">
                 <AlgoliaDocSearch />
             </div>