DF-1105: Interactive map - replace UMD with ESM (#419)

* Interactive map - replace UMD with ESM

* Remove reverse geocode proxy capability

Author: davidjamesstone

jest.config.cjs

@@ -57,6 +57,16 @@ module.exports = {
       'geodesy' // Supports ESM only
     ].join('|')}/)`
   ],
+  moduleNameMapper: {
+    '^@defra/interactive-map$':
+      '<rootDir>/test/__mocks__/@defra/interactive-map.js',
+    '^@defra/interactive-map/plugins/datasets/adapters/(.*)$':
+      '<rootDir>/test/__mocks__/@defra/interactive-map/plugins/datasets/adapters/$1.js',
+    '^@defra/interactive-map/plugins/(.*)$':
+      '<rootDir>/test/__mocks__/@defra/interactive-map/plugins/$1.js',
+    '^@defra/interactive-map/providers/(.*)$':
+      '<rootDir>/test/__mocks__/@defra/interactive-map/providers/$1.js'
+  },
   testTimeout: 10000,
   forceExit: true
 }

package-lock.json

@@ -130,6 +130,7 @@
     "joi": "^17.13.3",
     "liquidjs": "^10.24.0",
     "lodash": "^4.17.21",
+    "maplibre-gl": "^5.24.0",
     "marked": "^15.0.12",
     "nunjucks": "^3.2.4",
     "obscenity": "^0.4.5",

package.json

@@ -1,3 +1,9 @@
+// @ts-expect-error - no types
+import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
+// @ts-expect-error - no types
+import { maplibreLayerAdapter } from '@defra/interactive-map/plugins/datasets/adapters/maplibre'
+// @ts-expect-error - no types
+import createDrawPlugin from '@defra/interactive-map/plugins/draw-ml'
 import { bbox } from '@turf/bbox'
 
 import {
@@ -151,9 +157,6 @@ export function getBoundingBox(geojson) {
  * @param {number} index - the 0-based index
  */
 export function processGeospatial(config, geospatial, index) {
-  // @ts-expect-error - Defra namespace currently comes from UMD support files
-  const defra = window.defra
-
   if (!(geospatial instanceof HTMLDivElement)) {
     return
   }
@@ -166,14 +169,15 @@ export function processGeospatial(config, geospatial, index) {
   const { listEl, mapId } = createContainers(geospatialInput, index)
   const geojson = getGeoJSON(geospatialInput)
   const bounds = geojson.features.length ? getBoundingBox(geojson) : undefined
-  const drawPlugin = defra.drawMLPlugin()
+  const drawPlugin = createDrawPlugin()
   const plugins = [drawPlugin]
   const country = geospatial.dataset.country
 
   if (country) {
     // Add the country bounds as a dataset plugin to show the valid area on the map
     // and provide feedback to the user when they add features outside of the bounds.
-    const datasetsPlugin = defra.datasetsMaplibrePlugin({
+    const datasetsPlugin = createDatasetsPlugin({
+      layerAdapter: maplibreLayerAdapter,
       datasets: [
         {
           id: 'invalid-area',

src/client/javascripts/geospatial-map.js

@@ -1,3 +1,15 @@
+// @ts-expect-error - no types
+import InteractiveMap from '@defra/interactive-map'
+// @ts-expect-error - no types
+import createInteractPlugin from '@defra/interactive-map/plugins/interact'
+// @ts-expect-error - no types
+import createMapStylesPlugin from '@defra/interactive-map/plugins/map-styles'
+// @ts-expect-error - no types
+import createScaleBarPlugin from '@defra/interactive-map/plugins/scale-bar'
+// @ts-expect-error - no types
+import createSearchPlugin from '@defra/interactive-map/plugins/search'
+// @ts-expect-error - no types
+import maplibreProvider from '@defra/interactive-map/providers/maplibre'
 import { centroid } from '@turf/centroid'
 // @ts-expect-error - no types
 import OsGridRef, { LatLon } from 'geodesy/osgridref.js'
@@ -249,24 +261,17 @@ export function makeTileRequestTransformer(apiPath) {
 export function createMap(mapId, initConfig, mapsConfig) {
   const { assetPath, apiPath, data = defaultData } = mapsConfig
   const logoAltText = 'Ordnance survey logo'
-
-  // @ts-expect-error - Defra namespace currently comes from UMD support files
-  const defra = window.defra
-
-  const interactPlugin = defra.interactPlugin({
+  const interactPlugin = createInteractPlugin({
     markerColor: { outdoor: '#ff0000', dark: '#00ff00' },
     interactionModes: ['placeMarker'],
     multiSelect: false
   })
 
   /** @type {InteractiveMap} */
-  const map = new defra.InteractiveMap(mapId, {
+  const map = new InteractiveMap(mapId, {
     enableFullscreen: true,
     autoColorScheme: false,
-    mapProvider: defra.maplibreProvider(),
-    reverseGeocodeProvider: defra.openNamesProvider({
-      url: `${apiPath}/reverse-geocode-proxy?easting={easting}&northing={northing}`
-    }),
+    mapProvider: maplibreProvider(),
     behaviour: 'inline',
     minZoom: 6,
     maxZoom: 18,
@@ -275,7 +280,7 @@ export function createMap(mapId, initConfig, mapsConfig) {
     transformRequest: makeTileRequestTransformer(apiPath),
     ...initConfig,
     plugins: [
-      defra.mapStylesPlugin({
+      createMapStylesPlugin({
         mapStyles: [
           {
             id: 'outdoor',
@@ -319,12 +324,12 @@ export function createMap(mapId, initConfig, mapsConfig) {
         ]
       }),
       interactPlugin,
-      defra.searchPlugin({
+      createSearchPlugin({
         osNamesURL: `${apiPath}/geocode-proxy?query={query}`,
         width: '300px',
         showMarker: false
       }),
-      defra.scaleBarPlugin({
+      createScaleBarPlugin({
         units: 'metric'
       }),
       ...(initConfig.plugins ?? [])

src/client/javascripts/map.js

@@ -4,6 +4,13 @@
 @use "summary-list";
 @use "location-fields";
 
+@use "@defra/interactive-map/css" as core;
+@use "@defra/interactive-map/plugins/interact/css" as interact;
+@use "@defra/interactive-map/plugins/map-styles/css" as mapStyles;
+@use "@defra/interactive-map/plugins/search/css" as search;
+@use "@defra/interactive-map/plugins/scale-bar/css" as scaleBar;
+@use "@defra/interactive-map/plugins/draw-ml/css" as drawMl;
+
 // Use default GDS Transport font for autocomplete
 .autocomplete__hint,
 .autocomplete__input,

src/client/stylesheets/shared.scss

@@ -6,7 +6,7 @@ import { StatusCodes } from 'http-status-codes'
 import Joi from 'joi'
 
 import { getAccessToken } from '~/src/server/plugins/map/routes/get-os-token.js'
-import { find, nearest } from '~/src/server/plugins/map/service.js'
+import { find } from '~/src/server/plugins/map/service.js'
 import {
   get,
   request as httpRequest
@@ -34,7 +34,6 @@ export function getRoutes(options) {
     mapProxyRoute(options),
     tileProxyRoute(options),
     geocodeProxyRoute(options),
-    reverseGeocodeProxyRoute(options),
     getGeospatialCountries()
   ]
 }
@@ -156,41 +155,6 @@ function geocodeProxyRoute(options) {
   }
 }
 
-/**
- * Proxies ordnance survey reverse geocode requests from the front end to api.os.uk
- * Used to find name from easting and northing points.
- * N.B this endpoint is currently not used by the front end but will be soon in "maps V2"
- * @param {MapConfiguration} options - the map options
- * @returns {ServerRoute<MapReverseGeocodeGetRequestRefs>}
- */
-function reverseGeocodeProxyRoute(options) {
-  return {
-    method: 'GET',
-    path: '/api/reverse-geocode-proxy',
-    async handler(request, _h) {
-      const { query } = request
-      const data = await nearest(
-        query.easting,
-        query.northing,
-        options.ordnanceSurveyApiKey
-      )
-
-      return data
-    },
-    options: {
-      auth: false,
-      validate: {
-        query: Joi.object()
-          .keys({
-            easting: Joi.number().required(),
-            northing: Joi.number().required()
-          })
-          .required()
-      }
-    }
-  }
-}
-
 /**
  * Resource routes to return sprites and glyphs
  * @returns {ServerRoute<MapProxyGetRequestRefs>}

src/server/plugins/map/routes/index.js

@@ -67,19 +67,6 @@ export async function find(query, apiKey) {
   return getData(url, endpoint)
 }
 
-/**
- * OS names search nearest by E/N
- * @param {number} easting - the easting
- * @param {number} northing - the northing
- * @param {string} apiKey - the OS api key
- */
-export async function nearest(easting, northing, apiKey) {
-  const endpoint = 'nearest'
-  const url = `https://api.os.uk/search/names/v1/nearest?key=${apiKey}&point=${easting},${northing}&radius=1000&fq=local_type:Airfield%20local_type:Airport%20local_type:Bus_Station%20local_type:Chemical_Works%20local_type:City%20local_type:Coach_Station%20local_type:Electricity_Distribution%20local_type:Electricity_Production%20local_type:Further_Education%20local_type:Gas_Distribution_or_Storage%20local_type:Hamlet%20local_type:Harbour%20local_type:Helicopter_Station%20local_type:Heliport%20local_type:Higher_or_University_Education%20local_type:Hill_Or_Mountain%20local_type:Hospice%20local_type:Hospital%20local_type:Medical_Care_Accommodation%20local_type:Named_Road%20local_type:Non_State_Primary_Education%20local_type:Non_State_Secondary_Education%20local_type:Other_Settlement%20local_type:Passenger_Ferry_Terminal%20local_type:Port_Consisting_of_Docks_and_Nautical_Berthing%20local_type:Postcode%20local_type:Primary_Education%20local_type:Railway_Station%20local_type:Road_User_Services%20local_type:Secondary_Education%20local_type:Section_Of_Named_Road%20local_type:Section_Of_Numbered_Road%20local_type:Special_Needs_Education%20local_type:Suburban_Area%20local_type:Town%20local_type:Urban_Greenspace%20local_type:Vehicular_Ferry_Terminal%20local_type:Vehicular_Rail_Terminal%20local_type:Village%20local_type:Waterfall%20`
-
-  return getData(url, endpoint)
-}
-
 /**
  * @import { OsNamesFindResponse, OsNamesFindResult } from '~/src/server/plugins/map/types.js'
  */

src/server/plugins/map/service.js

@@ -2,7 +2,6 @@ import Boom from '@hapi/boom'
 
 import * as service from '~/src/server/plugins/map/service.js'
 import { result as findResult } from '~/src/server/plugins/map/test/__stubs__/find.js'
-import { result as nearestResult } from '~/src/server/plugins/map/test/__stubs__/nearest.js'
 import { getJson } from '~/src/server/services/httpService.js'
 
 jest.mock('~/src/server/services/httpService.ts')
@@ -88,55 +87,6 @@ describe('Maps service', () => {
       expect(results).toEqual([])
     })
   })
-
-  describe('nearest', () => {
-    it('should return entries', async () => {
-      jest.mocked(getJson).mockResolvedValueOnce({
-        res: /** @type {IncomingMessage} */ ({
-          statusCode: 200,
-          headers: {}
-        }),
-        payload: nearestResult,
-        error: undefined
-      })
-
-      const { results } = await service.nearest(700000, 1300000, 'apikey')
-
-      expect(results).toHaveLength(1)
-      expect(results.at(0)).toEqual({
-        GAZETTEER_ENTRY: {
-          ID: 'NW26XE',
-          NAMES_URI: 'http://data.ordnancesurvey.co.uk/id/postcodeunit/NW26XE',
-          NAME1: 'NW2 6XE',
-          TYPE: 'other',
-          LOCAL_TYPE: 'Postcode',
-          GEOMETRY_X: 523065,
-          GEOMETRY_Y: 185795,
-          MOST_DETAIL_VIEW_RES: 3500,
-          LEAST_DETAIL_VIEW_RES: 18000,
-          POPULATED_PLACE: 'London',
-          POPULATED_PLACE_URI:
-            'http://data.ordnancesurvey.co.uk/id/4000000074813508',
-          POPULATED_PLACE_TYPE:
-            'http://www.ordnancesurvey.co.uk/xml/codelists/localtype.xml#city',
-          DISTRICT_BOROUGH: 'Brent',
-          DISTRICT_BOROUGH_URI:
-            'http://data.ordnancesurvey.co.uk/id/7000000000011447',
-          DISTRICT_BOROUGH_TYPE:
-            'http://data.ordnancesurvey.co.uk/ontology/admingeo/LondonBorough',
-          COUNTY_UNITARY: 'Greater London',
-          COUNTY_UNITARY_URI:
-            'http://data.ordnancesurvey.co.uk/id/7000000000041441',
-          COUNTY_UNITARY_TYPE:
-            'http://data.ordnancesurvey.co.uk/ontology/admingeo/GreaterLondonAuthority',
-          REGION: 'London',
-          REGION_URI: 'http://data.ordnancesurvey.co.uk/id/7000000000041428',
-          COUNTRY: 'England',
-          COUNTRY_URI: 'http://data.ordnancesurvey.co.uk/id/country/england'
-        }
-      })
-    })
-  })
 })
 
 /**