Complete location based work for "Near to Me" feature

src/lib/islands/near-to-me-island.svelte

@@ -3,6 +3,7 @@
     import { apiGet } from "$lib/scripts/apiFetch";
     import { getCurrentLocation } from "$lib/scripts/getLocation";
     import { location } from "$lib/stores/location";
+    //import { NearestStationResponse } from "@owlboard/ts-types";
     export let variables = {
         title: "Near to Me",
     };
@@ -13,25 +14,31 @@
 
     async function getNearestStations() {
         const currLocation = await getCurrentLocation();
+        console.debug(`Current Latitude: ${currLocation.latitude}, Current Longitude: ${currLocation.longitude}`)
         const apiPath  = `/api/v2/live/station/nearest/${currLocation.latitude}/${currLocation.longitude}`
         const res = await apiGet(apiPath)
+        console.log(res)
+        return res as any[]
     }
 
 </script>
 
 <Island {variables}>
     {#if !$location}
-        <p>Coming soon</p>
-<!--    <br>
+        <p>Coming Soon</p>
+        <!--
+        <br>
         <button on:click={turnOnLocation}>Turn on Location</button>
         -->
     {:else if $location}
         {#await getNearestStations()}
             <p>Fetching Location</p>
         {:then stations}
+            <div id="buttons">
             {#each stations as station}
-                <a class="link" href="/ldb?station={station.CRS}">{station.NLCDESC} - {station.miles}mi</a>
+                <a class="link" href="/ldb?station={station["3ALPHA"]}">{station.NLCDESC} - {station.miles}mi</a>
             {/each}
+            </div>
         {:catch err}
             <p>Error: {err.message}</p>
         {/await} 
@@ -57,5 +64,28 @@
         box-shadow: var(--box-shadow);
     }
 
-    
+    #buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        width: 95%;
+        margin: auto;
+        padding-top: 5px;
+    }
+    .link {
+        display: inline-flex;
+        margin: 5px;
+        border: none;
+        border-radius: 20px;
+        padding: 5px 10px;
+        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        text-decoration: none;
+        background-color: var(--island-button-color);
+        color: var(--island-link-color);
+        box-shadow: var(--box-shadow);
+        white-space: nowrap;
+    } 
 </style>

src/lib/scripts/getLocation.ts

@@ -1,20 +1,35 @@
-export function getCurrentLocation(): Promise<locationObj> {
+export async function getCurrentLocation(): Promise<locationObj> {
+    console.debug("Fetching location");
+
+    if (typeof window === 'undefined') {
+        console.error("Location fetch has run serverside - invalid method")
+    }
+
+    if (!navigator.geolocation) {
+        console.error("Geolocation is not supported");
+        throw new Error("Geolocation is not supported");
+    }
+
     return new Promise((resolve, reject) => {
-        if (navigator.geolocation) {
+        const options = {
+            timeout: 10000,
+            maximumAge: 300,
+        };
+
         navigator.geolocation.getCurrentPosition(
             (position) => {
+                console.debug(`Position obtained: ${position.coords}`);
                 resolve({
                     latitude: position.coords.latitude,
                     longitude: position.coords.longitude,
                 });
             },
             (error) => {
+                console.error("Error fetching location: ", error);
                 reject(error);
             }
         );
-        } else {
-            reject(new Error("Geolocation is not supported by this browser."));
-        }
+        options
     });
 }