setup mapbox access token env var

.github/workflows/pull-request.yml

@@ -211,6 +211,7 @@ jobs:
           VITE_APP_API_URL: https://api.${{ env.FULL_DOMAIN }}
           VITE_APP_HASURA_URL: https://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
           VITE_APP_HASURA_WEBSOCKET: wss://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
+          VITE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           VITE_APP_SHAREDB_URL: wss://sharedb.${{ env.FULL_DOMAIN }}
           # needed because there's no API to change google's allowed OAuth URLs
           VITE_APP_GOOGLE_OAUTH_OVERRIDE: https://api.editor.planx.dev
@@ -226,6 +227,7 @@ jobs:
           VITE_APP_API_URL: https://api.${{ env.FULL_DOMAIN }}
           VITE_APP_HASURA_URL: https://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
           VITE_APP_HASURA_WEBSOCKET: wss://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
+          VITE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           VITE_APP_SHAREDB_URL: wss://sharedb.${{ env.FULL_DOMAIN }}
           VITE_APP_GOOGLE_OAUTH_OVERRIDE: https://api.editor.planx.dev
           VITE_APP_ENV: pizza

.github/workflows/push-main.yml

@@ -53,13 +53,14 @@ jobs:
       - run: pnpm build
         working-directory: editor.planx.uk
         env:
+          VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
+          VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
           VITE_APP_API_URL: https://api.editor.planx.dev
+          VITE_APP_ENV: staging
           VITE_APP_HASURA_URL: https://hasura.editor.planx.dev/v1/graphql
+          VITE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           VITE_APP_HASURA_WEBSOCKET: wss://hasura.editor.planx.dev/v1/graphql
           VITE_APP_SHAREDB_URL: wss://sharedb.editor.planx.dev
-          VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
-          VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
-          VITE_APP_ENV: staging
       - name: Upload Build Artifact
         uses: actions/upload-artifact@v4
         with:

.github/workflows/push-production.yml

@@ -53,13 +53,14 @@ jobs:
       - run: pnpm build
         working-directory: editor.planx.uk
         env:
+          VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
+          VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
           VITE_APP_API_URL: https://api.editor.planx.uk
+          VITE_APP_ENV: production
           VITE_APP_HASURA_URL: https://hasura.editor.planx.uk/v1/graphql
           VITE_APP_HASURA_WEBSOCKET: wss://hasura.editor.planx.uk/v1/graphql
+          VITE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           VITE_APP_SHAREDB_URL: wss://sharedb.editor.planx.uk
-          VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
-          VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
-          VITE_APP_ENV: production
       - name: Upload Build Artifact
         uses: actions/upload-artifact@v4
         with:

.gitignore

@@ -11,6 +11,7 @@ editor.planx.uk/.eslintcache
 .env.prod
 .env.temp
 api.planx.uk/.env.test
+editor.planx.uk/.env
 hasura.planx.uk/.env.test
 
 # IDE

docker-compose.yml

@@ -112,41 +112,42 @@ services:
       timeout: 3s
       retries: 5
     environment:
-      APP_ENVIRONMENT: ${APP_ENVIRONMENT}
-      HASURA_GRAPHQL_ADMIN_SECRET: ${HASURA_GRAPHQL_ADMIN_SECRET}
-      HASURA_GRAPHQL_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v1/graphql
-      HASURA_METADATA_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v1/metadata
-      HASURA_SCHEMA_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v2/query
-      JWT_SECRET: ${JWT_SECRET}
-      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
-      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}
+      AIRBRAKE_PROJECT_ID: ${AIRBRAKE_PROJECT_ID}
+      AIRBRAKE_PROJECT_KEY: ${AIRBRAKE_PROJECT_KEY}
       API_URL_EXT: ${API_URL_EXT}
-      EDITOR_URL_EXT: ${EDITOR_URL_EXT}
-      SESSION_SECRET: ${SESSION_SECRET}
-      AWS_S3_REGION: ${AWS_S3_REGION}
+      APP_ENVIRONMENT: ${APP_ENVIRONMENT}
       AWS_ACCESS_KEY: ${AWS_ACCESS_KEY}
-      AWS_SECRET_KEY: ${AWS_SECRET_KEY}
-      AWS_S3_BUCKET: ${AWS_S3_BUCKET}
       AWS_S3_ACL: ${AWS_S3_ACL}
-      PORT: ${API_PORT}
+      AWS_S3_BUCKET: ${AWS_S3_BUCKET}
+      AWS_S3_REGION: ${AWS_S3_REGION}
+      AWS_SECRET_KEY: ${AWS_SECRET_KEY}
       BOPS_API_TOKEN: ${BOPS_API_TOKEN}
-      AIRBRAKE_PROJECT_ID: ${AIRBRAKE_PROJECT_ID}
-      AIRBRAKE_PROJECT_KEY: ${AIRBRAKE_PROJECT_KEY}
-      UNIFORM_TOKEN_URL: ${UNIFORM_TOKEN_URL}
-      UNIFORM_SUBMISSION_URL: ${UNIFORM_SUBMISSION_URL}
-      GOVUK_NOTIFY_API_KEY: ${GOVUK_NOTIFY_API_KEY}
-      HASURA_PLANX_API_KEY: ${HASURA_PLANX_API_KEY}
-      FILE_API_KEY: ${FILE_API_KEY}
-      FILE_API_KEY_NEXUS: ${FILE_API_KEY_NEXUS}
-      FILE_API_KEY_BARNET: ${FILE_API_KEY_BARNET}
-      SLACK_WEBHOOK_URL: ${SLACK_WEBHOOK_URL}
-      ORDNANCE_SURVEY_API_KEY: ${ORDNANCE_SURVEY_API_KEY}
-      MINIO_PORT: ${MINIO_PORT}
       CORS_ALLOWLIST: ${EDITOR_URL_EXT}, ${API_URL_EXT}
+      EDITOR_URL_EXT: ${EDITOR_URL_EXT}
       ENCRYPTION_KEY: ${ENCRYPTION_KEY}
+      FILE_API_KEY_BARNET: ${FILE_API_KEY_BARNET}
+      FILE_API_KEY_NEXUS: ${FILE_API_KEY_NEXUS}
+      FILE_API_KEY: ${FILE_API_KEY}
+      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
+      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}
+      GOVUK_NOTIFY_API_KEY: ${GOVUK_NOTIFY_API_KEY}
+      HASURA_GRAPHQL_ADMIN_SECRET: ${HASURA_GRAPHQL_ADMIN_SECRET}
+      HASURA_GRAPHQL_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v1/graphql
+      HASURA_METADATA_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v1/metadata
+      HASURA_PLANX_API_KEY: ${HASURA_PLANX_API_KEY}
+      HASURA_SCHEMA_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v2/query
       IDOX_NEXUS_CLIENT: ${IDOX_NEXUS_CLIENT}
-      IDOX_NEXUS_TOKEN_URL: ${IDOX_NEXUS_TOKEN_URL}
       IDOX_NEXUS_SUBMISSION_URL: ${IDOX_NEXUS_SUBMISSION_URL}
+      IDOX_NEXUS_TOKEN_URL: ${IDOX_NEXUS_TOKEN_URL}
+      JWT_SECRET: ${JWT_SECRET}
+      MAPBOX_ACCESS_TOKEN: ${MAPBOX_ACCESS_TOKEN}
+      MINIO_PORT: ${MINIO_PORT}
+      ORDNANCE_SURVEY_API_KEY: ${ORDNANCE_SURVEY_API_KEY}
+      PORT: ${API_PORT}
+      SESSION_SECRET: ${SESSION_SECRET}
+      SLACK_WEBHOOK_URL: ${SLACK_WEBHOOK_URL}
+      UNIFORM_SUBMISSION_URL: ${UNIFORM_SUBMISSION_URL}
+      UNIFORM_TOKEN_URL: ${UNIFORM_TOKEN_URL}
       # Local authority config
       # Lambeth
       UNIFORM_CLIENT_LAMBETH: ${UNIFORM_CLIENT_LAMBETH}

editor.planx.uk/.env.example

@@ -0,0 +1,15 @@
+# Used in local development and testing, overwritten in .env.production
+# Most values in this file are publicly exposed and not secrets
+VITE_APP_AIRBRAKE_PROJECT_ID=👻
+VITE_APP_AIRBRAKE_PROJECT_KEY=👻
+
+# This token should be exclusively scoped for local development: localhost:3000 (here) & localhost:5173 (@opensystemslab/map)
+# A separate token restricted to our production, staging, and pizza domains is then set via Pulumi and Github Action secrets
+VITE_APP_MAPBOX_ACCESS_TOKEN=👻
+
+VITE_APP_API_URL=http://localhost:7002
+VITE_APP_HASURA_URL=http://localhost:7100/v1/graphql
+VITE_APP_HASURA_WEBSOCKET=ws://localhost:7100/v1/graphql
+VITE_APP_SHAREDB_URL=ws://localhost:7003
+
+VITE_APP_ENV=development

editor.planx.uk/.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

editor.planx.uk/src/@planx/components/List/schemas/Trees.ts

@@ -68,8 +68,7 @@ export const Trees: Schema = {
         mapOptions: {
           basemap: "OSVectorTile",
           drawType: "Point",
-          drawColor: "#ff0000",
-          drawMany: true,
+          drawColor: "#66ff00",
         },
       },
     },

editor.planx.uk/src/@planx/components/List/utils.tsx

@@ -39,7 +39,7 @@ export function formatSchemaDisplayValue(
     }
     case "question": {
       const matchingOption = field.data.options.find(
-        (option) => option.data.text === value,
+        (option) => option.data.text === value || option.data.val === value,
       );
       return matchingOption?.data.text;
     }
@@ -56,6 +56,7 @@ export function formatSchemaDisplayValue(
               {/* @ts-ignore */}
               <my-map
                 id="inactive-list-map"
+                basemap={field.data.mapOptions?.basemap}
                 latitude={feature.geometry.coordinates[1]}
                 longitude={feature.geometry.coordinates[0]}
                 zoom={19}
@@ -69,7 +70,12 @@ export function formatSchemaDisplayValue(
                 hideResetControl
                 staticMode
                 style={{ width: "100%", height: "30vh" }}
-                osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+                osCopyright={
+                  field.data.mapOptions?.basemap === "OSVectorTile"
+                    ? `© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`
+                    : ``
+                }
+                mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
                 collapseAttributions
               />
             </>
@@ -80,6 +86,7 @@ export function formatSchemaDisplayValue(
               {/* @ts-ignore */}
               <my-map
                 id="inactive-list-map"
+                basemap={field.data.mapOptions?.basemap}
                 geojsonData={JSON.stringify(feature)}
                 geojsonColor={field.data.mapOptions?.drawColor}
                 geojsonFill
@@ -90,7 +97,12 @@ export function formatSchemaDisplayValue(
                 hideResetControl
                 staticMode
                 style={{ width: "100%", height: "30vh" }}
-                osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+                osCopyright={
+                  field.data.mapOptions?.basemap === "OSVectorTile"
+                    ? `© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`
+                    : ``
+                }
+                mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
                 collapseAttributions
               />
             </>

editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx

@@ -76,7 +76,7 @@ const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
             <Typography component="h2" variant="h3">
               {`${schema.type} ${feature.properties?.label}`}
             </Typography>
-            <Typography variant="body2" gutterBottom>
+            <Typography variant="body2" mb={2}>
               {`${feature.geometry.type}`}
               {feature.geometry.type === "Point"
                 ? ` (${feature.geometry.coordinates.map((coord) =>
@@ -106,6 +106,7 @@ const Root = () => {
     info,
     policyRef,
     howMeasured,
+    basemap,
     drawColor,
     drawType,
     schemaName,
@@ -173,6 +174,7 @@ const Root = () => {
           {/* @ts-ignore */}
           <my-map
             id="map-and-label-map"
+            basemap={basemap}
             ariaLabelOlFixedOverlay={`An interactive map for plotting and describing individual ${schemaName.toLocaleLowerCase()}`}
             drawMode
             drawMany
@@ -186,11 +188,17 @@ const Root = () => {
             osProxyEndpoint={`${
               import.meta.env.VITE_APP_API_URL
             }/proxy/ordnance-survey`}
-            osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+            osCopyright={
+              basemap === "OSVectorTile"
+                ? `© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`
+                : ``
+            }
             clipGeojsonData={
               teamSettings?.boundaryBBox &&
               JSON.stringify(teamSettings?.boundaryBBox)
             }
+            mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
+            collapseAttributions
           />
         </MapContainer>
         {features && features?.length > 0 ? (

editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx

@@ -64,11 +64,17 @@ export const MapFieldInput: React.FC<Props<MapField>> = (props) => {
             osProxyEndpoint={`${
               import.meta.env.VITE_APP_API_URL
             }/proxy/ordnance-survey`}
-            osCopyright={`Basemap subject to Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+            osCopyright={
+              mapOptions?.basemap === "OSVectorTile"
+                ? `Basemap subject to Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`
+                : ``
+            }
             clipGeojsonData={
               teamSettings?.boundaryBBox &&
               JSON.stringify(teamSettings?.boundaryBBox)
             }
+            mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
+            collapseAttributions
           />
         </MapContainer>
       </ErrorWrapper>

infrastructure/application/Pulumi.production.yaml

@@ -31,6 +31,8 @@ config:
   application:idox-nexus-token-url: todo
   application:jwt-secret:
     secure: AAABABnYUYnZbOVTfN/n+m6kMQV951efSyHJYKVkGmtYvbPkpAk+BUIciL6AbJvW2x5bBuYvsrmY1v5lyZkoqoJ3XgDA/MTBQNIiNg==
+  application:mapbox-access-token:
+    secure: AAABAGwrLOkFpIZ3u8XeKIsfk1ujqFYKdv4us+ia2EdCXU8sBj2LiXfn8K6UcOifzf3HlOA6CYL3WwalKLmtvuq90CInbipB3dtY4Mr2Vx7NcUA7zxbUtli+8WcShIiNq490GwlTlf7ChjnNSIr3FzCeK3D/Xiq25wT0398c5ZwHyg==
   application:metabase-encryption-secret-key:
     secure: AAABAKQ6L5aOwZWpj9YOsaW8bOOukjt1mZuTgdKjM/3nSmF/0nM/f9c9W9DXygUFj2wtq5/iugo1UTS0+bhEn8Dr9k1Qzr2EmuGpQw==
   application:metabasePgPassword:

infrastructure/application/Pulumi.staging.yaml

@@ -32,6 +32,8 @@ config:
   application:idox-nexus-token-url: https://dev.identity.idoxgroup.com/uaa/oauth/token
   application:jwt-secret:
     secure: AAABACbmLC4176IBxX5iL64/nycSXEsCYSQ0hTb7t2OCVlWUc627Vr/EpBhcqPrw9q+0z8UOvRJG5/c/DflZxfPxyJRUVNu+
+  application:mapbox-access-token:
+    secure: AAABAMWf2zVq5/mKCLynpgzAidNsnbUEBpb47n7MRWp2xzRgwaf3kzOvnZax9N04ZScQqU6I5/tEKTBAbSb8MIBJ8mU2iTZbPg8FD6wYsetRyftm1K39KBsIl9aS7fXvZFOG7BsC4qMDEhlDkH8gbV2HTev3VvvRUe3lzVhjNGNHqQ==
   application:metabase-encryption-secret-key:
     secure: AAABAGmfVICD8sR+IE6mHC8BNUY1WQXGCbv5F3C1fSgA+1ADiRem3GNrwY0YRZociRYuPIo3MIRS0aIg44jt10SBCE0ik58wHamcKA==
   application:metabasePgPassword:

infrastructure/application/index.ts

@@ -421,6 +421,10 @@ export = async () => {
             name: "IDOX_NEXUS_SUBMISSION_URL",
             value: config.requireSecret("idox-nexus-submission-url"),
           },
+          {
+            name: "MAPBOX_ACCESS_TOKEN",
+            value: config.requireSecret("mapbox-access-token"),
+          },
           generateCORSAllowList(CUSTOM_DOMAINS, DOMAIN),
           ...generateTeamSecrets(config, env),
         ],