adds map page

web/src/lib/components/nav_bar.svelte

@@ -22,7 +22,7 @@
     {#if $currentUser}
         <menu class="flex gap-8">
             <a class="font-semibold" href="/trails">Trails</a>
-            <a class="font-semibold" href="">Map</a>
+            <a class="font-semibold" href="/map">Map</a>
             <a class="font-semibold" href="">Categories</a>
             <a class="font-semibold" href="">Favorites</a>
         </menu>

web/src/lib/stores/trail_store.ts

@@ -4,10 +4,11 @@ import type { Waypoint } from "$lib/models/waypoint";
 import { pb } from "$lib/pocketbase";
 import { getFileURL } from "$lib/util/file_util";
 import { util } from "$lib/vendor/svelte-form-lib/util";
-import { writable, type Writable } from "svelte/store";
+import { get, writable, type Writable } from "svelte/store";
 import { summit_logs_create, summit_logs_delete, summit_logs_update } from "./summit_log_store";
 import { waypoints_create, waypoints_delete, waypoints_update } from "./waypoint_store";
 import { ms } from "$lib/meilisearch";
+import type { LatLng } from "leaflet";
 
 export const trails: Writable<Trail[]> = writable([])
 export const trail: Writable<Trail> = writable(new Trail(""));
@@ -15,7 +16,7 @@ export const trail: Writable<Trail> = writable(new Trail(""));
 export const editTrail: Writable<Trail> = writable(new Trail(""));
 
 export async function trails_index() {
-    const response: Trail[] = (await pb.collection('trails').getList<Trail>(1, 5, {expand: "category,waypoints,summit_logs" })).items
+    const response: Trail[] = (await pb.collection('trails').getList<Trail>(1, 5, { expand: "category,waypoints,summit_logs" })).items
 
     for (const trail of response) {
         setFileURLs(trail);
@@ -26,7 +27,7 @@ export async function trails_index() {
     return response;
 }
 
-export async function trails_search(filter: TrailFilter) {
+export async function trails_search_filter(filter: TrailFilter) {
     let filterText: string = `distance >= ${filter.distanceMin} AND distance <= ${filter.distanceMax} AND elevation_gain >= ${filter.eleavationGainMin} AND elevation_gain <= ${filter.elevationGainMax}`;
 
     if (filter.category.length > 0) {
@@ -62,6 +63,40 @@ export async function trails_search(filter: TrailFilter) {
     return dbResponse;
 }
 
+export async function trails_search_bounding_box(northEast: LatLng, southWest: LatLng) {
+    const response = await ms.index("trails").search("", {
+        filter: [
+            `_geoBoundingBox([${northEast.lat}, ${northEast.lng}], [${southWest.lat}, ${southWest.lng}])`,
+        ],
+    });
+    const trailIds = response.hits.map((h) => h.id);
+
+    if (trailIds.length == 0) {
+        trails.set([]);
+        return compareObjectArrays<Trail>(get(trails), []);
+    }
+
+    const dbResponse: Trail[] = (
+        await pb.collection("trails").getList<Trail>(1, 5, {
+            filter: trailIds.map((id) => `id="${id}"`).join("||"),
+            expand: "category,waypoints,summit_logs",
+            sort: `+name`,
+        })
+    ).items;
+
+    for (const trail of dbResponse) {
+        setFileURLs(trail);
+        const gpxData: string = await fetchGPX(trail);
+        trail.expand.gpx_data = gpxData;
+    }
+    
+    const comparison = compareObjectArrays<Trail>(get(trails), dbResponse)
+
+    trails.set(dbResponse);
+
+    return comparison;
+}
+
 export async function trails_show(id: string, loadGPX?: boolean) {
     const response: Trail = await pb.collection('trails').getOne<Trail>(id, { expand: "category,waypoints,summit_logs" })
 

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

@@ -0,0 +1,157 @@
+<script lang="ts">
+    import TrailCard from "$lib/components/trail/trail_card.svelte";
+    import type { Trail } from "$lib/models/trail";
+    import {
+        trails,
+        trails_search_bounding_box,
+    } from "$lib/stores/trail_store";
+    import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
+    import type {
+        GPX,
+        Icon,
+        LatLng,
+        LayerGroup,
+        LeafletEvent,
+        Map,
+        Marker,
+    } from "leaflet";
+    import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
+    import "leaflet/dist/leaflet.css";
+    import { onMount } from "svelte";
+
+    let L: any;
+    let map: Map;
+    let gpxLayers: Record<string, GPX> = {};
+
+    onMount(async () => {
+        L = (await import("leaflet")).default;
+        await import("leaflet-gpx");
+        await import("leaflet.awesome-markers");
+
+        map = L.map("map").setView([0, 0], 4);
+
+        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            attribution: "© OpenStreetMap contributors",
+        }).addTo(map);
+
+        map.on("moveend", async (e) => {
+            const bounds = map.getBounds();
+            await searchTrails(bounds.getNorthEast(), bounds.getSouthWest());
+        });
+
+        navigator.geolocation.getCurrentPosition(
+            (position) => {
+                const lat = position.coords.latitude;
+                const lon = position.coords.longitude;
+
+                // map.setView([lat, lon], 15);
+            },
+            (error) => {
+                console.error("Error getting user location:", error);
+            },
+        );
+    });
+
+    async function searchTrails(northEast: LatLng, southWest: LatLng) {
+        const changes = await trails_search_bounding_box(northEast, southWest);
+
+        for (const newTrail of changes.added) {
+            const gpxLayer = await addGPXLayer(newTrail);
+
+            if (gpxLayer) {
+                gpxLayers[newTrail.id!] = gpxLayer;
+            }
+        }
+
+        for (const deletedTrail of changes.deleted) {
+            map.removeLayer(gpxLayers[deletedTrail.id!]);
+            delete gpxLayers[deletedTrail.id!];
+        }
+    }
+
+    function addGPXLayer(trail: Trail) {
+        return new Promise<GPX>(function (resolve, reject) {
+            if (!trail.expand.gpx_data) {
+                reject();
+            }
+            const gpxLayer = new L.GPX(trail.expand.gpx_data!, {
+                async: true,
+                gpx_options: {
+                    parseElements: ["track"],
+                },
+                marker_options: {
+                    startIcon: L.AwesomeMarkers.icon({
+                        icon: "circle-half-stroke",
+                        prefix: "fa",
+                        markerColor: "cadetblue",
+                        iconColor: "white",
+                    }) as Icon,
+                    startIconUrl: "",
+                    endIconUrl: "",
+                    shadowUrl: "",
+                },
+            })
+                .on("addpoint", function (e: any) {
+                    if (e.point_type === "start") {
+                        const marker: Marker = e.point as Marker;
+                        marker.bindPopup(
+                            `<a href="/trail/view/${trail.id}">
+    <li class="flex items-center gap-4 cursor-pointer text-black">
+        <div class="shrink-0"><img class="h-14 w-14 object-cover rounded-xl" src="${
+            trail.thumbnail
+        }" alt="">
+        </div>
+        <div>
+            <h4 class="font-semibold text-lg">${trail.name}</h4>
+            <h5><i class="fa fa-location-dot mr-3"></i>${trail.location}</h5>
+            <div class="flex mt-2 gap-4 text-sm text-gray-500"><span class="shrink-0"><i
+                        class="fa fa-left-right mr-2"></i>${formatMeters(
+                            trail.distance,
+                        )}</span> <span class="shrink-0"><i class="fa fa-up-down mr-2"></i>${formatMeters(
+                            trail.elevation_gain,
+                        )}</span> <span class="shrink-0"><i class="fa fa-clock mr-2"></i>${formatTimeHHMM(
+                            trail.duration,
+                        )}</span></div>
+        </div>
+    </li>
+</a>`,
+                        );
+
+                        // marker.on("mouseover", (e) => {
+                        //     marker.openPopup();
+                        // });
+                        // marker.on("mouseout", (e) => {
+                        //     marker.closePopup();
+                        // });
+                    }
+                })
+                .on("loaded", function (e: LeafletEvent) {
+                    resolve(gpxLayer);
+                })
+                .on("error", reject)
+                .addTo(map);
+        });
+    }
+</script>
+
+<main class="grid grid-cols-[400px_1fr]">
+    <div
+        class="overflow-y-scroll overflow-x-hidden flex flex-col items-center gap-4 px-8"
+    >
+        {#each $trails as trail}
+            <TrailCard {trail} mode="edit"></TrailCard>
+        {/each}
+    </div>
+    <div class="rounded-xl" id="map"></div>
+</main>
+
+<style>
+    #map {
+        height: calc(100vh - 124px);
+    }
+
+    :global(.leaflet-popup-content) {
+        width: max-content !important;
+        max-width: 100%;
+    }
+</style>

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

@@ -0,0 +1,6 @@
+import { trails } from "$lib/stores/trail_store";
+import type { ServerLoad } from "@sveltejs/kit";
+
+export const load: ServerLoad = async ({ params, locals }) => {
+    trails.set([])
+};

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

@@ -16,7 +16,7 @@
     import type { Category } from "$lib/models/category";
     import type { TrailFilter } from "$lib/models/trail";
     import { categories } from "$lib/stores/category_store";
-    import { trails, trails_search } from "$lib/stores/trail_store";
+    import { trails, trails_search_filter } from "$lib/stores/trail_store";
     import { country_codes } from "$lib/util/country_code_util";
     import { formatMeters } from "$lib/util/format_util";
     import { onMount } from "svelte";
@@ -71,15 +71,21 @@
 
     let citySearchQuery: string = "";
 
+    let filterExpanded: boolean = true;
+
     onMount(() => {
-        const storedDisplayOption = localStorage.getItem("displayOption")
-        if(storedDisplayOption) {
+        const storedDisplayOption = localStorage.getItem("displayOption");
+        if (storedDisplayOption) {
             selectedDisplayOption = storedDisplayOption;
         }
-    })
+
+        if (window.innerWidth < 768) {
+            filterExpanded = false;
+        }
+    });
 
     async function searchTrails() {
-        await trails_search(filter);
+        await trails_search_filter(filter);
     }
 
     function setCategoryFilter(category: Category) {
@@ -157,7 +163,7 @@
     }
 
     function setDisplayOption() {
-        localStorage.setItem("displayOption", selectedDisplayOption);       
+        localStorage.setItem("displayOption", selectedDisplayOption);
     }
 </script>
 
@@ -165,86 +171,99 @@
     class="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-8 max-w-7xl mx-6 md:mx-auto"
 >
     <div class="trail-filters p-8 border rounded-xl">
-        <Search
-            bind:value={filter.q}
-            on:update={searchTrails}
-            placeholder="Search trails..."
-        ></Search>
-        <hr class="my-4" />
-        <p class="text-sm font-medium pb-4">Category</p>
-        {#each $categories as category, i}
-            <div class="flex items-center mb-4">
-                <input
-                    id="{category.name}-checkbox"
-                    type="checkbox"
-                    value={category.id}
-                    class="w-4 h-4 text-primary bg-gray-100 border-gray-300 focus:ring-gray-400 focus:ring-2"
-                    on:change={() => setCategoryFilter(category)}
-                />
-                <label
-                    for="{category.name}-checkbox"
-                    class="ms-2 text-sm text-gray-900 dark:text-gray-300"
-                    >{category.name}</label
-                >
+        <div class="flex gap-2 items-center">
+            <div class="basis-full">
+                <Search
+                    bind:value={filter.q}
+                    on:update={searchTrails}
+                    placeholder="Search trails..."
+                ></Search>
             </div>
-        {/each}
-        <hr class="my-4" />
-        <p class="text-sm font-medium pb-4">Near</p>
-        <div class="mb-8">
-            <Search
-                items={searchDropdownItems}
-                placeholder="Search cities..."
-                bind:value={citySearchQuery}
-                on:update={(e) => searchCities(e.detail)}
-                on:click={(e) => handleSearchClick(e.detail)}
-            ></Search>
+            <button
+                id="sort-order-btn"
+                class="rounded-full py-1 px-2 hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors md:hidden"
+                on:click={() => (filterExpanded = !filterExpanded)}
+                ><i class="fa fa-sliders"></i></button
+            >
         </div>
-        <Slider
-            maxValue={10000}
-            bind:currentValue={filter.near.radius}
-            on:set={() => searchTrails()}
-        ></Slider>
-        <p>
-            <span class="text-gray-500 text-sm">Radius:</span>
-            {formatMeters(filter.near.radius)}
-        </p>
-        <hr class="my-4" />
-        <p class="text-sm font-medium pb-4">Distance</p>
-        <DoubleSlider
-            minValue={minDistance}
-            maxValue={maxDistance}
-            bind:currentMin={filter.distanceMin}
-            bind:currentMax={filter.distanceMax}
-            on:set={() => searchTrails()}
-        ></DoubleSlider>
-        <div class="flex justify-between">
-            <span>{formatMeters(filter.distanceMin)}</span>
-            <span>{formatMeters(filter.distanceMax)}</span>
-        </div>
-        <hr class="my-4" />
-        <p class="text-sm font-medium pb-4">Elevation Gain</p>
-        <DoubleSlider
-            minValue={minElevationGain}
-            maxValue={maxElevationGain}
-            bind:currentMin={filter.eleavationGainMin}
-            bind:currentMax={filter.elevationGainMax}
-            on:set={() => searchTrails()}
-        ></DoubleSlider>
-        <div class="flex justify-between">
-            <span>{formatMeters(filter.eleavationGainMin)}</span>
-            <span>{formatMeters(filter.elevationGainMax)}</span>
-        </div>
-        <hr class="my-4" />
-        <p class="text-sm font-medium pb-4">Completed</p>
-        <RadioGroup
-            name="completed"
-            items={radioGroupItems}
-            selected={2}
-            on:change={(e) => setCompletedFilter(e.detail)}
-        ></RadioGroup>
+
+        {#if filterExpanded}
+            <hr class="my-4" />
+            <p class="text-sm font-medium pb-4">Category</p>
+            {#each $categories as category, i}
+                <div class="flex items-center mb-4">
+                    <input
+                        id="{category.name}-checkbox"
+                        type="checkbox"
+                        value={category.id}
+                        class="w-4 h-4 text-primary bg-gray-100 border-gray-300 focus:ring-gray-400 focus:ring-2"
+                        on:change={() => setCategoryFilter(category)}
+                    />
+                    <label
+                        for="{category.name}-checkbox"
+                        class="ms-2 text-sm text-gray-900 dark:text-gray-300"
+                        >{category.name}</label
+                    >
+                </div>
+            {/each}
+            <hr class="my-4" />
+            <p class="text-sm font-medium pb-4">Near</p>
+            <div class="mb-8">
+                <Search
+                    items={searchDropdownItems}
+                    placeholder="Search cities..."
+                    bind:value={citySearchQuery}
+                    on:update={(e) => searchCities(e.detail)}
+                    on:click={(e) => handleSearchClick(e.detail)}
+                ></Search>
+            </div>
+            <Slider
+                maxValue={10000}
+                bind:currentValue={filter.near.radius}
+                on:set={() => searchTrails()}
+            ></Slider>
+            <p>
+                <span class="text-gray-500 text-sm">Radius:</span>
+                {formatMeters(filter.near.radius)}
+            </p>
+            <hr class="my-4" />
+            <p class="text-sm font-medium pb-4">Distance</p>
+            <DoubleSlider
+                minValue={minDistance}
+                maxValue={maxDistance}
+                bind:currentMin={filter.distanceMin}
+                bind:currentMax={filter.distanceMax}
+                on:set={() => searchTrails()}
+            ></DoubleSlider>
+            <div class="flex justify-between">
+                <span>{formatMeters(filter.distanceMin)}</span>
+                <span>{formatMeters(filter.distanceMax)}</span>
+            </div>
+            <hr class="my-4" />
+            <p class="text-sm font-medium pb-4">Elevation Gain</p>
+            <DoubleSlider
+                minValue={minElevationGain}
+                maxValue={maxElevationGain}
+                bind:currentMin={filter.eleavationGainMin}
+                bind:currentMax={filter.elevationGainMax}
+                on:set={() => searchTrails()}
+            ></DoubleSlider>
+            <div class="flex justify-between">
+                <span>{formatMeters(filter.eleavationGainMin)}</span>
+                <span>{formatMeters(filter.elevationGainMax)}</span>
+            </div>
+            <hr class="my-4" />
+            <p class="text-sm font-medium pb-4">Completed</p>
+            <RadioGroup
+                name="completed"
+                items={radioGroupItems}
+                selected={2}
+                on:change={(e) => setCompletedFilter(e.detail)}
+            ></RadioGroup>
+        {/if}
     </div>
     <div class="min-w-0">
-        <div class="flex items-start gap-8 justify-end">
+        <div class="flex items-start gap-8 justify-end mx-4">
             <div>
                 <p class="text-sm text-gray-500 pb-2">Sort</p>
                 <div class="flex items-center gap-2">
@@ -255,7 +274,7 @@
                     ></Select>
                     <button
                         id="sort-order-btn"
-                        class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200"
+                        class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors"
                         on:click={() => setSortOrder()}
                         ><i class="fa fa-arrow-up"></i></button
                     >
@@ -272,7 +291,10 @@
             </div>
         </div>
 
-        <div id="trails" class="flex items-start flex-wrap gap-8 py-8 max-w-full">
+        <div
+            id="trails"
+            class="flex items-start flex-wrap gap-8 py-8 max-w-full"
+        >
             {#each $trails as trail}
                 <a class="max-w-full" href="/trail/view/{trail.id}">
                     {#if selectedDisplayOption === "cards"}