@defra/interactive-map 0.0.26-alpha → 0.0.27-alpha

package/providers/beta/openlayers/src/utils/queryFeatures.test.js

@@ -0,0 +1,181 @@
+import { queryFeatures } from './queryFeatures.js'
+
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import VectorLayer from 'ol/layer/Vector.js'
+import { renderFeatureToGeoJSON } from './vtTileFragments.js'
+
+jest.mock('ol/layer/VectorTile.js', () => ({ __esModule: true, default: class VectorTileLayer {} }))
+jest.mock('ol/layer/Vector.js', () => ({ __esModule: true, default: class VectorLayer {} }))
+jest.mock('ol/format/GeoJSON.js', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    writeGeometryObject: jest.fn(geom => ({ type: 'mock', geom }))
+  }))
+}))
+jest.mock('./vtTileFragments.js', () => ({
+  renderFeatureToGeoJSON: jest.fn(f => ({ type: 'mock-vt', feature: f }))
+}))
+
+const makeMap = (hits = []) => ({
+  forEachFeatureAtPixel: jest.fn((pixel, cb, opts) => {
+    for (const [feature, layer] of hits) cb(feature, layer)
+  })
+})
+
+const makeVTLayer = () => Object.assign(new VectorTileLayer(), { get: () => undefined })
+
+const makeVTFeature = ({ id = undefined, styleLayerId = 'roads', type = 'fill', props = {} } = {}) => ({
+  getId: () => id,
+  get: (key) => {
+    if (key === 'mapbox-layer') return { id: styleLayerId, type }
+    return undefined
+  },
+  getProperties: () => ({ 'mapbox-layer': { id: styleLayerId }, ...props })
+})
+
+const makeVectorLayer = (layerId, isHighlight = false) => Object.assign(new VectorLayer(), {
+  get: (key) => {
+    if (key === 'layerId') return layerId
+    if (key === '_highlight') return isHighlight || undefined
+    return undefined
+  }
+})
+
+const makeVectorFeature = (id = 'f1', geom = { type: 'Point' }, props = {}) => ({
+  getId: () => id,
+  getGeometry: () => geom,
+  getProperties: () => props
+})
+
+describe('queryFeatures', () => {
+  beforeEach(() => jest.clearAllMocks())
+
+  /* ------------------------------------------------------------------ */
+  /* Guard                                                               */
+  /* ------------------------------------------------------------------ */
+
+  it('returns empty array when point is null', () => {
+    expect(queryFeatures(makeMap(), null)).toEqual([])
+  })
+
+  it('returns empty array when point is undefined', () => {
+    expect(queryFeatures(makeMap())).toEqual([])
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Options                                                             */
+  /* ------------------------------------------------------------------ */
+
+  it('passes point.x/y as pixel and radius as hitTolerance', () => {
+    const map = makeMap()
+    queryFeatures(map, { x: 20, y: 30 }, { radius: 5 })
+    expect(map.forEachFeatureAtPixel).toHaveBeenCalledWith(
+      [20, 30],
+      expect.any(Function),
+      { hitTolerance: 5 }
+    )
+  })
+
+  it('defaults radius to 10', () => {
+    const map = makeMap()
+    queryFeatures(map, { x: 0, y: 0 })
+    expect(map.forEachFeatureAtPixel).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.any(Function),
+      { hitTolerance: 10 }
+    )
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* VectorTile layer features                                          */
+  /* ------------------------------------------------------------------ */
+
+  it('returns a result for a VT feature', () => {
+    const feature = makeVTFeature({ id: 42, styleLayerId: 'roads' })
+    const map = makeMap([[feature, makeVTLayer()]])
+    const results = queryFeatures(map, { x: 0, y: 0 })
+    expect(results).toHaveLength(1)
+    expect(results[0]).toMatchObject({ id: 42, layer: { id: 'roads' } })
+    expect(renderFeatureToGeoJSON).toHaveBeenCalledWith(feature)
+  })
+
+  it('skips VT features with no mapbox-layer id', () => {
+    const feature = { getId: () => 1, get: () => undefined, getProperties: () => ({}) }
+    const map = makeMap([[feature, makeVTLayer()]])
+    expect(queryFeatures(map, { x: 0, y: 0 })).toEqual([])
+  })
+
+  it('skips background-type VT features', () => {
+    const feature = makeVTFeature({ type: 'background' })
+    const map = makeMap([[feature, makeVTLayer()]])
+    expect(queryFeatures(map, { x: 0, y: 0 })).toEqual([])
+  })
+
+  it('deduplicates VT features with the same styleLayerId and feature id', () => {
+    const feature = makeVTFeature({ id: 1, styleLayerId: 'roads' })
+    const map = makeMap([[feature, makeVTLayer()], [feature, makeVTLayer()]])
+    expect(queryFeatures(map, { x: 0, y: 0 })).toHaveLength(1)
+  })
+
+  it('uses property hash as id when VT feature has no explicit id', () => {
+    const feature = makeVTFeature({ id: undefined, styleLayerId: 'roads', props: { name: 'A' } })
+    const map = makeMap([[feature, makeVTLayer()]])
+    const results = queryFeatures(map, { x: 0, y: 0 })
+    expect(results).toHaveLength(1)
+    expect(results[0].id).toBeUndefined()
+  })
+
+  it('deduplicates id-less VT features with identical properties', () => {
+    const f1 = makeVTFeature({ id: undefined, styleLayerId: 'roads', props: { name: 'A' } })
+    const f2 = makeVTFeature({ id: undefined, styleLayerId: 'roads', props: { name: 'A' } })
+    const map = makeMap([[f1, makeVTLayer()], [f2, makeVTLayer()]])
+    expect(queryFeatures(map, { x: 0, y: 0 })).toHaveLength(1)
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Vector layer features                                              */
+  /* ------------------------------------------------------------------ */
+
+  it('returns a result for a Vector layer feature', () => {
+    const feature = makeVectorFeature('f1', { type: 'Point' })
+    const map = makeMap([[feature, makeVectorLayer('draw')]])
+    const results = queryFeatures(map, { x: 0, y: 0 })
+    expect(results).toHaveLength(1)
+    expect(results[0]).toMatchObject({ id: 'f1', layer: { id: 'draw' } })
+  })
+
+  it('skips Vector layer features with no layerId', () => {
+    const feature = makeVectorFeature('f1')
+    const map = makeMap([[feature, makeVectorLayer(undefined)]])
+    expect(queryFeatures(map, { x: 0, y: 0 })).toEqual([])
+  })
+
+  it('skips highlight overlay Vector layers', () => {
+    const feature = makeVectorFeature('f1')
+    const map = makeMap([[feature, makeVectorLayer('draw', true)]])
+    expect(queryFeatures(map, { x: 0, y: 0 })).toEqual([])
+  })
+
+  it('deduplicates Vector layer features with the same layerId and feature id', () => {
+    const feature = makeVectorFeature('f1')
+    const map = makeMap([[feature, makeVectorLayer('draw')], [feature, makeVectorLayer('draw')]])
+    expect(queryFeatures(map, { x: 0, y: 0 })).toHaveLength(1)
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Mixed / other layers                                               */
+  /* ------------------------------------------------------------------ */
+
+  it('skips features from other layer types', () => {
+    const feature = makeVectorFeature('f1')
+    const map = makeMap([[feature, {}]]) // plain object, not VectorTileLayer or VectorLayer
+    expect(queryFeatures(map, { x: 0, y: 0 })).toEqual([])
+  })
+
+  it('returns results from both VT and Vector layers in one call', () => {
+    const vtFeature = makeVTFeature({ id: 1, styleLayerId: 'roads' })
+    const vecFeature = makeVectorFeature('f1')
+    const map = makeMap([[vtFeature, makeVTLayer()], [vecFeature, makeVectorLayer('draw')]])
+    expect(queryFeatures(map, { x: 0, y: 0 })).toHaveLength(2)
+  })
+})

package/providers/beta/openlayers/src/utils/tileLayers.js

@@ -1,13 +1,18 @@
 import XYZ from 'ol/source/XYZ.js'
 import VectorTileSource from 'ol/source/VectorTile.js'
+import TileLayer from 'ol/layer/Tile.js'
 import VectorTileLayer from 'ol/layer/VectorTile.js'
 import OGCVectorTile from 'ol/source/OGCVectorTile.js'
 import MVT from 'ol/format/MVT.js'
 import TileGrid from 'ol/tilegrid/TileGrid.js'
 import TileState from 'ol/TileState.js'
-import { stylefunction } from 'ol-mapbox-style'
+import { stylefunction, recordStyleLayer } from 'ol-mapbox-style'
 import { TILE_GRID_RESOLUTIONS, TILE_GRID_ORIGIN, TILE_SIZE } from '../defaults.js'
 
+// Enable style-layer name recording so feature.get('mapbox-layer').id returns the
+// style layer name — required for snap layer filtering by style layer name.
+recordStyleLayer(true)
+
 const CRS = 'EPSG:27700'
 
 export function fetchWithTransform (url, resourceType, transformRequest) {
@@ -45,6 +50,19 @@ export function createTileSource (url, transformRequest) {
   })
 }
 
+export async function createMapStyleLayer (mapStyle, transformRequest) {
+  if (mapStyle.type === 'raster') {
+    const source = createTileSource(mapStyle.url, transformRequest)
+    return { layer: new TileLayer({ source }), source }
+  }
+
+  if (mapStyle.type === 'ogc-vt') {
+    return createOGCVectorTileLayer(mapStyle.url, transformRequest, mapStyle)
+  }
+
+  return createVectorTileLayer(mapStyle.url, transformRequest, mapStyle)
+}
+
 // Insert extension before any query string to match Mapbox GL sprite convention
 function resolveSprite (spriteBase, transformRequest) {
   const queryIdx = spriteBase.indexOf('?')

package/providers/beta/openlayers/src/utils/tileLayers.test.js

@@ -1,24 +1,29 @@
 import XYZ from 'ol/source/XYZ.js'
 import TileGrid from 'ol/tilegrid/TileGrid.js'
+import TileLayer from 'ol/layer/Tile.js'
 import VectorTileSource from 'ol/source/VectorTile.js'
 import VectorTileLayer from 'ol/layer/VectorTile.js'
 import { stylefunction } from 'ol-mapbox-style'
-import { createTileSource, createVectorTileLayer } from './tileLayers.js'
+import { createTileSource, createMapStyleLayer, createVectorTileLayer } from './tileLayers.js'
 import { TILE_GRID_RESOLUTIONS, TILE_GRID_ORIGIN, TILE_SIZE } from '../defaults.js'
 
 const mockTileGridInstance = {}
 const mockSourceInstance = {}
+const mockTileLayerInstance = {}
 const mockVectorTileSourceInstance = {}
+const mockOGCVectorTileSourceInstance = { supportedMediaTypes: [] }
 const mockVectorTileLayerInstance = {}
-const mockMVTInstance = {}
+const mockMVTInstance = { supportedMediaTypes: [] }
 
 jest.mock('ol/source/XYZ.js', () => ({ __esModule: true, default: jest.fn(() => mockSourceInstance) }))
+jest.mock('ol/layer/Tile.js', () => ({ __esModule: true, default: jest.fn(() => mockTileLayerInstance) }))
 jest.mock('ol/tilegrid/TileGrid.js', () => ({ __esModule: true, default: jest.fn(() => mockTileGridInstance) }))
 jest.mock('ol/TileState.js', () => ({ __esModule: true, default: { ERROR: 'error' } }))
 jest.mock('ol/source/VectorTile.js', () => ({ __esModule: true, default: jest.fn(() => mockVectorTileSourceInstance) }))
+jest.mock('ol/source/OGCVectorTile.js', () => ({ __esModule: true, default: jest.fn(() => mockOGCVectorTileSourceInstance) }))
 jest.mock('ol/layer/VectorTile.js', () => ({ __esModule: true, default: jest.fn(() => mockVectorTileLayerInstance) }))
 jest.mock('ol/format/MVT.js', () => ({ __esModule: true, default: jest.fn(() => mockMVTInstance) }))
-jest.mock('ol-mapbox-style', () => ({ __esModule: true, stylefunction: jest.fn() }))
+jest.mock('ol-mapbox-style', () => ({ __esModule: true, stylefunction: jest.fn(), recordStyleLayer: jest.fn() }))
 
 const flushPromises = () => new Promise(resolve => setTimeout(resolve, 0))
 
@@ -41,6 +46,38 @@ const mockServiceJson = {
 
 const mockSpritesJson = { myIcon: { x: 0, y: 0, width: 16, height: 16, pixelRatio: 1 } }
 
+const mockOGCStyleJson = {
+  sources: { ngd: { url: 'https://example.com/ogc/tiles' } },
+  sprite: 'https://example.com/sprites/sprite',
+  layers: []
+}
+
+const mockTilesetJson = {
+  links: [{ rel: 'http://www.opengis.net/def/rel/ogc/1.0/tiling-scheme', href: 'https://example.com/ogc/tms' }]
+}
+
+const mockTMSJson = {
+  tileMatrices: [
+    { cellSize: 896, pointOfOrigin: [-238375, 1376256], tileHeight: 256, tileWidth: 256 },
+    { cellSize: 448, pointOfOrigin: [-238375, 1376256], tileHeight: 256, tileWidth: 256 }
+  ]
+}
+
+function makeOGCFetchMock (styleJson = mockOGCStyleJson) {
+  return jest.fn().mockImplementation(url => {
+    if (url === 'https://example.com/ogc/tiles') {
+      return Promise.resolve({ json: () => Promise.resolve(mockTilesetJson) })
+    }
+    if (url === 'https://example.com/ogc/tms') {
+      return Promise.resolve({ json: () => Promise.resolve(mockTMSJson) })
+    }
+    if (url.endsWith('.json') || url.includes('.json?')) {
+      return Promise.resolve({ json: () => Promise.resolve(mockSpritesJson) })
+    }
+    return Promise.resolve({ json: () => Promise.resolve(styleJson) })
+  })
+}
+
 function makeVectorFetchMock (styleJson = mockStyleJson) {
   return jest.fn().mockImplementation(url => {
     if (url === styleJson.sources[Object.keys(styleJson.sources)[0]].url) {
@@ -146,6 +183,40 @@ describe('tileLoadFunction (via transformRequest)', () => {
   })
 })
 
+describe('createMapStyleLayer', () => {
+  const styleUrl = 'https://example.com/styles'
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    global.fetch = makeVectorFetchMock()
+  })
+
+  it('creates a raster tile layer and source when mapStyle.type is raster', async () => {
+    const result = await createMapStyleLayer({ url: 'https://tiles.example.com/{z}/{x}/{y}', type: 'raster' }, null)
+    expect(TileLayer).toHaveBeenCalledWith({ source: mockSourceInstance })
+    expect(result).toEqual({ layer: mockTileLayerInstance, source: mockSourceInstance })
+  })
+
+  it('creates an OGC vector tile layer and source when mapStyle.type is ogc-vt', async () => {
+    global.fetch = makeOGCFetchMock()
+    const result = await createMapStyleLayer({ url: 'https://example.com/ogc-styles', type: 'ogc-vt' }, null)
+    expect(VectorTileLayer).toHaveBeenCalledWith({ source: mockOGCVectorTileSourceInstance, declutter: true })
+    expect(result).toEqual({ layer: mockVectorTileLayerInstance, source: mockOGCVectorTileSourceInstance })
+  })
+
+  it('creates a vector tile layer and source when mapStyle.type is vector', async () => {
+    const result = await createMapStyleLayer({ url: styleUrl, type: 'vector' }, null)
+    expect(VectorTileLayer).toHaveBeenCalledWith({ source: mockVectorTileSourceInstance, declutter: true })
+    expect(result).toEqual({ layer: mockVectorTileLayerInstance, source: mockVectorTileSourceInstance })
+  })
+
+  it('creates a vector tile layer and source when mapStyle.type is missing', async () => {
+    const result = await createMapStyleLayer({ url: styleUrl }, null)
+    expect(VectorTileLayer).toHaveBeenCalledWith({ source: mockVectorTileSourceInstance, declutter: true })
+    expect(result).toEqual({ layer: mockVectorTileLayerInstance, source: mockVectorTileSourceInstance })
+  })
+})
+
 describe('createVectorTileLayer', () => {
   const styleUrl = 'https://example.com/styles'
 

package/providers/beta/openlayers/src/utils/vtTileFragments.js

@@ -0,0 +1,86 @@
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import TileState from 'ol/TileState.js'
+const toPairs = (flat, start, end) => {
+  const coords = []
+  for (let i = start; i < end; i += 2) {
+    coords.push([flat[i], flat[i + 1]])
+  }
+  return coords
+}
+
+export const renderFeatureToGeoJSON = (feature) => {
+  const type = feature.getType()
+  const flat = feature.getFlatCoordinates()
+
+  if (type === 'Point') {
+    return { type: 'Point', coordinates: [flat[0], flat[1]] }
+  }
+  if (type === 'LineString') {
+    return { type: 'LineString', coordinates: toPairs(flat, 0, flat.length) }
+  }
+  if (type === 'Polygon') {
+    const ends = feature.getEnds()
+    let prev = 0
+    const rings = ends.map(end => {
+      const ring = toPairs(flat, prev, end)
+      prev = end
+      return ring
+    })
+    return { type: 'Polygon', coordinates: rings }
+  }
+  if (type === 'MultiPolygon') {
+    const endss = feature.getEndss()
+    let offset = 0
+    const polys = endss.map(ends => {
+      let prev = offset
+      const rings = ends.map(end => {
+        const ring = toPairs(flat, prev, end)
+        prev = end
+        return ring
+      })
+      offset = ends[ends.length - 1]
+      return rings
+    })
+    return { type: 'MultiPolygon', coordinates: polys }
+  }
+  // MultiLineString / MultiPoint fallback
+  return { type, coordinates: toPairs(flat, 0, flat.length) }
+}
+
+/**
+ * Collects all loaded VT tile fragments for a feature across all VectorTileLayers.
+ * OL clips VT features at tile boundaries, so a single logical feature appears as
+ * multiple RenderFeature instances (one per tile). This gathers them all so callers
+ * can work with the full feature geometry rather than a single clipped fragment.
+ */
+export const collectTileFragments = (map, layerId, featureId, idProperty) => {
+  const fragments = []
+
+  map.getLayers().forEach(mapLayer => {
+    if (!(mapLayer instanceof VectorTileLayer)) {
+      return
+    }
+    const source = mapLayer.getSource()
+    const sourceTiles = source?.sourceTiles_
+    if (!sourceTiles) {
+      return
+    }
+    Object.values(sourceTiles).forEach(tile => {
+      if (tile.getState() !== TileState.LOADED) {
+        return
+      }
+      tile.getFeatures().forEach(feature => {
+        if (feature.get('mapbox-layer')?.id !== layerId) {
+          return
+        }
+        const fid = idProperty ? feature.get(idProperty) : feature.getId()
+        if (String(fid) !== String(featureId)) {
+          return
+        }
+        fragments.push(renderFeatureToGeoJSON(feature))
+      })
+    })
+  })
+
+  return fragments
+}

package/rollup.esm.mjs

@@ -290,6 +290,12 @@ const ALL_BUILDS = [
     outDir: 'plugins/beta/draw-es/dist/esm',
     manualChunks: (id) => { if (id.includes('/manifest')) return 'im-draw-es-plugin' }
   },
+  {
+    entryPath: './plugins/beta/draw-ol/src/index.js',
+    outDir: 'plugins/beta/draw-ol/dist/esm',
+    extraExternals: [/^ol\//],
+    manualChunks: (id) => { if (id.includes('/manifest')) return 'im-draw-ol-plugin' }
+  },
   {
     entryPath: './plugins/beta/frame/src/index.js',
     outDir: 'plugins/beta/frame/dist/esm',

package/src/App/controls/keyboardActions.js

@@ -50,7 +50,7 @@ export const createKeyboardActions = (mapProvider, announce, {
     },
 
     highlightNextLabel: (e) => {
-      if (!readMapText && mapProvider.highlightNextLabel) {
+      if (!readMapText || !mapProvider.highlightNextLabel) {
         return
       }
       const label = mapProvider.highlightNextLabel(e.key)
@@ -58,7 +58,7 @@ export const createKeyboardActions = (mapProvider, announce, {
     },
 
     highlightLabelAtCenter: () => {
-      if (!readMapText && mapProvider.highlightNextLabel) {
+      if (!readMapText || !mapProvider.highlightLabelAtCenter) {
         return
       }
       const label = mapProvider.highlightLabelAtCenter()

package/src/InteractiveMap/InteractiveMap.js

@@ -38,6 +38,8 @@ export default class InteractiveMap {
   _interfaceDetectorCleanup = null
   _hybridBehaviourCleanup = null
   _isHidden = false // tracks if map is hidden but preserved (hybrid mode)
+  _isClosingViaBack = false // prevents double history.back() while popstate is pending
+  _isLoading = false // prevents concurrent loadApp() calls
 
   /**
    * Create a new InteractiveMap instance.
@@ -103,12 +105,17 @@ export default class InteractiveMap {
   }
 
   _handleButtonClick (e) {
-    if (this.config.manageHistoryState) {
-      history.pushState({ isBack: true }, '', e.currentTarget.getAttribute('href'))
-    }
     if (this._isHidden) {
+      if (this.config.manageHistoryState) {
+        history.pushState({ isBack: true }, '', e.currentTarget.getAttribute('href'))
+      }
       this.showApp()
+    } else if (this._root) {
+      // app already open — no-op, no push
     } else {
+      if (this.config.manageHistoryState) {
+        history.pushState({ isBack: true }, '', e.currentTarget.getAttribute('href'))
+      }
       this.loadApp()
     }
   }
@@ -128,22 +135,35 @@ export default class InteractiveMap {
   }
 
   _handleExitClick () {
-    if (this.config.preserveStateOnClose) {
-      this.hideApp()
-    } else {
-      this.removeApp()
-    }
-
     if (!this.config.manageHistoryState) {
+      if (this.config.preserveStateOnClose) {
+        this.hideApp()
+      } else {
+        this.removeApp()
+      }
       return
     }
 
     // If this history entry was pushed by the map's open button, go back so the
     // ?mv= entry is preserved as a forward entry (browser forward re-opens the map).
-    // Otherwise (direct URL / bookmark), just strip the param in place.
+    // Don't close synchronously here — let the popstate handler (syncMapInstance →
+    // closeMap) do it. This prevents a race where the button becomes clickable before
+    // history.back() resolves, which would push a ghost ?mv= entry into history.
     if (history.state?.isBack) {
+      if (this._isClosingViaBack) {
+        return
+      }
+      this._isClosingViaBack = true
       history.back()
+      // Safety net: clear flag if popstate never fires (e.g. nothing to go back to)
+      setTimeout(() => { this._isClosingViaBack = false }, 1000)
     } else {
+      // Direct URL / bookmark: no popstate coming, so close immediately.
+      if (this.config.preserveStateOnClose) {
+        this.hideApp()
+      } else {
+        this.removeApp()
+      }
       const key = this.config.mapViewQueryParam
       const newUrl = this._removeMapParamFromUrl(location.href, key)
       history.replaceState(history.state, '', newUrl)
@@ -157,6 +177,11 @@ export default class InteractiveMap {
    * @returns {Promise<void>}
    */
   async loadApp () {
+    if (this._root || this._isLoading) {
+      return
+    }
+    this._isLoading = true
+
     if (this._openButton) {
       this._openButton.style.display = 'none'
     }
@@ -203,9 +228,12 @@ export default class InteractiveMap {
       updateDOMState(this)
       this.eventBus.emit(events.APP_OPENED, { statePreserved: false })
     } catch (err) {
+      this._openButton?.removeAttribute('style')
       renderError(this.rootEl, this.config.genericErrorText)
       console.error(err)
       throw err
+    } finally {
+      this._isLoading = false
     }
   }