Remove API key hack; make the caller set it

README.md

@@ -8,6 +8,8 @@ This is a library for building Svelte web apps to edit GeoJSON files with MapLib
 - state management -- GeoJSON is autosaved to local storage, with filesystem download and upload
 - layers -- objects can be grouped into distinct layers, moved around, hidden, etc
 
+This library is higher-level than collections of drawing tools, such as [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw) and [terra-draw](https://github.com/JamesLMilner/terra-draw). If you want individual tools, see [route_snapper](https://github.com/dabreegster/route_snapper/) and [maplibre-draw-polygon](https://github.com/dabreegster/maplibre-draw-polygon). If you don't want opinionated state management and layers, then don't use this.
+
 ## Design choices / non-goals
 
 - There are assumptions about how this library is used -- like there's only one set of controls instantiated per page, so singletons in Svelte stores are fine.
@@ -21,6 +23,7 @@ TODO: Document all of these
 
 - setting things in config
   - map store
+  - ownership of gjSchemeCollection and initialization gotchas
 - govuk
 - static assets
 - z-order
@@ -35,5 +38,4 @@ TODO: Document all of these
 - consider renaming "intervention" and "scheme"
 - coverage polygons in InterventionLayer
 - can we totally remove mapStyle from this library and let streetview tool use a config hook instead?
-- GeocoderControls assumes maptiler api key
 - baselayer switcher at bottom of sidebar

src/lib/config.ts

@@ -62,4 +62,7 @@ export let cfg = {
   ) => {
     // Don't do anything by default
   },
+
+  // Required for the geocoder in the route mote to work
+  maptilerApiKey: "",
 };

src/lib/draw/route/GeocoderControls.svelte

@@ -6,6 +6,7 @@
   import { emptyGeojson } from "$lib/maplibre";
   import { map } from "$lib/config";
   import { geocoderGj } from "./stores";
+  import { cfg } from "$lib/config";
 
   let query = "";
 
@@ -19,7 +20,7 @@
       country: "gb",
       proximity: $map!.getCenter().toArray().join(","),
       fuzzyMatch: "true",
-      key: import.meta.env.VITE_MAPTILER_API_KEY,
+      key: cfg.maptilerApiKey,
     }).toString();
     let url = `https://api.maptiler.com/geocoding/${query}.json?${params}`;
     let resp = await fetch(url);

src/lib/draw/route/RouteControls.svelte

@@ -3,6 +3,7 @@
   import { Checkbox, CheckboxGroup, SecondaryButton } from "govuk-svelte";
   import GeocoderControls from "./GeocoderControls.svelte";
   import { snapMode, undoLength } from "./stores";
+  import { cfg } from "$lib/config";
 
   // Start with this enabled or disabled, based on whether we're drawing a new
   // route or editing an existing.
@@ -93,4 +94,6 @@
   </Checkbox>
 </CheckboxGroup>
 
-<GeocoderControls />
+{#if cfg.maptilerApiKey}
+  <GeocoderControls />
+{/if}

src/routes/+page.svelte

@@ -14,9 +14,6 @@
   import ExampleFeatureForm from "./ExampleFeatureForm.svelte";
   import ExampleSchemeForm from "./ExampleSchemeForm.svelte";
 
-  cfg.editFeatureForm = ExampleFeatureForm;
-  cfg.editSchemeForm = ExampleSchemeForm;
-
   // Use your own key (for MapTiler or another basemap service)
   let apiKey = "MZEJTanw3WpxRvt7qDfo";
   let routeSnapperUrl = "https://atip.uk/route-snappers/v2.6/LAD_Adur.bin.gz";
@@ -61,6 +58,10 @@
     },
     properties: {},
   };
+
+  cfg.editFeatureForm = ExampleFeatureForm;
+  cfg.editSchemeForm = ExampleSchemeForm;
+  cfg.maptilerApiKey = apiKey;
 </script>
 
 <div style="display: flex; height: 100vh">