Map layer now using OS maps

This aligns with the map layer from the main website.

package.json

@@ -15,7 +15,7 @@
     "start:development": "NODE_ENV=development node index.js",
     "start:local:watch": "NODE_ENV=test npm run start:watch",
     "mock:api": "node ./test/mock-api/index.js",
-    "build": "npm run scss && cp -R src/assets/downloadable/. public/downloadable && npm run build-webpack",
+    "build": "npm run scss && cp -R src/assets/downloadable/. public/downloadable && cp -R src/assets/static/. public/static && npm run build-webpack",
     "build-webpack": "webpack",
     "serve-webpack": "webpack serve",
     "scss": "sass --quiet-deps --load-path=./ src/assets/scss:public/stylesheets",

src/assets/js/map.js

@@ -1,5 +1,6 @@
 import parse from 'wellknown'
 import maplibregl from 'maplibre-gl'
+import { getApiToken } from './os-api-token.js'
 
 const lineColor = '#000000'
 const fillColor = '#008'
@@ -30,10 +31,26 @@ export class Map {
     this.bbox = opts.boundingBox ?? null
     this.map = new maplibregl.Map({
       container: opts.containerId,
-      style: 'https://api.maptiler.com/maps/basic-v2/style.json?key=ncAXR9XEn7JgHBLguAUw',
+      style: '/public/static/OS_VTS_3857_3D.json',
       zoom: 11,
       center: [-0.1298779, 51.4959698],
-      interactive: opts.interactive ?? true
+      interactive: opts.interactive ?? true,
+      transformRequest: (url, resourceType) => {
+        if (url.indexOf('api.os.uk') > -1) {
+          if (!/[?&]key=/.test(url)) url += '?key=null'
+
+          const requestToMake = {
+            url: url + '&srs=3857'
+          }
+
+          const token = getApiToken()
+          requestToMake.headers = {
+            Authorization: 'Bearer ' + token
+          }
+
+          return requestToMake
+        }
+      }
     })
 
     // Add map controls
@@ -293,6 +310,9 @@ export const createMapFromServerContext = async () => {
     wktFormat: geoJsonUrl === undefined
   }
 
+  // fetch initial token
+  await getApiToken()
+
   // if the geoJsonUrl is provided, generate the paginated GeoJSON links
   if (geoJsonUrl) {
     options.data = await generatePaginatedGeoJsonLinks(geoJsonUrl)

src/assets/js/os-api-token.js

@@ -0,0 +1,33 @@
+// copied from https://github.com/digital-land/digital-land.info/blob/main/assets/javascripts/osApiToken.js
+
+const API_ACCESS_TOKEN_URL = '/api/os/get-access-token'
+let apiToken = {
+  access_token: '',
+  expires_in: 0,
+  issued_at: 0
+}
+
+let makingRequest = false
+
+export const getApiToken = () => {
+  const tokenCheckBuffer = 30 * 1000
+  const tokenExpires = parseInt(apiToken.expires_in) * 1000 + parseInt(apiToken.issued_at)
+  if (Date.now() > tokenExpires - tokenCheckBuffer && !makingRequest) {
+    getFreshApiToken()
+  }
+  return apiToken.access_token
+}
+
+export const getFreshApiToken = () => {
+  return new Promise((resolve, reject) => {
+    makingRequest = true
+    fetch(API_ACCESS_TOKEN_URL)
+      .then(res => res.json())
+      .then(res => {
+        apiToken = res
+        makingRequest = false
+        resolve(apiToken.access_token)
+      }
+      )
+  })
+}