adds hillshading

db/migrations/1733353149_updated_settings.go

@@ -0,0 +1,75 @@
+package migrations
+
+import (
+	"encoding/json"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/models/schema"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("uavt73rsqcn1n13")
+		if err != nil {
+			return err
+		}
+
+		// remove
+		collection.Schema.RemoveField("mvxf9llv")
+
+		// add
+		new_terrain := &schema.SchemaField{}
+		if err := json.Unmarshal([]byte(`{
+			"system": false,
+			"id": "unsh0qsp",
+			"name": "terrain",
+			"type": "json",
+			"required": false,
+			"presentable": false,
+			"unique": false,
+			"options": {
+				"maxSize": 2000000
+			}
+		}`), new_terrain); err != nil {
+			return err
+		}
+		collection.Schema.AddField(new_terrain)
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("uavt73rsqcn1n13")
+		if err != nil {
+			return err
+		}
+
+		// add
+		del_terrain := &schema.SchemaField{}
+		if err := json.Unmarshal([]byte(`{
+			"system": false,
+			"id": "mvxf9llv",
+			"name": "terrain",
+			"type": "url",
+			"required": false,
+			"presentable": false,
+			"unique": false,
+			"options": {
+				"exceptDomains": [],
+				"onlyDomains": []
+			}
+		}`), del_terrain); err != nil {
+			return err
+		}
+		collection.Schema.AddField(del_terrain)
+
+		// remove
+		collection.Schema.RemoveField("unsh0qsp")
+
+		return dao.SaveCollection(collection)
+	})
+}

web/src/lib/components/trail/map_with_elevation_maplibre.svelte

@@ -656,16 +656,31 @@
                 addTrailLayer(t, t.id ?? i.toString(), i, data?.at(i));
             });
 
-            if (
+            if (showTerrain) {
-                showTerrain &&
-                $page.data.settings?.terrain &&
-                !map?.getSource("terrain")
-            ) {
                 try {
-                    map!.addSource("terrain", {
+                    if (
-                        type: "raster-dem",
+                        $page.data.settings?.terrain?.terrain &&
-                        url: $page.data.settings.terrain,
+                        !map?.getSource("terrain")
-                    });
+                    ) {
+                        map!.addSource("terrain", {
+                            type: "raster-dem",
+                            url: $page.data.settings?.terrain?.terrain,
+                        });
+                    }
+                    if (
+                        $page.data.settings?.terrain?.hillshading &&
+                        !map?.getSource("hillshading")
+                    ) {
+                        map!.addSource("hillshading", {
+                            type: "raster-dem",
+                            url: $page.data.settings?.terrain?.hillshading,
+                        });
+                        map!.addLayer({
+                            id: "hillshading",
+                            source: "terrain",
+                            type: "hillshade",
+                        });
+                    }
                 } catch (e) {}
             }
         });

web/src/lib/models/settings.ts

@@ -7,7 +7,7 @@ class Settings {
   location?: { name: string, lat: number, lon: number };
   category?: string;
   tilesets?: {name: string, url: string}[]
-  terrain?: string;
+  terrain?: { terrain: string, hillshading: string};
   user?: string;
 
   constructor(
@@ -19,7 +19,7 @@ class Settings {
       location?: { name: string, lat: number, lon: number }
       category?: string
       tilesets?: {name: string, url: string}[]
-      terrain?: string;
+      terrain?: { terrain: string, hillshading: string};
     }
   ) {
     this.unit = unit;

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

@@ -50,13 +50,15 @@
     let customTilesetName: string = "";
     let customTilesetURL: string = "";
     let terrainURL: string = "";
+    let hillshadingURL: string = "";
 
     onMount(() => {
         citySearchQuery = settings?.location?.name ?? "";
         selectedLanguage = settings?.language || "en";
         selectedMapFocus = settings?.mapFocus ?? "trails";
 
-        terrainURL = settings?.terrain ?? "";
+        terrainURL = settings?.terrain.terrain ?? "";
+        hillshadingURL = settings?.terrain.hillshading ?? "";
     });
 
     async function searchCities(q: string) {
@@ -134,9 +136,13 @@
     async function handleTerrainAdd() {
         await settings_update({
             id: settings!.id,
-            terrain: terrainURL,
+            terrain: { terrain: terrainURL, hillshading: hillshadingURL },
         });
     }
+
+    $: terrainSaveEnabled =
+        terrainURL !== settings.terrain?.terrain ||
+        hillshadingURL !== settings.terrain.hillshading;
 </script>
 
 <svelte:head>
@@ -225,12 +231,19 @@
                             placeholder="https://.../tiles.json"
                         ></TextField>
                     </div>
+                    <div class="basis-full">
+                        <TextField
+                            label="Hillshading URL"
+                            bind:value={hillshadingURL}
+                            placeholder="https://.../tiles.json"
+                        ></TextField>
+                    </div>
                     <button
-                        disabled={terrainURL == settings?.terrain}
+                        disabled={!terrainSaveEnabled}
                         class="btn-icon mt-6"
-                        class:hover:!bg-background={terrainURL == settings?.terrain}
+                        class:hover:!bg-background={!terrainSaveEnabled}
                         on:click={handleTerrainAdd}
-                        class:text-gray-500={terrainURL == settings?.terrain}
+                        class:text-gray-500={!terrainSaveEnabled}
                         ><i class="fa fa-save"></i></button
                     >
                 </div>