adds terrain to map

web/src/routes/+layout.server.ts

@@ -2,6 +2,7 @@
 import '$lib/i18n';
 import type { LayoutServerLoad } from './$types';
 import { env } from "$env/dynamic/private";
+import type { Settings } from '$lib/models/settings';
 
 export const load: LayoutServerLoad = async ({ locals, url }) => {	
 	return { settings: locals.settings, origin: env.ORIGIN }

web/src/routes/lists/+page.svelte

@@ -27,7 +27,7 @@
 
     let map: M.Map;
     let mapWithElevation: MapWithElevationMaplibre;
-    let markers: any[];
+    let markers: M.Marker[];
     let showMap: boolean = true;
 
     let selectedList: List | null = null;

web/src/routes/map/trail/[id]/+page.svelte

@@ -15,7 +15,7 @@
 <main class="grid grid-cols-1 md:grid-cols-[458px_1fr] gap-x-1 gap-y-4">
     <TrailInfoPanel trail={$trail} {markers}></TrailInfoPanel>
     <div id="trail-details" class="sticky top-[62px]">
-        <MapWithElevationMaplibre trails={[$trail]} bind:markers></MapWithElevationMaplibre>
+        <MapWithElevationMaplibre trails={[$trail]} bind:markers showTerrain={true}></MapWithElevationMaplibre>
     </div>
 </main>
 

web/src/routes/settings/display/+page.svelte

@@ -49,11 +49,14 @@
 
     let customTilesetName: string = "";
     let customTilesetURL: string = "";
+    let terrainURL: string = "";
 
     onMount(() => {
         citySearchQuery = settings?.location?.name ?? "";
         selectedLanguage = settings?.language || "en";
         selectedMapFocus = settings?.mapFocus ?? "trails";
+
+        terrainURL = settings?.terrain ?? "";
     });
 
     async function searchCities(q: string) {
@@ -127,6 +130,13 @@
             tilesets: settings.tilesets,
         });
     }
+
+    async function handleTerrainAdd() {
+        await settings_update({
+            id: settings!.id,
+            terrain: terrainURL,
+        });
+    }
 </script>
 
 <svelte:head>
@@ -189,14 +199,14 @@
                     <TextField
                         label={$_("name")}
                         bind:value={customTilesetName}
-                        placeholder="Open Street Maps"
+                        placeholder={$_("name")}
                     ></TextField>
                     <div class="flex items-center basis-full gap-2">
                         <div class="flex-grow">
                             <TextField
                                 label="URL"
                                 bind:value={customTilesetURL}
-                                placeholder="https://{'{'}s{'}'}.tile.openstreetmap.org/{'{'}z{'}'}/{'{'}x{'}'}/{'{'}y{'}'}.png"
+                                placeholder="https://.../style.json"
                             ></TextField>
                         </div>
                         <button
@@ -206,6 +216,24 @@
                         >
                     </div>
                 </div>
+                <h3 class="text-2xl font-semibold">{$_("Terrain")}</h3>
+                <div class="flex items-center gap-2">
+                    <div class="basis-full">
+                        <TextField
+                            label="Terrain URL"
+                            bind:value={terrainURL}
+                            placeholder="https://.../tiles.json"
+                        ></TextField>
+                    </div>
+                    <button
+                        disabled={terrainURL == settings?.terrain}
+                        class="btn-icon mt-6"
+                        class:hover:!bg-background={terrainURL == settings?.terrain}
+                        on:click={handleTerrainAdd}
+                        class:text-gray-500={terrainURL == settings?.terrain}
+                        ><i class="fa fa-save"></i></button
+                    >
+                </div>
             </div>
         </Settings>
     {/if}