more stuff

packages/frontend/src/lib/components/GoToCoordsControl.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { mapContext, DefaultMarker } from "svelte-maplibre"
+  import type { LngLatLike } from "svelte-maplibre/types.svelte"
+
+  const map = mapContext().map
+
+  let value: string = ""
+  let markerPos: LngLatLike | undefined
+
+  function submit() {
+    markerPos = undefined
+
+    const coords = value.split(",").map((coord) => parseFloat(coord))
+    if (coords[1] < -85 || coords[1] > 85) {
+      coords.reverse()
+    }
+
+    if (coords.length !== 2 || coords.some((coord) => isNaN(coord))) {
+      return
+    }
+
+    markerPos = [coords[0], coords[1]]
+
+    $map?.flyTo({ center: markerPos, zoom: 15 })
+    value = ""
+  }
+</script>
+
+<div class="go-to-coords-control">
+  <input
+    type="text"
+    placeholder="Jump to coordinates"
+    bind:value
+    on:keydown={(e) => e.key === "Enter" && submit()}
+  />
+</div>
+
+{#if markerPos}
+  <DefaultMarker lngLat={markerPos} offset={[0, -20]} />
+{/if}
+
+<style>
+  input {
+    width: 100%;
+    padding: 0.25rem;
+    font-size: 0.8rem;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+    outline: none;
+  }
+</style>

packages/frontend/src/lib/components/TrackExplorerMap.svelte

@@ -13,6 +13,7 @@
   import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome"
   import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"
   import { fly } from "svelte/transition"
+  import GoToCoordsControl from "./GoToCoordsControl.svelte"
 
   export let tracks: FeatureCollection<LineString, TrackProps>
   export let selectedTrack: Feature<LineString, TrackProps> | null = null
@@ -49,6 +50,10 @@
   style="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
   class="full-map"
 >
+  <Control position="top-left">
+    <GoToCoordsControl />
+  </Control>
+
   {#if selectedTrack === null && tracks.features.length > 0}
     <TrackSelector {tracks} bind:selectedTrack />
   {:else if selectedTrack !== null}

packages/frontend/src/lib/components/TrackSelector.svelte

@@ -149,7 +149,8 @@
     ]}
     layout={{ "line-cap": "round", "line-join": "round" }}
     paint={{
-      "line-width": 4,
+      // make line thinner as we zoom in
+      "line-width": ["interpolate", ["linear"], ["zoom"], 0, 8, 18, 2],
       "line-color": [
         "interpolate",
         ["linear"],