Add geocoder #9

Author: dabreegster

web/package-lock.json

@@ -26,6 +26,7 @@
     "vite-plugin-wasm-pack": "0.1.11"
   },
   "dependencies": {
+    "@maptiler/geocoding-control": "^1.2.1",
     "@turf/nearest-point-on-line": "^6.5.0",
     "@types/geojson": "^7946.0.13",
     "route-snapper": "0.3.0",

web/package.json

@@ -4,7 +4,7 @@
   import initRouteSnapper from "route-snapper";
   import { onMount } from "svelte";
   import { FillLayer, GeoJSON, MapLibre } from "svelte-maplibre";
-  import { Layout, layerId } from "./common";
+  import { Geocoder, Layout, layerId } from "./common";
   import DebugMode from "./DebugMode.svelte";
   import DebugGJ from "./DebugGJ.svelte";
   import NeighbourhoodMode from "./edit/NeighbourhoodMode.svelte";
@@ -17,6 +17,7 @@
     map as mapStore,
     mode,
     sidebarContents,
+    maptilerApiKey,
   } from "./stores";
   import TitleMode from "./title/TitleMode.svelte";
   import ViewShortcutsMode from "./ViewShortcutsMode.svelte";
@@ -30,7 +31,7 @@
 
   let showBasemap = true;
   $: mapStyle = showBasemap
-    ? "https://api.maptiler.com/maps/dataviz/style.json?key=MZEJTanw3WpxRvt7qDfo"
+    ? `https://api.maptiler.com/maps/dataviz/style.json?key=${maptilerApiKey}`
     : {
         version: 8 as const,
         sources: {},
@@ -105,6 +106,7 @@
         },
       ]}
     >
+      <Geocoder />
       <div bind:this={mapDiv} />
       {#if $mode.mode == "title"}
         <TitleMode {wasmReady} />

web/src/App.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { createMapLibreGlMapController } from "@maptiler/geocoding-control/maplibregl";
+  import GeocodingControl from "@maptiler/geocoding-control/svelte/GeocodingControl.svelte";
+  import maplibregl from "maplibre-gl";
+  import { map, maptilerApiKey } from "../stores";
+
+  $: mapController = $map ? createMapLibreGlMapController($map, maplibregl) : null;
+
+  // TODO Show markers
+  // TODO Set the flyTo duration
+</script>
+
+{#if mapController}
+  <div>
+    <GeocodingControl {mapController} apiKey={maptilerApiKey} />
+  </div>
+{/if}
+
+<style>
+  div {
+    position: absolute;
+    top: 20px;
+    left: 50px;
+  }
+</style>

web/src/common/Geocoder.svelte

@@ -4,6 +4,7 @@ import type {
   ExpressionSpecification,
 } from "maplibre-gl";
 
+export { default as Geocoder } from "./Geocoder.svelte";
 export { default as Layout } from "./Layout.svelte";
 export { default as Legend } from "./Legend.svelte";
 export { default as Loading } from "./Loading.svelte";

web/src/common/index.ts

@@ -4,6 +4,8 @@ import { LngLat, type Map } from "maplibre-gl";
 import { writable, type Writable } from "svelte/store";
 import { RouteTool } from "./common/snapper/route_tool";
 
+export const maptilerApiKey = "MZEJTanw3WpxRvt7qDfo";
+
 export type Mode =
   | {
       mode: "title";