Make it easier to use local layer files when running locally. This is

useful for developing new layers and for seeing private layers when running locally.
acteng · Sep 25, 2023 · 8ec65bb · 8ec65bb
1 parent 5f351c7
commit 8ec65bb
Show file tree

Hide file tree

Showing 25 changed files with 111 additions and 42 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,13 @@
 VITE_MAPTILER_API_KEY="MZEJTanw3WpxRvt7qDfo"
+
+# By default, use S3. Only includes public data.
 VITE_RESOURCE_BASE="https://atip.uk"
-#VITE_RESOURCE_BASE="https://atip-test-1.ew.r.appspot.com/data"
-VITE_ON_GCP=false
+
+# Use when deploying to GCP. Public and private data included.
+#VITE_RESOURCE_BASE="https://SOME-PROJECT-ID.ew.r.appspot.com/data"
+
+# Set to blank to use locally hosted files. You must populate (or symlink)
+# public/layers and public/private_layers in this repo.
+#VITE_RESOURCE_BASE=""
+# When running locally, change to "true" to see private layers from local files
+VITE_MIMIC_GCP_LOCALLY="false"
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,5 @@ src/style/main.css
 src/style/main.css.map
 .sass-cache/
 public/assets
+public/layers
+public/private_layers
diff --git a/backend/README.md b/backend/README.md
@@ -28,7 +28,7 @@ Note the URLs won't work; you have to manually replace `$PROJECT`.
 Names and regions should match above.
 
 1.  `gcloud storage --project=$PROJECT buckets create gs://$PROJECT --location=EUROPE-WEST2 --uniform-bucket-level-access`
-2.  Generate fake scheme data and upload it: `npm run generate-random-schemes && gsutil cp random_schemes.geojson gs://$PROJECT/`
+2.  Generate fake scheme data and upload it: `npm run generate-random-schemes && gsutil cp random_schemes.geojson gs://$PROJECT/private_layers/v1/`
 3.  Sync current public layers to GCS. This only works if you have S3 access (aka Dustin). Skip these otherwise, or download another way. This might take a few minutes, depending on your connection: `aws s3 sync s3://atip.uk/layers layers; gsutil -m cp -r ./layers gs://$PROJECT/`
 4.  Also copy private files (currently [only from Ordnance Survey](https://github.com/acteng/atip-data-prep/tree/main/ordnance_survey_layers)) into `gs://$PROJECT/private_layers/v1/`. These have to be generated by a developer; they can't be mirrored from S3, because our S3 bucket is only appropriate for public data.
 5.  Go to <https://osdatahub.os.uk/projects/ATIP_scheme_browser> (or enable the OS Maps API in a new project) and copy the API key. Create a file `api_keys.json` containing `{"ordnance_survey": "that copied api key"}`, and upload it to the GCS bucket at `gs://$PROJECT/private_layers/api_keys.json`.

diff --git a/docs/developer_guide.md b/docs/developer_guide.md
@@ -52,7 +52,8 @@ To run locally you'll need:
   - If you're modifying the Rust code, a handy command is `npm run wasm && npm run dev`
 - `npm run generate-schema-ts` to rebuild TS definitions from changes to `src/schemas/*.json`
 - `npm run setup-govuk` to rerun Sass and generate GOV.UK styles
-- `npm run dev` to run Atip locally (N.B. you need to run all the above commands before running this command)
+- `npm run dev` to run ATIP locally (N.B. you need to run all the above commands before running this command)
+  - To mimic GCP deployment and see private layers locally, follow instructions in `.env` and run `VITE_RESOURCE_BASE="" VITE_MIMIC_GCP_LOCALLY="true" npm run dev`
 - `npm run fmt` to auto-format code
 - `npm run check` to see TypeScript errors
 

diff --git a/src/lib/browse/LoadRemoteSchemeData.svelte b/src/lib/browse/LoadRemoteSchemeData.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
+  import { privateResourceBaseUrl } from "lib/common";
   import { onMount } from "svelte";
 
   // TODO Loading message
   export let loadFile: (text: string) => void;
 
   onMount(async () => {
     let resp = await fetch(
-      `${import.meta.env.VITE_RESOURCE_BASE}/random_schemes.geojson`
+      `${privateResourceBaseUrl()}/v1/random_schemes.geojson`
     );
     let text = await resp.text();
     loadFile(text);

diff --git a/src/lib/browse/layers/BusRoutesLayerControl.svelte b/src/lib/browse/layers/BusRoutesLayerControl.svelte
@@ -4,6 +4,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
@@ -20,7 +21,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwriteLineLayer($map, {

diff --git a/src/lib/browse/layers/CensusOutputAreaLayerControl.svelte b/src/lib/browse/layers/CensusOutputAreaLayerControl.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { ExternalLink, HelpButton, InteractiveLayer } from "lib/common";
+  import {
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+    publicResourceBaseUrl,
+  } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
     hoveredToggle,
@@ -48,7 +53,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwritePolygonLayer($map, {

diff --git a/src/lib/browse/layers/CombinedAuthoritiesLayerControl.svelte b/src/lib/browse/layers/CombinedAuthoritiesLayerControl.svelte
@@ -4,6 +4,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
@@ -20,11 +21,7 @@
   let color = colors.combined_authorities;
   let outlineLayer = `${name}-outline`;
 
-  overwriteSource(
-    $map,
-    name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.geojson`
-  );
+  overwriteSource($map, name, `${publicResourceBaseUrl()}/v1/${name}.geojson`);
 
   overwritePolygonLayer($map, {
     id: name,

diff --git a/src/lib/browse/layers/CrossingsLayerControl.svelte b/src/lib/browse/layers/CrossingsLayerControl.svelte
@@ -4,6 +4,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import { overwriteCircleLayer, overwritePmtilesSource } from "lib/maplibre";
@@ -42,7 +43,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
   let color = colors[name];
 

diff --git a/src/lib/browse/layers/CycleParkingLayerControl.svelte b/src/lib/browse/layers/CycleParkingLayerControl.svelte
@@ -4,6 +4,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import { overwriteCircleLayer, overwritePmtilesSource } from "lib/maplibre";
@@ -17,7 +18,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwriteCircleLayer($map, {

diff --git a/src/lib/browse/layers/CyclePathsLayerControl.svelte b/src/lib/browse/layers/CyclePathsLayerControl.svelte
@@ -4,6 +4,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
@@ -28,7 +29,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwriteLineLayer($map, {

diff --git a/src/lib/browse/layers/ImdLayerControl.svelte b/src/lib/browse/layers/ImdLayerControl.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { ExternalLink, HelpButton, InteractiveLayer } from "lib/common";
+  import {
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+    publicResourceBaseUrl,
+  } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
     hoveredToggle,
@@ -23,7 +28,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwritePolygonLayer($map, {

diff --git a/src/lib/browse/layers/LocalAuthorityDistrictsLayerControl.svelte b/src/lib/browse/layers/LocalAuthorityDistrictsLayerControl.svelte
@@ -4,6 +4,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
@@ -20,11 +21,7 @@
   let color = colors.local_authority_districts;
   let outlineLayer = `${name}-outline`;
 
-  overwriteSource(
-    $map,
-    name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.geojson`
-  );
+  overwriteSource($map, name, `${publicResourceBaseUrl()}/v1/${name}.geojson`);
 
   overwritePolygonLayer($map, {
     id: name,

diff --git a/src/lib/browse/layers/LocalPlanningAuthoritiesLayerControl.svelte b/src/lib/browse/layers/LocalPlanningAuthoritiesLayerControl.svelte
@@ -4,6 +4,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
@@ -23,7 +24,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwritePolygonLayer($map, {

diff --git a/src/lib/browse/layers/MrnLayerControl.svelte b/src/lib/browse/layers/MrnLayerControl.svelte
@@ -4,6 +4,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
@@ -21,7 +22,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwriteLineLayer($map, {

diff --git a/src/lib/browse/layers/ParliamentaryConstituenciesLayerControl.svelte b/src/lib/browse/layers/ParliamentaryConstituenciesLayerControl.svelte
@@ -4,6 +4,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
@@ -23,7 +24,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwritePolygonLayer($map, {

diff --git a/src/lib/browse/layers/PctLayerControl.svelte b/src/lib/browse/layers/PctLayerControl.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { ExternalLink, HelpButton, InteractiveLayer } from "lib/common";
+  import {
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+    publicResourceBaseUrl,
+  } from "lib/common";
   import { Checkbox, Radio, Select } from "lib/govuk";
   import {
     hoveredToggle,
@@ -25,7 +30,7 @@
     overwritePmtilesSource(
       $map,
       name,
-      `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+      `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
     );
     overwriteLineLayer($map, {
       id: name,

diff --git a/src/lib/browse/layers/PolygonAmenityLayerControl.svelte b/src/lib/browse/layers/PolygonAmenityLayerControl.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { ColorLegend, HelpButton, InteractiveLayer } from "lib/common";
+  import {
+    ColorLegend,
+    HelpButton,
+    InteractiveLayer,
+    publicResourceBaseUrl,
+  } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
     hoveredToggle,
@@ -29,7 +34,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwritePolygonLayer($map, {

diff --git a/src/lib/browse/layers/RailwayStationsLayerControl.svelte b/src/lib/browse/layers/RailwayStationsLayerControl.svelte
@@ -5,6 +5,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import { overwriteCircleLayer, overwriteSource } from "lib/maplibre";
@@ -13,7 +14,7 @@
   import { colors } from "../colors";
 
   const name = "railway_stations";
-  const url = `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.geojson`;
+  const url = `${publicResourceBaseUrl()}/v1/${name}.geojson`;
   let show = false;
 
   overwriteSource($map, name, url);

diff --git a/src/lib/browse/layers/RoadSpeedsLayerControl.svelte b/src/lib/browse/layers/RoadSpeedsLayerControl.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { ExternalLink, HelpButton, InteractiveLayer } from "lib/common";
+  import {
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+    privateResourceBaseUrl,
+  } from "lib/common";
   import { Checkbox, Radio } from "lib/govuk";
   import {
     hoveredToggle,
@@ -21,7 +26,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/private_layers/v1/${name}.pmtiles`
+    `${privateResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwriteLineLayer($map, {

diff --git a/src/lib/browse/layers/RoadWidthsLayerControl.svelte b/src/lib/browse/layers/RoadWidthsLayerControl.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { ExternalLink, HelpButton, InteractiveLayer } from "lib/common";
+  import {
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+    privateResourceBaseUrl,
+  } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
     hoveredToggle,
@@ -19,7 +24,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/private_layers/v1/${name}.pmtiles`
+    `${privateResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwriteLineLayer($map, {

diff --git a/src/lib/browse/layers/VehicleCountsLayerControl.svelte b/src/lib/browse/layers/VehicleCountsLayerControl.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { ExternalLink, HelpButton, InteractiveLayer } from "lib/common";
+  import {
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+    publicResourceBaseUrl,
+  } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
     makeColorRamp,
@@ -22,7 +27,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwriteCircleLayer($map, {

diff --git a/src/lib/browse/layers/WardsLayerControl.svelte b/src/lib/browse/layers/WardsLayerControl.svelte
@@ -4,6 +4,7 @@
     ExternalLink,
     HelpButton,
     InteractiveLayer,
+    publicResourceBaseUrl,
   } from "lib/common";
   import { Checkbox } from "lib/govuk";
   import {
@@ -23,7 +24,7 @@
   overwritePmtilesSource(
     $map,
     name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+    `${publicResourceBaseUrl()}/v1/${name}.pmtiles`
   );
 
   overwritePolygonLayer($map, {