Fix issue with IM datasets when multiple maps on the same page

package.json

@@ -94,7 +94,7 @@
   "dependencies": {
     "@defra/forms-model": "^4.0.0",
     "@defra/hapi-tracing": "^1.29.0",
-    "@defra/interactive-map": "0.0.33-alpha",
+    "@defra/interactive-map": "^0.0.56-alpha",
     "@elastic/ecs-pino-format": "^1.5.0",
     "@hapi/boom": "^10.0.1",
     "@hapi/bourne": "^3.0.0",

src/client/javascripts/geospatial-map.js

@@ -1,7 +1,7 @@
 // @ts-expect-error - no types
 import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
 // @ts-expect-error - no types
-import createDrawPlugin from '@defra/interactive-map/plugins/draw-ml'
+import createDrawPlugin from '@defra/interactive-map/plugins/draw'
 import { bbox } from '@turf/bbox'
 
 import {
@@ -12,9 +12,9 @@ import {
 import {
   EVENTS,
   createMap,
-  defaultConfig,
   getCentroidGridRef,
   getCoordinateGridRef,
+  getDefaultConfig,
   getMapCountryLayers,
   getMapLayers
 } from '~/src/client/javascripts/map.js'
@@ -223,7 +223,7 @@ export function processGeospatial(config, geospatial, index) {
   }
 
   const initConfig = {
-    ...defaultConfig,
+    ...getDefaultConfig(),
     bounds,
     plugins
   }

src/client/javascripts/location-map.js

@@ -10,8 +10,8 @@ import {
   EVENTS,
   centerMap,
   createMap,
-  defaultConfig,
   eastingNorthingToLatLong,
+  getDefaultConfig,
   getMapCountryLayers,
   getMapLayers,
   latLongToEastingNorthing,
@@ -446,7 +446,7 @@ export function processLocation(config, location, index) {
   mapContainer.setAttribute('id', mapId)
   mapContainer.setAttribute('class', 'map-container')
 
-  const initConfig = getInitMapConfig(location) ?? defaultConfig
+  const initConfig = getInitMapConfig(location) ?? getDefaultConfig()
 
   locationInputs.after(mapContainer)
 

src/client/javascripts/map.js

@@ -122,10 +122,15 @@ export function getCentroidGridRef(feature) {
   }
 }
 
-/** @type {InteractiveMapInitConfig} */
-export const defaultConfig = {
-  zoom: '6',
-  center: [DEFAULT_LONG, DEFAULT_LAT]
+/**
+ * Get the default config for a map
+ * @returns {InteractiveMapInitConfig}
+ */
+export const getDefaultConfig = () => {
+  return {
+    zoom: '6',
+    center: [DEFAULT_LONG, DEFAULT_LAT]
+  }
 }
 
 export const EVENTS = {
@@ -166,6 +171,7 @@ export function initMaps(config = {}) {
   const {
     assetPath = '/assets',
     apiPath = '/form/api',
+    workerPath = '/assets/interactive-map/maplibre-gl-worker.mjs',
     data = defaultData
   } = config
   const locations = document.querySelectorAll('.app-location-field')
@@ -197,11 +203,15 @@ export function initMaps(config = {}) {
   }
 
   locations.forEach((location, index) => {
-    processLocation({ assetPath, apiPath, data }, location, index)
+    processLocation({ assetPath, apiPath, workerPath, data }, location, index)
   })
 
   geospatials.forEach((geospatial, index) => {
-    processGeospatial({ assetPath, apiPath, data }, geospatial, index)
+    processGeospatial(
+      { assetPath, apiPath, workerPath, data },
+      geospatial,
+      index
+    )
   })
 }
 
@@ -258,7 +268,7 @@ export function makeTileRequestTransformer(apiPath) {
  * @param {MapsEnvironmentConfig} mapsConfig - the map environment params
  */
 export function createMap(mapId, initConfig, mapsConfig) {
-  const { assetPath, apiPath, data = defaultData } = mapsConfig
+  const { assetPath, apiPath, workerPath, data = defaultData } = mapsConfig
   const logoAltText = 'Ordnance survey logo'
   const interactPlugin = createInteractPlugin({
     markerColor: { outdoor: '#ff0000', dark: '#00ff00' },
@@ -270,7 +280,7 @@ export function createMap(mapId, initConfig, mapsConfig) {
   const map = new InteractiveMap(mapId, {
     enableFullscreen: true,
     autoColorScheme: false,
-    mapProvider: maplibreProvider(),
+    mapProvider: maplibreProvider({ workerUrl: workerPath }),
     behaviour: 'inline',
     minZoom: 6,
     maxZoom: 18,
@@ -448,6 +458,7 @@ export function getMapCountryLayers(apiPath, country) {
  * @typedef {object} MapsEnvironmentConfig
  * @property {string} assetPath - the root asset path
  * @property {string} apiPath - the root API path
+ * @property {string} workerPath - the maplibre worker path
  * @property {TileData} data - the tile data config
  */
 

test/client/javascripts/map.test.js

@@ -4,7 +4,7 @@ import InteractiveMap from '@defra/interactive-map'
 // @ts-expect-error - no types
 import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
 // @ts-expect-error - no types
-import createDrawPlugin from '@defra/interactive-map/plugins/draw-ml'
+import createDrawPlugin from '@defra/interactive-map/plugins/draw'
 // @ts-expect-error - no types
 import createInteractPlugin from '@defra/interactive-map/plugins/interact'
 // @ts-expect-error - no types

webpack.config.js

@@ -4,6 +4,7 @@ import { dirname, join } from 'node:path'
 import { CleanWebpackPlugin } from 'clean-webpack-plugin'
 import CopyPlugin from 'copy-webpack-plugin'
 import TerserPlugin from 'terser-webpack-plugin'
+import webpack from 'webpack'
 import { WebpackAssetsManifest } from 'webpack-assets-manifest'
 
 const { NODE_ENV = 'development' } = process.env
@@ -54,6 +55,8 @@ export default {
       '/assets': join(govukFrontendPath, 'dist/govuk/assets')
     }
   },
+  // maplibre-gl builds a URL from an expression when its worker is cross-origin; harmless
+  ignoreWarnings: [{ module: /maplibre-gl/, message: /Critical dependency/ }],
   module: {
     rules: [
       {
@@ -190,6 +193,9 @@ export default {
   plugins: [
     new CleanWebpackPlugin(),
     new WebpackAssetsManifest(),
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^(ol|proj4|@arcgis\/core)(\/|$)/
+    }),
     new CopyPlugin({
       patterns: [
         {