Merge branch 'beta' (early part)

Author: fallaciousreasoning

package-lock.json

@@ -13,8 +13,8 @@
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/plugin-typescript": "11.1.5",
     "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "11.1.5",
     "@tsconfig/svelte": "5.0.2",
     "@types/human-date": "^1.4.0",
     "autoprefixer": "10.4.13",

package.json

@@ -2,4 +2,8 @@
 
 ## `huts.json`
 
-    curl 'https://api.doc.govt.nz/v2/huts?coordinates=wgs84' -H 'x-api-key: yNyjpuXvMJ1g2d0YEpUmW7VZhePMqbCv96GRjq8L' > huts.json
+    curl 'https://api.doc.govt.nz/v2/huts?coordinates=wgs84' -H 'x-api-key: yNyjpuXvMJ1g2d0YEpUmW7VZhePMqbCv96GRjq8L' > huts.json
+
+## `places.json`
+
+    curl 'https://raw.githubusercontent.com/fallaciousreasoning/nz-place-search/master/data/min_nz_places.json' > places.json

public/data/README.md

@@ -12,7 +12,7 @@
 	<link rel="stylesheet" href="/build/extra.css" />
 	<link rel="stylesheet" href="/build/tailwind.css" />
 
-	<script defer src='/build/bundle.js'></script>
+	<script defer src='/build/main.js' type="module"></script>
 	<script defer>
 		if ('serviceWorker' in navigator)
 			navigator.serviceWorker.register('/serviceWorker.js');

public/data/places.json

@@ -23,10 +23,11 @@ const downloadFirstRunAssets = async () => {
     '/global.css',
     '/build/extra.css',
     '/build/tailwind.css',
-    '/build/bundle.js',
+    '/build/main.js',
     '/data/huts.json',
     '/icons/marker.svg',
-    '/icons/location-indicator.svg'
+    '/icons/location-indicator.svg',
+    'https://search.topos.nz/data/min_excluded_places.json'
   ]);
 };
 
@@ -106,9 +107,6 @@ const rules = {
   // First party scripts should be fetched from the network, if possible. 
   [self.registration.scope]: networkThenCache,
 
-  // Cache doc huts.
-  "https://api.doc.govt.nz/v2/huts?coordinates=wgs84": cacheThenNetwork,
-
   // Fetch latest mountain data, if we have a network connection.
   "https://raw.githubusercontent.com/fallaciousreasoning/nz-mountains/main/mountains.json": networkThenCache,
 }

public/index.html

@@ -9,6 +9,8 @@ import terser from '@rollup/plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
 import tailwindcss from 'tailwindcss';
 import { spawn } from 'child_process'
+import fs from 'fs/promises'
+import path from 'path'
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -37,9 +39,9 @@ export default {
 	input: 'src/main.ts',
 	output: {
 		sourcemap: true,
-		format: 'iife',
+		format: 'es',
 		name: 'app',
-		file: 'public/build/bundle.js'
+		dir: 'public/build'
 	},
 	context: 'window',
 	plugins: [

public/serviceWorker.js

@@ -22,6 +22,7 @@
   import fragment from './stores/fragment'
   import { nzBounds } from './utils/bounds'
   import { XYZ } from 'ol/source'
+  import MapPin from './components/MapPin.svelte'
 </script>
 
 <div id="topo-map">
@@ -32,26 +33,29 @@
       maxZoom={18}
       minZoom={4}
       extent={nzBounds}
-      initialView={nzBounds} />
+      initialView={nzBounds}
+    />
     <MapPositioner />
     <LayerGroup title="Base Layers">
       {#each layerDefinitions.filter((l) => l.type === 'base') as definition}
         <TileLayer
           title={definition.name}
           type="base"
           visible={false}
-          source={cachingSource(definition)} />
+          source={cachingSource(definition)}
+        />
       {/each}
     </LayerGroup>
     <LayerGroup title="Overlays">
       {#each layerDefinitions.filter((l) => l.type === 'overlay') as definition}
         <TileLayer
           title={definition.name}
           prerender={definition.prerender}
-          type={"overlay"}
+          type={'overlay'}
           minZoom={definition.minZoom}
           visible={definition.defaultVisible}
-          source={cachingSource(definition)} />
+          source={cachingSource(definition)}
+        />
       {/each}
     </LayerGroup>
     <LayerGroup title="Features">
@@ -64,7 +68,8 @@
         on:change={(e) => {
           const [lng, lat] = [e.detail.result.lon, e.detail.result.lat]
           $fragment.label = { lat, lng, text: e.detail.result.name }
-        }} />
+        }}
+      />
       <MapZoom />
       <MapLocator />
       <MapMeasure />
@@ -73,6 +78,7 @@
       <MapRotate />
     </Controls>
     <MapLabel />
+    <MapPin />
   </Map>
 </div>
 

rollup.config.mjs

@@ -1,43 +1,48 @@
 <script lang="ts">
-  import Geolocation from "ol/Geolocation"
-  import type { Coordinate } from "ol/coordinate"
-  import Icon from "ol/style/Icon"
-  import Style from "ol/style/Style"
-  import Feature from "../ol/Feature.svelte"
-  import { getOlContext } from "../ol/Map.svelte"
-  import VectorLayer from "../ol/VectorLayer.svelte"
-  import MapControl from "./MapControl.svelte"
+  import Geolocation from 'ol/Geolocation'
+  import type { Coordinate } from 'ol/coordinate'
+  import Icon from 'ol/style/Icon'
+  import Style from 'ol/style/Style'
+  import Feature from '../ol/Feature.svelte'
+  import { getOlContext } from '../ol/Map.svelte'
+  import VectorLayer from '../ol/VectorLayer.svelte'
+  import MapControl from './MapControl.svelte'
 
-  const { map } = getOlContext();
+  const { map } = getOlContext()
 
-  let tracking = false;
-  let position: Coordinate;
+  let tracking = false
+  let position: Coordinate
 
   let geolocation = new Geolocation({
     projection: map.getView().getProjection(),
     trackingOptions: {
-      enableHighAccuracy: true
-    }
-   });
-  geolocation.on("change", (e) => {
-    position = geolocation.getPosition();
-  });
+      enableHighAccuracy: true,
+    },
+  })
+  geolocation.on('change', (e) => {
+    const locatedPos = geolocation.getPosition()
+    if (!locatedPos) return
+    position = locatedPos
+  })
 
   $: {
     if (tracking) {
-      geolocation.once("change", () =>
-        map.getView().setCenter(geolocation.getPosition())
-      );
+      geolocation.once('change', () =>
+        map.getView().setCenter(geolocation.getPosition()),
+      )
     }
 
-    geolocation.setTracking(tracking);
+    geolocation.setTracking(tracking)
   }
 </script>
 
 <MapControl>
   <button
-    on:click={() => tracking = !tracking}  
-    class={`map-button ${tracking && 'hover:bg-primary-hover hover:text-background'}`}>
+    on:click={() => (tracking = !tracking)}
+    class={`map-button ${
+      tracking && 'hover:bg-primary-hover hover:text-background'
+    }`}
+  >
     ⬊
   </button>
 </MapControl>
@@ -50,11 +55,12 @@
         image: new Icon({
           anchor: [0.5, 0.5],
           opacity: 0.9,
-          imgSize: [600, 600],
+          size: [600, 600],
           scale: 0.08,
           color: '#578dfF',
           src: '/icons/location-indicator.svg',
         }),
-      })} />
+      })}
+    />
   {/if}
 </VectorLayer>

src/TopoMap.svelte

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