Add OS Map Layer

package.json

@@ -18,7 +18,7 @@
     "static-security-scan": "npm audit --json > npm-audit-report.json",
     "scan:zap": "npm run docker-security-scan && npm run static-security-scan",
     "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,6 +1,7 @@
 import parse from 'wellknown'
 import maplibregl from 'maplibre-gl'
 import { capitalize, startCase } from 'lodash'
+import { getApiToken } from './os-api-token.js'
 
 const lineColor = '#000000'
 const fillColor = '#008'
@@ -29,28 +30,45 @@ const popupMaxListLength = 10
  */
 export class Map {
   constructor (opts) {
-    this.bbox = opts.boundingBox ?? null
+    this.opts = opts
+    this.bbox = this.opts.boundingBox ?? null
     this.map = new maplibregl.Map({
-      container: opts.containerId,
-      style: 'https://api.maptiler.com/maps/basic-v2/style.json?key=ncAXR9XEn7JgHBLguAUw',
+      container: this.opts.containerId,
+      style: this.opts.style ?? '/public/static/OS_VTS_3857_3D.json',
       zoom: 11,
       center: [-0.1298779, 51.4959698],
-      interactive: opts.interactive ?? true
+      interactive: this.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
-    this.addControls(opts.interactive)
+    this.addControls(this.opts.interactive)
 
     this.map.on('load', async () => {
       // Store the first symbol layer id
       this.setFirstMapLayerId()
 
       // Add the boundary GeoJSON to the map
-      if (opts.boundaryGeoJsonUrl) this.addBoundaryGeoJsonToMap(opts.boundaryGeoJsonUrl)
+      if (this.opts.boundaryGeoJsonUrl) this.addBoundaryGeoJsonToMap(this.opts.boundaryGeoJsonUrl)
 
       // Add layer data to map
-      if (opts.wktFormat) this.addWktDataToMap(opts.data)
-      else await this.addGeoJsonUrlsToMap(opts.data)
+      if (opts.wktFormat) this.addWktDataToMap(this.opts.data)
+      else await this.addGeoJsonUrlsToMap(this.opts.data)
 
       // Move the map to the bounding box
       if (this.bbox && this.bbox.length) this.setMapViewToBoundingBox()
@@ -388,6 +406,14 @@ export const createMapFromServerContext = async () => {
     wktFormat: geoJsonUrl === undefined
   }
 
+  // fetch initial token
+  try {
+    await getApiToken()
+  } catch (error) {
+    console.error('Error fetching OS Map API token', error)
+    options.style = 'https://api.maptiler.com/maps/basic-v2/style.json?key=ncAXR9XEn7JgHBLguAUw'
+  }
+
   // 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,36 @@
+// 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)
+      })
+      .catch(err => {
+        makingRequest = false
+        reject(err)
+      })
+  })
+}