@defra/interactive-map 0.0.17-alpha → 0.0.18-alpha

package/providers/maplibre/src/appEvents.js

@@ -1,4 +1,5 @@
 export function attachAppEvents ({
+  mapProvider,
   map,
   events,
   eventBus
@@ -16,13 +17,19 @@ export function attachAppEvents ({
     map.setPixelRatio(pixelRatio)
   }
 
+  const handleSizeChange = ({ mapSize }) => {
+    mapProvider.mapSize = mapSize
+  }
+
   eventBus.on(events.MAP_SET_STYLE, handleSetMapStyle)
   eventBus.on(events.MAP_SET_PIXEL_RATIO, handleSetPixelRatio)
+  eventBus.on(events.MAP_SIZE_CHANGE, handleSizeChange)
 
   return {
     remove () {
       eventBus.off(events.MAP_SET_STYLE, handleSetMapStyle)
       eventBus.off(events.MAP_SET_PIXEL_RATIO, handleSetPixelRatio)
+      eventBus.off(events.MAP_SIZE_CHANGE, handleSizeChange)
     }
   }
 }

package/providers/maplibre/src/appEvents.test.js

@@ -1,7 +1,7 @@
 import { attachAppEvents } from './appEvents.js'
 
 describe('attachAppEvents', () => {
-  let map, eventBus, events
+  let map, mapProvider, eventBus, events
 
   beforeEach(() => {
     map = {
@@ -9,6 +9,7 @@ describe('attachAppEvents', () => {
       setPixelRatio: jest.fn(),
       once: jest.fn()
     }
+    mapProvider = { mapSize: null }
     eventBus = {
       on: jest.fn(),
       off: jest.fn(),
@@ -17,16 +18,18 @@ describe('attachAppEvents', () => {
     events = {
       MAP_SET_STYLE: 'map:set-style',
       MAP_SET_PIXEL_RATIO: 'map:set-pixel-ratio',
-      MAP_STYLE_CHANGE: 'map:stylechange'
+      MAP_STYLE_CHANGE: 'map:stylechange',
+      MAP_SIZE_CHANGE: 'map:size-change'
     }
   })
 
   it('attaches handlers and triggers correct map methods', () => {
-    const controller = attachAppEvents({ map, events, eventBus })
+    const controller = attachAppEvents({ mapProvider, map, events, eventBus })
 
     // Verify eventBus.on was called with correct handlers
     expect(eventBus.on).toHaveBeenCalledWith(events.MAP_SET_STYLE, expect.any(Function))
     expect(eventBus.on).toHaveBeenCalledWith(events.MAP_SET_PIXEL_RATIO, expect.any(Function))
+    expect(eventBus.on).toHaveBeenCalledWith(events.MAP_SIZE_CHANGE, expect.any(Function))
 
     // Extract the attached handlers
     const styleHandler = eventBus.on.mock.calls.find(c => c[0] === events.MAP_SET_STYLE)[1]
@@ -45,9 +48,20 @@ describe('attachAppEvents', () => {
     styleLoadCallback()
     expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_STYLE_CHANGE, { mapStyleId: 'outdoor' })
 
-    // Verify remove detaches handlers
+    // Verify remove detaches all handlers
     controller.remove()
     expect(eventBus.off).toHaveBeenCalledWith(events.MAP_SET_STYLE, styleHandler)
     expect(eventBus.off).toHaveBeenCalledWith(events.MAP_SET_PIXEL_RATIO, pixelHandler)
+    const sizeHandler = eventBus.on.mock.calls.find(c => c[0] === events.MAP_SIZE_CHANGE)[1]
+    expect(eventBus.off).toHaveBeenCalledWith(events.MAP_SIZE_CHANGE, sizeHandler)
+  })
+
+  it('updates mapProvider.mapSize when MAP_SIZE_CHANGE fires', () => {
+    attachAppEvents({ mapProvider, map, events, eventBus })
+
+    const sizeHandler = eventBus.on.mock.calls.find(c => c[0] === events.MAP_SIZE_CHANGE)[1]
+    sizeHandler({ mapSize: 'large' })
+
+    expect(mapProvider.mapSize).toBe('large')
   })
 })

package/providers/maplibre/src/maplibreProvider.js

@@ -4,6 +4,7 @@
  */
 
 import { DEFAULTS, supportedShortcuts } from './defaults.js'
+import { scaleFactor } from '../../../src/config/appConfig.js'
 import { cleanCanvas, applyPreventDefaultFix } from './utils/maplibreFixes.js'
 import { attachMapEvents } from './mapEvents.js'
 import { attachAppEvents } from './appEvents.js'
@@ -11,6 +12,9 @@ import { getAreaDimensions, getCardinalMove, getBboxFromGeoJSON, isGeometryObscu
 import { createMapLabelNavigator } from './utils/labels.js'
 import { updateHighlightedFeatures } from './utils/highlightFeatures.js'
 import { queryFeatures } from './utils/queryFeatures.js'
+import { setupHoverCursor } from './utils/hoverCursor.js'
+import { registerSymbols } from './utils/symbolImages.js'
+import { registerPatterns } from './utils/patternImages.js'
 
 /**
  * MapLibre GL JS implementation of the MapProvider interface.
@@ -113,6 +117,7 @@ export default class MapLibreProvider {
 
   /** Destroy the map and clean up resources. */
   destroyMap () {
+    this.setHoverCursor([])
     this.mapEvents?.remove()
     this.appEvents?.remove()
 
@@ -122,6 +127,19 @@ export default class MapLibreProvider {
     this.map.remove()
   }
 
+  /**
+   * Set pointer cursor on the map canvas when hovering over any of the given layer IDs.
+   * Call with an empty array to remove all hover cursor listeners.
+   *
+   * @param {string[]} layerIds
+   */
+  setHoverCursor (layerIds) {
+    if (!this.map) {
+      return
+    }
+    this._onHoverMove = setupHoverCursor(this.map, layerIds, this._onHoverMove)
+  }
+
   // ==========================
   // Side-effects
   // ==========================
@@ -283,6 +301,40 @@ export default class MapLibreProvider {
     return queryFeatures(this.map, point, options)
   }
 
+  /**
+   * Rasterise and register symbol images for the given pre-resolved symbol configs.
+   * Delegates to the shared symbol image utility so any plugin's MapLibre adapter can
+   * register symbols without importing provider internals directly.
+   *
+   * The pixel ratio is computed as device pixel ratio × map size scale factor so symbols
+   * are rasterised at the correct resolution for the current device DPI and map size.
+   *
+   * @param {Object[]} symbolConfigs - Flat list of datasets/merged-sublayers with a symbol config.
+   *   Callers are responsible for sublayer merging before passing configs here.
+   * @param {Object} mapStyle - Current map style config (provides id, selectedColor, haloColor)
+   * @param {Object} symbolRegistry
+   * @returns {Promise<void>}
+   */
+  async registerSymbols (symbolConfigs, mapStyle, symbolRegistry) {
+    const pixelRatio = (this.map.getPixelRatio() || 1) * (scaleFactor[this.mapSize] || 1)
+    return registerSymbols(this.map, symbolConfigs, mapStyle, symbolRegistry, pixelRatio)
+  }
+
+  /**
+   * Rasterise and register pattern images for the given pre-resolved pattern configs.
+   * Delegates to the shared pattern image utility so any plugin's MapLibre adapter can
+   * register patterns without importing provider internals directly.
+   *
+   * @param {Object[]} patternConfigs - Flat list of datasets/merged-sublayers with a pattern config.
+   *   Callers are responsible for sublayer merging before passing configs here.
+   * @param {string} mapStyleId
+   * @param {Object} patternRegistry
+   * @returns {Promise<void>}
+   */
+  async registerPatterns (patternConfigs, mapStyleId, patternRegistry) {
+    return registerPatterns(this.map, patternConfigs, mapStyleId, patternRegistry)
+  }
+
   // ==========================
   // Spatial helpers
   // ==========================

package/providers/maplibre/src/maplibreProvider.test.js

@@ -4,6 +4,8 @@ import { attachAppEvents } from './appEvents.js'
 import { createMapLabelNavigator } from './utils/labels.js'
 import { updateHighlightedFeatures } from './utils/highlightFeatures.js'
 import { queryFeatures } from './utils/queryFeatures.js'
+import { registerSymbols } from './utils/symbolImages.js'
+import { registerPatterns } from './utils/patternImages.js'
 import { getAreaDimensions, getCardinalMove, getResolution, getPaddedBounds, isGeometryObscured } from './utils/spatial.js'
 
 jest.mock('./defaults.js', () => ({
@@ -33,6 +35,8 @@ jest.mock('./utils/labels.js', () => ({
 }))
 jest.mock('./utils/highlightFeatures.js', () => ({ updateHighlightedFeatures: jest.fn(() => []) }))
 jest.mock('./utils/queryFeatures.js', () => ({ queryFeatures: jest.fn(() => []) }))
+jest.mock('./utils/symbolImages.js', () => ({ registerSymbols: jest.fn(() => Promise.resolve()) }))
+jest.mock('./utils/patternImages.js', () => ({ registerPatterns: jest.fn(() => Promise.resolve()) }))
 
 describe('MapLibreProvider', () => {
   let map, eventBus, maplibreModule, loadCallback
@@ -53,7 +57,11 @@ describe('MapLibreProvider', () => {
       unproject: jest.fn(() => ({ lng: 1, lat: 2 })),
       getCenter: jest.fn(() => ({ lng: 1.2345678, lat: 2.3456789 })),
       getZoom: jest.fn(() => 10),
-      getBounds: jest.fn(() => ({ toArray: jest.fn(() => [[0, 0], [1, 1]]) }))
+      getBounds: jest.fn(() => ({ toArray: jest.fn(() => [[0, 0], [1, 1]]) })),
+      getPixelRatio: jest.fn(() => 1),
+      getCanvas: jest.fn(() => ({ style: {} })),
+      getLayer: jest.fn(() => true),
+      queryRenderedFeatures: jest.fn(() => [])
     }
     eventBus = { emit: jest.fn() }
     maplibreModule = { Map: jest.fn(() => map), LngLatBounds: jest.fn() }
@@ -220,6 +228,102 @@ describe('MapLibreProvider', () => {
     })
   })
 
+  test('registerSymbols delegates to utility with map instance', async () => {
+    const p = makeProvider()
+    await doInitMap(p)
+    const configs = [{ symbol: 'pin' }]
+    const mapStyle = { id: 'test', selectedColor: '#0b0c0c' }
+    const registry = {}
+    await p.registerSymbols(configs, mapStyle, registry)
+    expect(registerSymbols).toHaveBeenCalledWith(map, configs, mapStyle, registry, expect.any(Number))
+  })
+
+  test('registerSymbols computes pixelRatio from getPixelRatio and mapSize scale factor', async () => {
+    const p = makeProvider()
+    await doInitMap(p)
+    map.getPixelRatio.mockReturnValue(2)
+    p.mapSize = 'medium' // scaleFactor['medium'] = 1.5
+    const registry = {}
+    await p.registerSymbols([], { id: 'test' }, registry)
+    expect(registerSymbols).toHaveBeenCalledWith(map, [], { id: 'test' }, registry, 3) // 2 * 1.5
+  })
+
+  test('registerSymbols falls back to pixelRatio 1 when getPixelRatio returns 0', async () => {
+    const p = makeProvider()
+    await doInitMap(p)
+    map.getPixelRatio.mockReturnValue(0)
+    p.mapSize = 'small' // scaleFactor['small'] = 1
+    const registry = {}
+    await p.registerSymbols([], { id: 'test' }, registry)
+    expect(registerSymbols).toHaveBeenCalledWith(map, [], { id: 'test' }, registry, 1) // (0 || 1) * 1
+  })
+
+  test('registerPatterns delegates to utility with map instance', async () => {
+    const p = makeProvider()
+    await doInitMap(p)
+    const configs = [{ fillPattern: 'dot' }]
+    const registry = {}
+    await p.registerPatterns(configs, 'test', registry)
+    expect(registerPatterns).toHaveBeenCalledWith(map, configs, 'test', registry)
+  })
+
+  describe('setHoverCursor', () => {
+    test('registers mousemove handler on the map when layerIds provided', async () => {
+      const p = makeProvider()
+      await doInitMap(p)
+      p.setHoverCursor(['layer-a'])
+      expect(map.on).toHaveBeenCalledWith('mousemove', expect.any(Function))
+    })
+
+    test('sets cursor to pointer when queryRenderedFeatures returns a hit', async () => {
+      const canvas = { style: {} }
+      map.getCanvas.mockReturnValue(canvas)
+      map.queryRenderedFeatures.mockReturnValue([{ id: 'f1' }])
+
+      const p = makeProvider()
+      await doInitMap(p)
+      p.setHoverCursor(['layer-a'])
+
+      const moveHandler = map.on.mock.calls.find(([e]) => e === 'mousemove')?.[1]
+      moveHandler({ point: { x: 10, y: 20 } })
+
+      expect(canvas.style.cursor).toBe('pointer')
+    })
+
+    test('clears cursor when queryRenderedFeatures returns no hit', async () => {
+      const canvas = { style: { cursor: 'pointer' } }
+      map.getCanvas.mockReturnValue(canvas)
+      map.queryRenderedFeatures.mockReturnValue([])
+
+      const p = makeProvider()
+      await doInitMap(p)
+      p.setHoverCursor(['layer-a'])
+
+      const moveHandler = map.on.mock.calls.find(([e]) => e === 'mousemove')?.[1]
+      moveHandler({ point: { x: 10, y: 20 } })
+
+      expect(canvas.style.cursor).toBe('')
+    })
+
+    test('removes mousemove handler and clears cursor when called with empty array', async () => {
+      const canvas = { style: { cursor: 'pointer' } }
+      map.getCanvas.mockReturnValue(canvas)
+
+      const p = makeProvider()
+      await doInitMap(p)
+      p.setHoverCursor(['layer-a'])
+      p.setHoverCursor([])
+
+      expect(map.off).toHaveBeenCalledWith('mousemove', expect.any(Function))
+      expect(canvas.style.cursor).toBe('')
+    })
+
+    test('does nothing when map is not initialised', () => {
+      const p = makeProvider()
+      expect(() => p.setHoverCursor(['layer-a'])).not.toThrow()
+    })
+  })
+
   test('label methods return null without labelNavigator; delegate when set', async () => {
     const p = makeProvider()
     await doInitMap(p)

package/providers/maplibre/src/utils/highlightFeatures.js

@@ -36,7 +36,7 @@ const cleanupStaleSources = (map, previousSources, currentSources) => {
   previousSources.forEach(src => {
     if (!currentSources.has(src)) {
       const base = `highlight-${src}`
-      const layers = [`${base}-fill`, `${base}-line`]
+      const layers = [`${base}-fill`, `${base}-line`, `${base}-symbol`]
       layers.forEach(id => {
         if (map.getLayer(id)) {
           map.setFilter(id, ['==', 'id', ''])
@@ -63,6 +63,25 @@ const applyHighlightLayer = (map, id, type, sourceId, srcLayer, paint, filter) =
   map.moveLayer(id)
 }
 
+const applySymbolHighlightLayer = (map, id, sourceId, srcLayer, originalLayerId, imageId, filter) => {
+  if (!map.getLayer(id)) {
+    map.addLayer({
+      id,
+      type: 'symbol',
+      source: sourceId,
+      ...(srcLayer && { 'source-layer': srcLayer }),
+      layout: {
+        'icon-image': imageId,
+        'icon-anchor': map.getLayoutProperty(originalLayerId, 'icon-anchor') ?? 'center',
+        'icon-allow-overlap': true
+      }
+    })
+  }
+  map.setLayoutProperty(id, 'icon-image', imageId)
+  map.setFilter(id, filter)
+  map.moveLayer(id)
+}
+
 const calculateBounds = (LngLatBounds, renderedFeatures) => {
   if (!renderedFeatures.length) {
     return null
@@ -78,9 +97,11 @@ const calculateBounds = (LngLatBounds, renderedFeatures) => {
   return [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()]
 }
 
+const getSelectedImageId = (map, imageId) => map._symbolImageMap?.[imageId] ?? null
+
 /**
  * Update highlighted features using pure filters.
- * Supports fill + line geometry, multi-source, cleanup, and bounds.
+ * Supports fill, line and symbol geometry, multi-source, cleanup, and bounds.
  */
 export function updateHighlightedFeatures ({ LngLatBounds, map, selectedFeatures, stylesMap }) {
   if (!map) {
@@ -106,21 +127,21 @@ export function updateHighlightedFeatures ({ LngLatBounds, map, selectedFeatures
     const geom = hasFillGeometry ? 'fill' : baseLayer.type
     const base = `highlight-${sourceId}`
 
-    const { stroke, strokeWidth, fill } = stylesMap[layerId]
-    // Use ['id'] for feature.id, ['get', idProperty] for properties
     const idExpression = idProperty ? ['get', idProperty] : ['id']
     const filter = ['in', idExpression, ['literal', [...ids]]]
-    const fillFilter = ['in', idExpression, ['literal', [...fillIds]]]
-
-    const linePaint = { 'line-color': stroke, 'line-width': strokeWidth }
 
     if (geom === 'fill') {
+      const { stroke, strokeWidth, fill } = stylesMap[layerId]
+      const fillFilter = ['in', idExpression, ['literal', [...fillIds]]]
+      const linePaint = { 'line-color': stroke, 'line-width': strokeWidth }
       // Only apply fill highlight to polygon features, not to any co-selected line features
       applyHighlightLayer(map, `${base}-fill`, 'fill', sourceId, srcLayer, { 'fill-color': fill }, fillFilter)
       applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, linePaint, filter)
     }
 
     if (geom === 'line') {
+      const { stroke, strokeWidth } = stylesMap[layerId]
+      const linePaint = { 'line-color': stroke, 'line-width': strokeWidth }
       // Clear any fill highlight from a previous polygon selection on the same source
       if (map.getLayer(`${base}-fill`)) {
         map.setFilter(`${base}-fill`, ['==', 'id', ''])
@@ -128,6 +149,14 @@ export function updateHighlightedFeatures ({ LngLatBounds, map, selectedFeatures
       applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, linePaint, filter)
     }
 
+    if (geom === 'symbol') {
+      const imageId = map.getLayoutProperty(layerId, 'icon-image')
+      const selectedImageId = getSelectedImageId(map, imageId)
+      if (selectedImageId) {
+        applySymbolHighlightLayer(map, `${base}-symbol`, sourceId, srcLayer, layerId, selectedImageId, filter)
+      }
+    }
+
     // Bounds only from rendered tiles
     renderedFeatures.push(
       ...map