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

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', ''])
@@ -60,6 +60,26 @@ const applyHighlightLayer = (map, id, type, sourceId, srcLayer, paint, filter) =
     map.setPaintProperty(id, prop, value)
   })
   map.setFilter(id, 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) => {
@@ -77,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) {
@@ -105,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', ''])
@@ -127,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

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

@@ -1,132 +1,190 @@
 import { updateHighlightedFeatures } from './highlightFeatures.js'
 
-describe('Highlighting Utils', () => {
+function lngLatBounds () {
+  this.coords = []
+  this.extend = (c) => this.coords.push(c)
+  this.getWest = () => Math.min(...this.coords.map(c => c[0]))
+  this.getSouth = () => Math.min(...this.coords.map(c => c[1]))
+  this.getEast = () => Math.max(...this.coords.map(c => c[0]))
+  this.getNorth = () => Math.max(...this.coords.map(c => c[1]))
+}
+
+const EMPTY_FILTER = ['==', 'id', '']
+const STALE_SYMBOL_LAYER = 'highlight-stale-symbol'
+
+const makeMap = (overrides = {}) => ({
+  _highlightedSources: new Set(),
+  getLayer: jest.fn(),
+  addLayer: jest.fn(),
+  moveLayer: jest.fn(),
+  setFilter: jest.fn(),
+  setPaintProperty: jest.fn(),
+  setLayoutProperty: jest.fn(),
+  getLayoutProperty: jest.fn(),
+  queryRenderedFeatures: jest.fn().mockReturnValue([]),
+  ...overrides
+})
+
+describe('Highlighting Utils — fill and line', () => {
   let map
-  const LngLatBounds = function () {
-    this.coords = []
-    this.extend = (c) => this.coords.push(c)
-    this.getWest = () => Math.min(...this.coords.map(c => c[0]))
-    this.getSouth = () => Math.min(...this.coords.map(c => c[1]))
-    this.getEast = () => Math.max(...this.coords.map(c => c[0]))
-    this.getNorth = () => Math.max(...this.coords.map(c => c[1]))
-  }
+
+  const ALL_BRANCHES_FEATURES = [
+    { featureId: 1, layerId: 'l1', geometry: { type: 'Polygon' } },
+    { featureId: 2, layerId: 'l1', geometry: { type: 'MultiPolygon' } },
+    { featureId: 3, layerId: 'invalid' },
+    { featureId: 4, layerId: 'l2', idProperty: 'customId', geometry: { type: 'Point' } }
+  ]
+
+  const ALL_BRANCHES_STYLES = { l1: { stroke: 'red', fill: 'blue' }, l2: { stroke: 'green' } }
 
   beforeEach(() => {
-    map = {
-      _highlightedSources: new Set(['stale']),
-      getLayer: jest.fn(),
-      addLayer: jest.fn(),
-      setFilter: jest.fn(),
-      setPaintProperty: jest.fn(),
-      queryRenderedFeatures: jest.fn()
-    }
+    map = makeMap({ _highlightedSources: new Set(['stale']) })
   })
 
   test('All branches', () => {
-    // Coverage for Line 93: Null map check
     expect(updateHighlightedFeatures({ map: null })).toBeNull()
 
-    map.getLayer.mockImplementation((id) => {
-      if (id.includes('stale')) return true // Coverage for Line 49
-      if (id === 'l1') return { source: 's1', type: 'fill' }
-      if (id === 'l2') return { source: 's2', type: 'line' }
-      if (id === 'highlight-s2-fill') return true // Coverage for Line 124
-      return null // Coverage for Line 13
+    map.getLayer.mockImplementation((id) => { // NOSONAR
+      if (id.includes('stale')) { return {} }
+      if (id === 'l1') { return { source: 's1', type: 'fill' } }
+      if (id === 'l2') { return { source: 's2', type: 'line' } }
+      if (id === 'highlight-s2-fill') { return {} }
+      return null
     })
 
-    const selectedFeatures = [
-      // Coverage for Lines 37-40: Polygon & MultiPolygon checks
-      { featureId: 1, layerId: 'l1', geometry: { type: 'Polygon' } },
-      { featureId: 2, layerId: 'l1', geometry: { type: 'MultiPolygon' } },
-      // Coverage for Line 13: Invalid layer
-      { featureId: 3, layerId: 'invalid' },
-      // Coverage for Line 116: idProperty exists
-      { featureId: 4, layerId: 'l2', idProperty: 'customId', geometry: { type: 'Point' } }
-    ]
-
-    const stylesMap = {
-      l1: { stroke: 'red', fill: 'blue' },
-      l2: { stroke: 'green' }
-    }
-
-    // Coverage for Lines 78-80: Recursive coordinate handling (numbers vs arrays)
+    const coordMax = 10
+    const coordMid = 5
     map.queryRenderedFeatures.mockReturnValue([
-      { id: 1, geometry: { coordinates: [10, 10] } }, // Simple point
-      { id: 2, properties: { customId: 4 }, geometry: { coordinates: [[0, 0], [5, 5]] } } // Nested
+      { id: 1, geometry: { coordinates: [coordMax, coordMax] } },
+      { id: 2, properties: { customId: 4 }, geometry: { coordinates: [[0, 0], [coordMid, coordMid]] } }
     ])
 
-    const bounds = updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures, stylesMap })
-
-    // Line 13 verify: map.getLayer returned null and function returned early
-    // Line 49-50 verify: Stale sources filtered out
-    expect(map.setFilter).toHaveBeenCalledWith('highlight-stale-fill', ['==', 'id', ''])
+    const bounds = updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures: ALL_BRANCHES_FEATURES, stylesMap: ALL_BRANCHES_STYLES })
 
-    // Line 124 verify: Clear fill highlight when switching to line geometry
-    expect(map.setFilter).toHaveBeenCalledWith('highlight-s2-fill', ['==', 'id', ''])
-
-    // Line 116 verify: Using ['get', idProperty]
+    expect(map.setFilter).toHaveBeenCalledWith('highlight-stale-fill', EMPTY_FILTER)
+    expect(map.setFilter).toHaveBeenCalledWith(STALE_SYMBOL_LAYER, EMPTY_FILTER)
+    expect(map.setFilter).toHaveBeenCalledWith('highlight-s2-fill', EMPTY_FILTER)
     expect(map.setFilter).toHaveBeenCalledWith('highlight-s2-line', expect.arrayContaining([['get', 'customId']]))
-
-    // Line 80-82 verify: Recursive LngLatBounds logic
     expect(bounds).toEqual([0, 0, 10, 10])
   })
 
-  test('undefined _highlightedSources falls back to empty set; line geom skips absent fill layer', () => {
-    // line 93: || new Set() fallback; line 124 false: no pre-existing fill to clear
-    map._highlightedSources = undefined
-    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null)
-    map.queryRenderedFeatures.mockReturnValue([])
-    updateHighlightedFeatures({
-      LngLatBounds,
-      map,
-      selectedFeatures: [{ featureId: 1, layerId: 'l1' }],
-      stylesMap: { l1: { stroke: 'red' } }
-    })
+  test('null _highlightedSources falls back to empty set; line geom skips absent fill layer', () => {
+    map._highlightedSources = null
+    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null) // NOSONAR
+    updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures: [{ featureId: 1, layerId: 'l1' }], stylesMap: { l1: { stroke: 'red' } } })
     expect(map.setFilter).not.toHaveBeenCalledWith('highlight-s1-fill', expect.anything())
   })
 
   test('persistent source skips cleanup; missing stale layers skip setFilter', () => {
-    // line 37 false: src IS in currentSources; line 41 false: getLayer returns null for stale layers
     map._highlightedSources = new Set(['stale', 's1'])
-    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null)
-    map.queryRenderedFeatures.mockReturnValue([])
-    updateHighlightedFeatures({
-      LngLatBounds,
-      map,
-      selectedFeatures: [{ featureId: 1, layerId: 'l1' }],
-      stylesMap: { l1: { stroke: 'red' } }
-    })
+    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null) // NOSONAR
+    updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures: [{ featureId: 1, layerId: 'l1' }], stylesMap: { l1: { stroke: 'red' } } })
     expect(map.setFilter).not.toHaveBeenCalledWith(expect.stringContaining('stale'), expect.anything())
   })
+})
+
+describe('Highlighting Utils — layer management', () => {
+  let map
+
+  beforeEach(() => {
+    map = makeMap({ _highlightedSources: new Set(['stale']) })
+  })
 
   test('reuses existing highlight layer; new layer spreads sourceLayer', () => {
-    // line 50 false: getLayer truthy → skip addLayer for s1
-    // line 55: srcLayer truthy → 'source-layer' spread in addLayer for s2
-    map.getLayer.mockImplementation(id => {
-      if (id === 'l1') return { source: 's1', type: 'line' }
-      if (id === 'l2') return { source: 's2', type: 'line', sourceLayer: 'tiles' }
-      if (id === 'highlight-s1-line') return true
+    map.getLayer.mockImplementation(id => { // NOSONAR
+      if (id === 'l1') { return { source: 's1', type: 'line' } }
+      if (id === 'l2') { return { source: 's2', type: 'line', sourceLayer: 'tiles' } }
+      if (id === 'highlight-s1-line') { return {} }
       return null
     })
-    map.queryRenderedFeatures.mockReturnValue([])
-    updateHighlightedFeatures({
-      LngLatBounds,
-      map,
-      selectedFeatures: [
-        { featureId: 1, layerId: 'l1' },
-        { featureId: 2, layerId: 'l2' }
-      ],
-      stylesMap: { l1: { stroke: 'blue' }, l2: { stroke: 'green' } }
-    })
+    updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures: [{ featureId: 1, layerId: 'l1' }, { featureId: 2, layerId: 'l2' }], stylesMap: { l1: { stroke: 'blue' }, l2: { stroke: 'green' } } })
     expect(map.addLayer).toHaveBeenCalledTimes(1)
     expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({ 'source-layer': 'tiles' }))
   })
 
-  test('Empty features coverage', () => {
-    // Coverage for Line 72: empty renderedFeatures
-    map.getLayer.mockReturnValue({ source: 's1', type: 'line' })
-    map.queryRenderedFeatures.mockReturnValue([])
-    const res = updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures: [], stylesMap: {} })
-    expect(res).toBeNull()
+  test('returns null when no rendered features match', () => {
+    expect(updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures: [], stylesMap: {} })).toBeNull()
+  })
+})
+
+describe('Highlighting Utils — symbol layers', () => {
+  const SYMBOL_IMAGE = 'symbol-abc123'
+  const SELECTED_IMAGE = 'symbol-sel-abc123'
+  const HIGHLIGHT_LAYER = 'highlight-s1-symbol'
+  const ICON_IMAGE = 'icon-image'
+  const ICON_ANCHOR = 'icon-anchor'
+  const POINT_FEATURE = { featureId: 1, layerId: 'l1', geometry: { type: 'Point' } }
+
+  let map
+
+  beforeEach(() => {
+    map = makeMap()
+    map._symbolImageMap = { [SYMBOL_IMAGE]: SELECTED_IMAGE }
+    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'symbol' } : null) // NOSONAR
+    map.getLayoutProperty.mockReturnValue(SYMBOL_IMAGE)
+  })
+
+  const run = (selectedFeatures = [POINT_FEATURE]) =>
+    updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures, stylesMap: { l1: {} } })
+
+  test('creates symbol highlight layer with selected image variant', () => {
+    run()
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      id: HIGHLIGHT_LAYER,
+      type: 'symbol',
+      layout: expect.objectContaining({ [ICON_IMAGE]: SELECTED_IMAGE })
+    }))
+    expect(map.setLayoutProperty).toHaveBeenCalledWith(HIGHLIGHT_LAYER, ICON_IMAGE, SELECTED_IMAGE)
+  })
+
+  test('reads icon-anchor from original layer', () => {
+    map.getLayoutProperty.mockImplementation((_id, prop) => { // NOSONAR
+      if (prop === ICON_IMAGE) { return SYMBOL_IMAGE }
+      if (prop === ICON_ANCHOR) { return 'bottom' }
+      return null
+    })
+    run()
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      layout: expect.objectContaining({ [ICON_ANCHOR]: 'bottom' })
+    }))
+  })
+
+  test('falls back to center anchor when icon-anchor is not set on original layer', () => {
+    map.getLayoutProperty.mockImplementation((_id, prop) => prop === ICON_IMAGE ? SYMBOL_IMAGE : null) // NOSONAR
+    run()
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      layout: expect.objectContaining({ [ICON_ANCHOR]: 'center' })
+    }))
+  })
+
+  test('spreads source-layer into symbol highlight layer for vector tile source', () => {
+    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'symbol', sourceLayer: 'points' } : null) // NOSONAR
+    run()
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({ 'source-layer': 'points' }))
+  })
+
+  test('reuses existing symbol highlight layer without re-adding', () => {
+    map.getLayer.mockImplementation(id => { // NOSONAR
+      if (id === 'l1') { return { source: 's1', type: 'symbol' } }
+      if (id === HIGHLIGHT_LAYER) { return { source: 's1', type: 'symbol' } }
+      return null
+    })
+    run()
+    expect(map.addLayer).not.toHaveBeenCalled()
+    expect(map.setLayoutProperty).toHaveBeenCalledWith(HIGHLIGHT_LAYER, ICON_IMAGE, SELECTED_IMAGE)
+  })
+
+  test('skips highlight when icon-image has no entry in _symbolImageMap', () => {
+    map.getLayoutProperty.mockReturnValue('symbol-abc123')
+    map._symbolImageMap = {} // no mapping registered
+    run()
+    expect(map.addLayer).not.toHaveBeenCalled()
+  })
+
+  test('cleans up stale symbol highlight layer', () => {
+    map._highlightedSources = new Set(['stale'])
+    map.getLayer.mockImplementation(id => id === STALE_SYMBOL_LAYER ? { type: 'symbol' } : null) // NOSONAR
+    run([])
+    expect(map.setFilter).toHaveBeenCalledWith(STALE_SYMBOL_LAYER, EMPTY_FILTER)
   })
 })

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

@@ -0,0 +1,61 @@
+/**
+ * Attaches a mousemove listener that changes the map cursor to a pointer when
+ * hovering over any of the specified layers.
+ *
+ * Line layers use a 10px tolerance bbox. Stroke layers that have a companion
+ * fill layer are skipped — the fill handles hover. Fill and symbol layers use
+ * exact point hit-testing.
+ *
+ * @param {Object} map - MapLibre map instance
+ * @param {string[]} layerIds - Layer IDs to watch
+ * @param {Function|null} prevHandler - Previous mousemove handler to remove
+ * @returns {Function|null} The new handler, or null if layerIds is empty
+ */
+const splitLayers = (map, layerIds) => {
+  const lineLayers = []
+  const otherLayers = []
+  for (const id of layerIds) {
+    const type = map.getLayer(id).type
+    if (type === 'line') {
+      const fillId = id.endsWith('-stroke') ? id.slice(0, -7) : null // NOSONAR
+      const hasFillCompanion = fillId !== null && layerIds.includes(fillId)
+      if (!hasFillCompanion) {
+        lineLayers.push(id)
+      }
+    } else {
+      otherLayers.push(id)
+    }
+  }
+  return { lineLayers, otherLayers }
+}
+
+export const setupHoverCursor = (map, layerIds, prevHandler) => {
+  const canvas = map.getCanvas()
+
+  if (prevHandler) {
+    map.off('mousemove', prevHandler)
+  }
+
+  if (!layerIds?.length) {
+    canvas.style.cursor = ''
+    return null
+  }
+
+  const handler = (e) => {
+    const existingLayers = layerIds.filter(id => map.getLayer(id))
+    if (existingLayers.length === 0) {
+      canvas.style.cursor = ''
+      return
+    }
+
+    const { lineLayers, otherLayers } = splitLayers(map, existingLayers)
+    const { x, y } = e.point
+    const bbox = [[x - 10, y - 10], [x + 10, y + 10]]
+    const lineHit = lineLayers.length > 0 && map.queryRenderedFeatures(bbox, { layers: lineLayers }).length > 0
+    const otherHit = otherLayers.length > 0 && map.queryRenderedFeatures(e.point, { layers: otherLayers }).length > 0
+    canvas.style.cursor = (lineHit || otherHit) ? 'pointer' : ''
+  }
+
+  map.on('mousemove', handler)
+  return handler
+}