WIP - proof of concept

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

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

@@ -0,0 +1,35 @@
+// copied from https://github.com/digital-land/digital-land.info/blob/main/assets/javascripts/osApiToken.js
+
+/* const OS_API_TOKEN_URL = 'https://planning.data.gov.uk/os/getToken' // @todo - check with infrastructure team if this is okay to use
+const apiToken = {
+  access_token: 'm8BKTTRw1tx7TWTwnSwINbc1A2Jt',
+  expires_in: 0,
+  issued_at: 0
+}
+
+const 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 '8JG2GhYKU62nSXGfjjXc34DOvhWR'
+}
+
+/* export const getFreshApiToken = () => {
+  return new Promise((resolve, reject) => {
+     makingRequest = true
+    fetch(OS_API_TOKEN_URL)
+      .then(res => res.json())
+      .then(res => {
+        apiToken = res
+        makingRequest = false
+        resolve(apiToken.access_token)
+      }
+      )
+    resolve('m8BKTTRw1tx7TWTwnSwINbc1A2Jt')
+  })
+}
+*/