adds new default state images

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

@@ -47,7 +47,7 @@
     let showFilter: boolean = false;
     let showMap: boolean = true;
 
-    let filter: TrailFilter;
+    const filter: TrailFilter = $page.data.filter;
 
     onMount(async () => {
         L = (await import("leaflet")).default;
@@ -130,20 +130,26 @@
 
         const response = await r.json();
 
-        const trailItems = response.results[0].hits.map((t: Record<string, any>) => ({
-            text: t.name,
-            description: `Trail | ${t.location}`,
-            value: t,
-            icon: "route",
-        }));
-        const cityItems = response.results[1].hits.map((c: Record<string, any>) => ({
-            text: c.name,
-            description: `City | ${
-                country_codes[c["country code"] as keyof typeof country_codes]
-            }`,
-            value: c,
-            icon: "city",
-        }));
+        const trailItems = response.results[0].hits.map(
+            (t: Record<string, any>) => ({
+                text: t.name,
+                description: `Trail | ${t.location}`,
+                value: t,
+                icon: "route",
+            }),
+        );
+        const cityItems = response.results[1].hits.map(
+            (c: Record<string, any>) => ({
+                text: c.name,
+                description: `City | ${
+                    country_codes[
+                        c["country code"] as keyof typeof country_codes
+                    ]
+                }`,
+                value: c,
+                icon: "city",
+            }),
+        );
 
         searchDropdownItems = [...trailItems, ...cityItems];
     }
@@ -291,7 +297,7 @@
                         categories={$categories}
                         showTrailSearch={false}
                         showCitySearch={false}
-                        bind:filter
+                        {filter}
                         on:update={(e) => handleFilterUpdate(e.detail)}
                     ></TrailFilterPanel>
                 </div>

web/src/routes/map/+page.ts

@@ -1,9 +1,27 @@
+import type { TrailFilter } from "$lib/models/trail";
 import { categories_index } from "$lib/stores/category_store";
 import { trails } from "$lib/stores/trail_store";
 import type { ServerLoad } from "@sveltejs/kit";
 
 export const load: ServerLoad = async ({ params, locals, fetch }) => {
+    const filter: TrailFilter = {
+        q: "",
+        category: [],
+        difficulty: ["easy", "moderate", "difficult"],
+        near: {
+            radius: 2000,
+        },
+        distanceMin: 0,
+        distanceMax: 20000,
+        elevationGainMin: 0,
+        elevationGainMax: 4000,
+        sort: "created",
+        sortOrder: "+",
+    };
+
     await categories_index(fetch)
 
     trails.set([])
+
+    return { filter: filter }
 };

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

@@ -35,6 +35,10 @@
     ];
     let activeTab = 0;
 
+    const thumbnail = $trail.photos.length
+        ? getFileURL(trail, $trail.photos[$trail.thumbnail])
+        : "/imgs/default_thumbnail.webp";
+
     onMount(() => {
         lightboxDataSource = $trail.photos.map((p) => ({
             src: getFileURL($trail, p),
@@ -83,7 +87,7 @@
         <section class="relative h-80">
             <img
                 class="w-full h-80 object-cover"
-                src={getFileURL($trail, $trail.photos[$trail.thumbnail])}
+                src={thumbnail}
                 alt=""
             />
             <div