Nice names for clicking on the map

Author: fallaciousreasoning

src/components/MapPin.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-    import { toLonLat } from 'ol/proj'
+  import { toLonLat } from 'ol/proj'
   import { getOlContext } from '../ol/Map.svelte'
-    import fragment from '../stores/fragment'
+  import fragment from '../stores/fragment'
+  import { findPlace } from '../search/geocode'
+  import round from '../utils/round'
 
   const { map } = getOlContext()
 
-  map.on('click', e => {
+  map.on('click', async (e) => {
     const [lng, lat] = toLonLat(e.coordinate)
+    const closestPoint = await findPlace(lat, lng)
     $fragment.label = {
-        lat,
-        lng,
-        text: `Lat/Lng: ${lat},${lng}`
+      lat: closestPoint?.lat ?? lat,
+      lng: closestPoint?.lon ?? lng,
+      text: closestPoint?.name ?? `Lat/Lon: ${round(lat, 5)},${round(lng, 5)}`,
     }
   })
 </script>

src/search/geocode.ts

@@ -44,7 +44,7 @@ const searchNzPlaces = async (query: string): Promise<GeocodeResult[]> => {
 
 export const findPlace = async (lat: number, lon: number) => {
     const search = await getSearch()
-    return search.closest_place(lat, lon, 100)
+    return search.closest_place(lat, lon, 0.1)
 }
 
 export default async (query: string, sources=[searchNzPlaces]): Promise<GeocodeResult[]> => {