@defra/interactive-map 0.0.40-alpha → 0.0.42-alpha

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

@@ -0,0 +1,18 @@
+import { siblingDrawLayerId } from './drawLayerBuckets.js'
+
+test('returns the .hot sibling for a .cold layer id', () => {
+  expect(siblingDrawLayerId('point-symbol.cold')).toBe('point-symbol.hot')
+})
+
+test('returns the .cold sibling for a .hot layer id', () => {
+  expect(siblingDrawLayerId('point-symbol.hot')).toBe('point-symbol.cold')
+})
+
+test('returns null for a layer id with no cold/hot suffix', () => {
+  expect(siblingDrawLayerId('field-parcels')).toBeNull()
+})
+
+test('does not false-positive on a layer id that merely contains "cold" or "hot" mid-string', () => {
+  expect(siblingDrawLayerId('coldstore-layer')).toBeNull()
+  expect(siblingDrawLayerId('hotfix-layer')).toBeNull()
+})

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

@@ -1,3 +1,5 @@
+import { siblingDrawLayerId } from './drawLayerBuckets.js'
+
 const ICON_IMAGE = 'icon-image'
 
 const ACTIVE_PREFIX = 'active-highlight'
@@ -10,44 +12,55 @@ const usesSelectedStyle = (prefix) => prefix === SELECTED_PREFIX || prefix === A
 const getActiveImageId = (map, imageId) => map._activeSymbolImageMap?.[imageId] ?? null
 const getSelectedImageId = (map, imageId) => map._selectedSymbolImageMap?.[imageId] ?? null
 
-const groupFeaturesBySource = (map, selectedFeatures) => {
-  const featuresBySource = {}
-
-  selectedFeatures?.forEach(({ featureId, layerId, idProperty, geometry }) => {
-    const layer = map.getLayer(layerId)
+// Grouped by layerId, not sourceId: mapbox-gl-draw stores every geometry type in the same
+// cold/hot sources, so a point (symbol layer) and a polygon (fill layer) selected together
+// share a source — grouping by source would collapse them into one group that can only
+// resolve one geometry-type path, silently dropping the other's highlight.
+//
+// A selection's recorded layerId can also go stale if the feature later moves to its cold/hot
+// sibling bucket — see drawLayerBuckets.js.
+const addFeatureUnderLayer = (map, featuresByLayer, layerId, { featureId, idProperty, geometry }) => {
+  const layer = map.getLayer(layerId)
+  if (!layer) {
+    return
+  }
 
-    if (!layer) {
-      return
+  if (!featuresByLayer[layerId]) {
+    featuresByLayer[layerId] = {
+      ids: new Set(),
+      fillIds: new Set(),
+      idProperty,
+      sourceId: layer.source,
+      hasFillGeometry: false
     }
+  }
 
-    const sourceId = layer.source
+  if (geometry && (geometry.type === 'Polygon' || geometry.type === 'MultiPolygon')) {
+    featuresByLayer[layerId].hasFillGeometry = true
+    featuresByLayer[layerId].fillIds.add(featureId)
+  }
 
-    if (!featuresBySource[sourceId]) {
-      featuresBySource[sourceId] = {
-        ids: new Set(),
-        fillIds: new Set(),
-        idProperty,
-        layerId,
-        hasFillGeometry: false
-      }
-    }
+  featuresByLayer[layerId].ids.add(featureId)
+}
 
-    // Track whether any feature on this source is a polygon
-    if (geometry && (geometry.type === 'Polygon' || geometry.type === 'MultiPolygon')) {
-      featuresBySource[sourceId].hasFillGeometry = true
-      featuresBySource[sourceId].fillIds.add(featureId)
-    }
+const groupFeaturesByLayer = (map, selectedFeatures) => {
+  const featuresByLayer = {}
 
-    featuresBySource[sourceId].ids.add(featureId)
+  selectedFeatures?.forEach((feature) => {
+    addFeatureUnderLayer(map, featuresByLayer, feature.layerId, feature)
+    const sibling = siblingDrawLayerId(feature.layerId)
+    if (sibling) {
+      addFeatureUnderLayer(map, featuresByLayer, sibling, feature)
+    }
   })
 
-  return featuresBySource
+  return featuresByLayer
 }
 
-const cleanupStaleSources = (map, previousSources, currentSources, prefix) => {
-  previousSources.forEach(src => {
-    if (!currentSources.has(src)) {
-      const base = `${prefix}-${src}`
+const cleanupStaleLayers = (map, previousLayerIds, currentLayerIds, prefix) => {
+  previousLayerIds.forEach(layerId => {
+    if (!currentLayerIds.has(layerId)) {
+      const base = `${prefix}-${layerId}`
       ;[`${base}-fill`, `${base}-line`, `${base}-symbol`].forEach(id => {
         if (map.getLayer(id)) {
           map.setFilter(id, ['==', 'id', ''])
@@ -57,9 +70,9 @@ const cleanupStaleSources = (map, previousSources, currentSources, prefix) => {
   })
 }
 
-const clearPrefixSources = (map, prefix) => {
+const clearPrefixLayers = (map, prefix) => {
   const key = `_${prefix.replaceAll('-', '')}Sources`
-  cleanupStaleSources(map, map[key] || new Set(), new Set(), prefix)
+  cleanupStaleLayers(map, map[key] || new Set(), new Set(), prefix)
   map[key] = new Set()
 }
 
@@ -82,6 +95,9 @@ const applyHighlightLayer = (map, id, type, sourceId, srcLayer, paint, filter) =
 }
 
 const applySymbolHighlightLayer = (map, id, sourceId, srcLayer, originalLayerId, imageId, filter) => {
+  // icon-offset only exists on layers needing anchor precision correction (draw's point-symbol
+  // layer) — read off the original layer, omitted when absent.
+  const iconOffset = map.getLayoutProperty(originalLayerId, 'icon-offset')
   if (!map.getLayer(id)) {
     map.addLayer({
       id,
@@ -91,11 +107,15 @@ const applySymbolHighlightLayer = (map, id, sourceId, srcLayer, originalLayerId,
       layout: {
         [ICON_IMAGE]: imageId,
         'icon-anchor': map.getLayoutProperty(originalLayerId, 'icon-anchor') ?? 'center',
+        ...(iconOffset !== undefined && { 'icon-offset': iconOffset }),
         'icon-allow-overlap': true
       }
     })
   }
   map.setLayoutProperty(id, ICON_IMAGE, imageId)
+  if (iconOffset !== undefined) {
+    map.setLayoutProperty(id, 'icon-offset', iconOffset)
+  }
   map.setFilter(id, filter)
   map.moveLayer(id)
 }
@@ -115,8 +135,16 @@ const calculateBounds = (LngLatBounds, renderedFeatures) => {
   return [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()]
 }
 
+// Draw's point-symbol layer has a per-feature data-driven icon-image, so there's no single
+// shared image id to reverse-map — pointSymbolImages.js precomputes each point's own active/
+// selected variant as a property, and the highlight layer just reads that directly.
 const applySymbolGeomHighlight = (map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId) => {
   const imageId = map.getLayoutProperty(layerId, ICON_IMAGE)
+  if (Array.isArray(imageId)) {
+    const property = getSymbolImageId === getActiveImageId ? 'user_symbolActiveImageId' : 'user_symbolSelectedImageId'
+    applySymbolHighlightLayer(map, `${base}-symbol`, sourceId, srcLayer, layerId, ['get', property], filter)
+    return
+  }
   const symbolImageId = getSymbolImageId(map, imageId)
   if (symbolImageId) {
     applySymbolHighlightLayer(map, `${base}-symbol`, sourceId, srcLayer, layerId, symbolImageId, filter)
@@ -161,26 +189,23 @@ const applyLineHighlight = (map, base, sourceId, srcLayer, lineColor, lineWidth,
   applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, { 'line-color': lineColor, 'line-width': lineWidth }, filter)
 }
 
-const applySymbolHighlight = (map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId) => {
-  applySymbolGeomHighlight(map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId)
-}
-
-// Orchestrates highlight layers for a single source. prefix drives which visual style is used:
+// Orchestrates highlight layers for a single layer. prefix drives which visual style is used:
 //   active-highlight        → yellow active ring (stroke only)
 //   active-highlight-inner  → black thin ring drawn on top of active
 //   selected-highlight      → black thin ring + fill for polygon features
-const applySourceHighlight = (map, sourceId, featuresBySource, stylesMap, prefix, getSymbolImageId) => {
-  const { ids, fillIds, idProperty, layerId, hasFillGeometry } = featuresBySource[sourceId]
+const applyLayerHighlight = (map, layerId, featuresByLayer, stylesMap, prefix, getSymbolImageId) => {
+  const { ids, fillIds, idProperty, sourceId, hasFillGeometry } = featuresByLayer[layerId]
   const baseLayer = map.getLayer(layerId)
+  // Only the recorded layerId is registered in stylesMap — falls back to its cold/hot sibling
+  // (same drawn layer, identical styling) rather than requiring both to be registered.
+  const style = stylesMap[layerId] ?? stylesMap[siblingDrawLayerId(layerId)]
 
-  if (!baseLayer || !stylesMap[layerId]) {
+  if (!baseLayer || !style) {
     return
   }
-
-  const style = stylesMap[layerId]
   const srcLayer = baseLayer.sourceLayer
   const geom = hasFillGeometry ? 'fill' : baseLayer.type
-  const base = `${prefix}-${sourceId}`
+  const base = `${prefix}-${layerId}`
   const { fill } = style
   const isSelected = prefix === SELECTED_PREFIX
   const selectedStyle = usesSelectedStyle(prefix)
@@ -202,7 +227,7 @@ const applySourceHighlight = (map, sourceId, featuresBySource, stylesMap, prefix
       applyLineHighlight(map, base, sourceId, srcLayer, lineColor, lineWidth, filter)
       break
     case 'symbol':
-      applySymbolHighlight(map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId)
+      applySymbolGeomHighlight(map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId)
       break
     default:
       break
@@ -210,16 +235,16 @@ const applySourceHighlight = (map, sourceId, featuresBySource, stylesMap, prefix
 }
 
 const applyFeatureHighlights = (map, features, stylesMap, prefix, getSymbolImageId) => {
-  const featuresBySource = groupFeaturesBySource(map, features)
-  const currentSources = new Set(Object.keys(featuresBySource))
+  const featuresByLayer = groupFeaturesByLayer(map, features)
+  const currentLayerIds = new Set(Object.keys(featuresByLayer))
   const storageKey = `_${prefix.replaceAll('-', '')}Sources`
-  const previousSources = map[storageKey] || new Set()
+  const previousLayerIds = map[storageKey] || new Set()
 
-  cleanupStaleSources(map, previousSources, currentSources, prefix)
-  map[storageKey] = currentSources
-  currentSources.forEach(sourceId => applySourceHighlight(map, sourceId, featuresBySource, stylesMap, prefix, getSymbolImageId))
+  cleanupStaleLayers(map, previousLayerIds, currentLayerIds, prefix)
+  map[storageKey] = currentLayerIds
+  currentLayerIds.forEach(layerId => applyLayerHighlight(map, layerId, featuresByLayer, stylesMap, prefix, getSymbolImageId))
 
-  return featuresBySource
+  return featuresByLayer
 }
 
 /**
@@ -247,21 +272,21 @@ export function updateHighlightedFeatures ({ LngLatBounds, map, selectedFeatures
     // Black selected stroke on top of yellow active (mirrors resolveActive for symbols)
     applyFeatureHighlights(map, activeFeatures, stylesMap, ACTIVE_INNER_PREFIX, getSelectedImageId)
   } else {
-    clearPrefixSources(map, ACTIVE_PREFIX)
-    clearPrefixSources(map, ACTIVE_INNER_PREFIX)
+    clearPrefixLayers(map, ACTIVE_PREFIX)
+    clearPrefixLayers(map, ACTIVE_INNER_PREFIX)
   }
 
   // Selection features
-  let featuresBySource = {}
+  let featuresByLayer = {}
   if (selectedFeatures?.length) {
-    featuresBySource = applyFeatureHighlights(map, selectedFeatures, stylesMap, SELECTED_PREFIX, getSelectedImageId)
+    featuresByLayer = applyFeatureHighlights(map, selectedFeatures, stylesMap, SELECTED_PREFIX, getSelectedImageId)
   } else {
-    clearPrefixSources(map, SELECTED_PREFIX)
+    clearPrefixLayers(map, SELECTED_PREFIX)
   }
 
   // Bounds only from selected features
   const renderedFeatures = []
-  Object.entries(featuresBySource).forEach(([, { ids, idProperty, layerId }]) => {
+  Object.entries(featuresByLayer).forEach(([layerId, { ids, idProperty }]) => {
     renderedFeatures.push(
       ...map
         .queryRenderedFeatures({ layers: [layerId] })

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

@@ -54,7 +54,7 @@ describe('Highlighting Utils — active (cursor) fill and line', () => {
       if (id.includes('stale')) { return {} }
       if (id === 'l1') { return { source: 's1', type: 'fill' } }
       if (id === 'l2') { return { source: 's2', type: 'line' } }
-      if (id === 'active-highlight-s2-fill') { return {} }
+      if (id === 'active-highlight-l2-fill') { return {} }
       return null
     })
 
@@ -62,19 +62,19 @@ describe('Highlighting Utils — active (cursor) fill and line', () => {
 
     expect(map.setFilter).toHaveBeenCalledWith('active-highlight-stale-fill', EMPTY_FILTER)
     expect(map.setFilter).toHaveBeenCalledWith(STALE_SYMBOL_LAYER, EMPTY_FILTER)
-    expect(map.setFilter).toHaveBeenCalledWith('active-highlight-s2-fill', EMPTY_FILTER)
-    expect(map.setFilter).toHaveBeenCalledWith('active-highlight-s2-line', expect.arrayContaining([['get', 'customId']]))
+    expect(map.setFilter).toHaveBeenCalledWith('active-highlight-l2-fill', EMPTY_FILTER)
+    expect(map.setFilter).toHaveBeenCalledWith('active-highlight-l2-line', expect.arrayContaining([['get', 'customId']]))
   })
 
   test('null _activehighlightSources falls back to empty set; line geom skips absent fill layer', () => {
     map._activehighlightSources = null
     map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null) // NOSONAR
     updateHighlightedFeatures({ LngLatBounds, map, activeFeatures: [{ featureId: 1, layerId: 'l1' }], stylesMap: { l1: { stroke: 'red' } } })
-    expect(map.setFilter).not.toHaveBeenCalledWith('active-highlight-s1-fill', expect.anything())
+    expect(map.setFilter).not.toHaveBeenCalledWith('active-highlight-l1-fill', expect.anything())
   })
 
-  test('persistent source skips cleanup; missing stale layers skip setFilter', () => {
-    map._activehighlightSources = new Set(['stale', 's1'])
+  test('persistent layer skips cleanup; missing stale layers skip setFilter', () => {
+    map._activehighlightSources = new Set(['stale', 'l1'])
     map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null) // NOSONAR
     updateHighlightedFeatures({ LngLatBounds, map, activeFeatures: [{ featureId: 1, layerId: 'l1' }], stylesMap: { l1: { stroke: 'red' } } })
     expect(map.setFilter).not.toHaveBeenCalledWith(expect.stringContaining('stale'), expect.anything())
@@ -85,10 +85,10 @@ describe('Highlighting Utils — active (cursor) fill and line', () => {
     const stylesMap = { l1: { stroke: 'yellow', selectionStroke: 'black', strokeWidth: 3, activeStrokeWidth: 9 } }
     updateHighlightedFeatures({ LngLatBounds, map, activeFeatures: [{ featureId: 1, layerId: 'l1' }], stylesMap })
 
-    const activeColorCall = map.setPaintProperty.mock.calls.find(c => c[0] === 'active-highlight-s1-line' && c[1] === LINE_COLOR)
+    const activeColorCall = map.setPaintProperty.mock.calls.find(c => c[0] === 'active-highlight-l1-line' && c[1] === LINE_COLOR)
     expect(activeColorCall?.[2]).toBe('yellow')
 
-    const overlayColorCall = map.setPaintProperty.mock.calls.find(c => c[0] === 'active-highlight-inner-s1-line' && c[1] === LINE_COLOR)
+    const overlayColorCall = map.setPaintProperty.mock.calls.find(c => c[0] === 'active-highlight-inner-l1-line' && c[1] === LINE_COLOR)
     expect(overlayColorCall?.[2]).toBe('black')
   })
 
@@ -123,8 +123,8 @@ describe('Highlighting Utils — selected fill and line', () => {
     })
     updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures: SELECTED_FEATURES, stylesMap: STYLES })
     expect(map.setFilter).toHaveBeenCalledWith(SEL_STALE_SYMBOL_LAYER, EMPTY_FILTER)
-    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({ id: 'selected-highlight-s1-line' }))
-    const linePaintCall = map.setPaintProperty.mock.calls.find(c => c[0] === 'selected-highlight-s1-line' && c[1] === LINE_COLOR)
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({ id: 'selected-highlight-l1-line' }))
+    const linePaintCall = map.setPaintProperty.mock.calls.find(c => c[0] === 'selected-highlight-l1-line' && c[1] === LINE_COLOR)
     expect(linePaintCall).toBeTruthy()
     expect(linePaintCall[2]).toBe('#ffdd00')
   })
@@ -169,11 +169,11 @@ describe('Highlighting Utils — layer management', () => {
     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 === 'active-highlight-s1-line') { return {} }
+      if (id === 'active-highlight-l1-line') { return {} }
       return null
     })
     updateHighlightedFeatures({ LngLatBounds, map, activeFeatures: [{ featureId: 1, layerId: 'l1' }, { featureId: 2, layerId: 'l2' }], stylesMap: { l1: { stroke: 'blue' }, l2: { stroke: 'green' } } })
-    // active-highlight-s1-line reused; active-highlight-s2-line, active-highlight-inner-s1-line, active-highlight-inner-s2-line are new
+    // active-highlight-l1-line reused; active-highlight-l2-line, active-highlight-inner-l1-line, active-highlight-inner-l2-line are new
     expect(map.addLayer).toHaveBeenCalledTimes(3)
     expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({ 'source-layer': 'tiles' }))
   })
@@ -187,7 +187,7 @@ describe('Highlighting Utils — layer management', () => {
 
 describe('Highlighting Utils — symbol layers (active cursor)', () => {
   const ACTIVE_IMAGE = 'symbol-act-abc123'
-  const HIGHLIGHT_LAYER = 'active-highlight-s1-symbol'
+  const HIGHLIGHT_LAYER = 'active-highlight-l1-symbol'
   const ICON_IMAGE = 'icon-image'
   const ICON_ANCHOR = 'icon-anchor'
   const POINT_FEATURE = { featureId: 1, layerId: 'l1', geometry: { type: 'Point' } }
@@ -258,6 +258,41 @@ describe('Highlighting Utils — symbol layers (active cursor)', () => {
     expect(map.addLayer).not.toHaveBeenCalled()
   })
 
+  test('copies icon-offset from the original layer when present (draw points need it, datasets do not)', () => {
+    map.getLayoutProperty.mockImplementation((_id, prop) => { // NOSONAR
+      if (prop === ICON_IMAGE) { return SYMBOL_IMAGE }
+      if (prop === 'icon-offset') { return [0, 4.4] }
+      return null
+    })
+    run()
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      layout: expect.objectContaining({ 'icon-offset': [0, 4.4] })
+    }))
+    expect(map.setLayoutProperty).toHaveBeenCalledWith(HIGHLIGHT_LAYER, 'icon-offset', [0, 4.4])
+  })
+
+  test('omits icon-offset entirely when the original layer has none', () => {
+    map.getLayoutProperty.mockImplementation((_id, prop) => (prop === ICON_IMAGE ? SYMBOL_IMAGE : undefined)) // NOSONAR
+    run()
+    const call = map.addLayer.mock.calls[0][0]
+    expect(call.layout).not.toHaveProperty('icon-offset')
+    expect(map.setLayoutProperty).not.toHaveBeenCalledWith(HIGHLIGHT_LAYER, 'icon-offset', expect.anything())
+  })
+
+  // Draw's point-symbol layer has a per-feature data-driven icon-image (each point can carry
+  // a different symbol config) — the highlight layer must reference the SAME per-feature
+  // expression against the precomputed symbolActiveImageId/symbolSelectedImageId property
+  // (pointSymbolImages.js) rather than reverse-mapping a single shared id.
+  test('references the per-feature symbolActiveImageId property when icon-image is a data-driven expression', () => {
+    map.getLayoutProperty.mockImplementation((_id, prop) => // NOSONAR
+      prop === ICON_IMAGE ? ['get', 'user_symbolImageId'] : null)
+    run()
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      layout: expect.objectContaining({ [ICON_IMAGE]: ['get', 'user_symbolActiveImageId'] })
+    }))
+    expect(map.setLayoutProperty).toHaveBeenCalledWith(HIGHLIGHT_LAYER, ICON_IMAGE, ['get', 'user_symbolActiveImageId'])
+  })
+
   test('cleans up stale symbol highlight layer', () => {
     map._activehighlightSources = new Set(['stale'])
     map.getLayer.mockImplementation(id => id === STALE_SYMBOL_LAYER ? { type: 'symbol' } : null) // NOSONAR
@@ -268,7 +303,7 @@ describe('Highlighting Utils — symbol layers (active cursor)', () => {
 
 describe('Highlighting Utils — symbol layers (committed selection)', () => {
   const SELECTED_IMAGE = 'symbol-sel-abc123'
-  const SEL_HIGHLIGHT_LAYER = 'selected-highlight-s1-symbol'
+  const SEL_HIGHLIGHT_LAYER = 'selected-highlight-l1-symbol'
   const ICON_IMAGE = 'icon-image'
   const POINT_FEATURE = { featureId: 1, layerId: 'l1', geometry: { type: 'Point' } }
 
@@ -298,6 +333,15 @@ describe('Highlighting Utils — symbol layers (committed selection)', () => {
     run()
     expect(map.addLayer).not.toHaveBeenCalled()
   })
+
+  test('references the per-feature symbolSelectedImageId property when icon-image is a data-driven expression', () => {
+    map.getLayoutProperty.mockImplementation((_id, prop) => // NOSONAR
+      prop === ICON_IMAGE ? ['get', 'user_symbolImageId'] : null)
+    run()
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      layout: expect.objectContaining({ [ICON_IMAGE]: ['get', 'user_symbolSelectedImageId'] })
+    }))
+  })
 })
 
 // ─── fill-extrusion layers (3D buildings) ────────────────────────────────────
@@ -305,7 +349,7 @@ describe('Highlighting Utils — symbol layers (committed selection)', () => {
 describe('Highlighting Utils — fill-extrusion layers', () => {
   const LAYER_ID = 'buildings 3D'
   const STYLES = { [LAYER_ID]: { stroke: '#aaa', selectionStroke: '#0073cc', strokeWidth: 3, activeStrokeWidth: 6 } }
-  const LINE_LAYER_ID = 'selected-highlight-composite-line'
+  const LINE_LAYER_ID = 'selected-highlight-buildings 3D-line'
 
   let map
 
@@ -409,12 +453,12 @@ describe('Highlighting Utils — missing style entry', () => {
     const map = makeMap()
     let callCount = 0
     map.getLayer.mockImplementation((id) => {
-      // First call from groupFeaturesBySource - return a valid layer
+      // First call from groupFeaturesByLayer - return a valid layer
       if (id === 'l1' && callCount === 0) {
         callCount++
         return { source: 's1', type: 'line' }
       }
-      // Subsequent calls from applySourceHighlight - return null to trigger early return
+      // Subsequent calls from applyLayerHighlight - return null to trigger early return
       return null
     })
 
@@ -448,3 +492,98 @@ describe('Highlighting Utils — missing style entry', () => {
     expect(map.addLayer).not.toHaveBeenCalled()
   })
 })
+
+// mapbox-gl-draw duplicates every one of its own layers into a `.cold`/`.hot` sibling pair,
+// each backed by its own source — a feature moves out of cold and into hot the instant any of
+// its own properties change, only cooling back down on a later render with nothing changed.
+// A selection payload's layerId (e.g. 'point-symbol.cold') is captured once, at selection time
+// — if the feature later moves to the sibling bucket, the recorded layer still exists (so a
+// naive "does the layer exist" check looks fine) but its source no longer holds the feature.
+describe('Highlighting Utils — mapbox-gl-draw cold/hot sibling layers', () => {
+  test('highlights a selected feature that has moved from its recorded .cold layer into the sibling .hot bucket', () => {
+    const map = makeMap()
+    map.getLayer.mockImplementation(id => { // NOSONAR
+      if (id === 'point-symbol.cold') { return { source: 'mapbox-gl-draw-cold', type: 'symbol' } }
+      if (id === 'point-symbol.hot') { return { source: 'mapbox-gl-draw-hot', type: 'symbol' } }
+      return null
+    })
+    map.getLayoutProperty.mockImplementation((id, prop) => // NOSONAR
+      prop === 'icon-image' ? SYMBOL_IMAGE : undefined)
+    map._selectedSymbolImageMap = { [SYMBOL_IMAGE]: 'symbol-sel-xyz' }
+
+    // The feature's own current geometry lives on the hot source (it moved there when its
+    // properties were last refreshed) — only stylesMap['point-symbol.cold'] is registered,
+    // matching how the demo only registers the .cold layerId for selectability.
+    updateHighlightedFeatures({
+      LngLatBounds,
+      map,
+      selectedFeatures: [{ featureId: 'p1', layerId: 'point-symbol.cold', geometry: { type: 'Point' } }],
+      stylesMap: { 'point-symbol.cold': { stroke: 'red', selectionStroke: 'black', strokeWidth: 2 } }
+    })
+
+    // A highlight layer gets created/filtered for BOTH the recorded source and its sibling —
+    // whichever one the feature actually lives in right now, this finds it.
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({ source: 'mapbox-gl-draw-cold' }))
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({ source: 'mapbox-gl-draw-hot' }))
+  })
+
+  test('does not touch a non-draw layer id that happens to not end in .cold/.hot', () => {
+    const map = makeMap()
+    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null) // NOSONAR
+
+    updateHighlightedFeatures({
+      LngLatBounds,
+      map,
+      selectedFeatures: [{ featureId: 1, layerId: 'l1' }],
+      stylesMap: { l1: { stroke: 'red', selectionStroke: 'black', strokeWidth: 2 } }
+    })
+
+    expect(map.getLayer).not.toHaveBeenCalledWith('l1.hot')
+    expect(map.getLayer).not.toHaveBeenCalledWith('l1.cold')
+  })
+})
+
+// mapbox-gl-draw stores every geometry type (point, polygon, line) in the same cold/hot
+// sources — a point and a polygon selected together share a source, even though they're
+// rendered by different layers (point-symbol vs fill-inactive). Grouping by source alone would
+// collapse both into one group that can only resolve one geometry-type path, silently dropping
+// whichever feature's highlight didn't win.
+describe('Highlighting Utils — multi-select across geometry types sharing a source', () => {
+  test('a selected point and a selected polygon sharing the same mapbox-gl-draw source both get their own highlight', () => {
+    const map = makeMap()
+    map.getLayer.mockImplementation(id => { // NOSONAR
+      if (id === 'point-symbol.cold') { return { source: 'mapbox-gl-draw-cold', type: 'symbol' } }
+      if (id === 'fill-inactive.cold') { return { source: 'mapbox-gl-draw-cold', type: 'fill' } }
+      return null
+    })
+    map.getLayoutProperty.mockImplementation((id, prop) => // NOSONAR
+      prop === 'icon-image' ? SYMBOL_IMAGE : undefined)
+    map._selectedSymbolImageMap = { [SYMBOL_IMAGE]: 'symbol-sel-xyz' }
+
+    updateHighlightedFeatures({
+      LngLatBounds,
+      map,
+      selectedFeatures: [
+        { featureId: 'pt1', layerId: 'point-symbol.cold', geometry: { type: 'Point' } },
+        { featureId: 'poly1', layerId: 'fill-inactive.cold', geometry: { type: 'Polygon' } }
+      ],
+      stylesMap: {
+        'point-symbol.cold': { stroke: 'red', selectionStroke: 'black', strokeWidth: 2 },
+        'fill-inactive.cold': { stroke: 'red', selectionStroke: 'black', fill: 'blue', strokeWidth: 2 }
+      }
+    })
+
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      id: 'selected-highlight-point-symbol.cold-symbol',
+      type: 'symbol'
+    }))
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      id: 'selected-highlight-fill-inactive.cold-fill',
+      type: 'fill'
+    }))
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      id: 'selected-highlight-fill-inactive.cold-line',
+      type: 'line'
+    }))
+  })
+})

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

@@ -1,16 +1,19 @@
-/**
- * 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
- */
+import { siblingDrawLayerId } from './drawLayerBuckets.js'
+
+// layerIds is a config-derived list, built once and never refreshed as features move between
+// mapbox-gl-draw's cold/hot buckets (see drawLayerBuckets.js) — adding each sibling keeps a
+// query finding a feature that has since moved to the other bucket.
+const expandDrawLayerSiblings = (layerIds) => {
+  const expanded = new Set(layerIds)
+  layerIds.forEach(id => {
+    const sibling = siblingDrawLayerId(id)
+    if (sibling) {
+      expanded.add(sibling)
+    }
+  })
+  return [...expanded]
+}
+
 const splitLayers = (map, layerIds) => {
   const lineLayers = []
   const otherLayers = []
@@ -29,6 +32,19 @@ const splitLayers = (map, layerIds) => {
   return { lineLayers, otherLayers }
 }
 
+/**
+ * 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
+ */
 export const setupHoverCursor = (map, layerIds, prevHandler) => {
   const canvas = map.getCanvas()
 
@@ -42,7 +58,7 @@ export const setupHoverCursor = (map, layerIds, prevHandler) => {
   }
 
   const handler = (e) => {
-    const existingLayers = layerIds.filter(id => map.getLayer(id))
+    const existingLayers = expandDrawLayerSiblings(layerIds).filter(id => map.getLayer(id))
     if (existingLayers.length === 0) {
       canvas.style.cursor = ''
       return

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

@@ -127,4 +127,39 @@ describe('setupHoverCursor', () => {
       { layers: ['hedge-stroke'] }
     )
   })
+
+  /* ------------------------------------------------------------------ */
+  /* mapbox-gl-draw cold/hot sibling layers                              */
+  /* ------------------------------------------------------------------ */
+
+  // mapbox-gl-draw moves a feature out of its `.cold` layer/source into a `.hot` sibling the
+  // instant any of its own properties change — only registering the config's recorded
+  // '.cold' id would otherwise mean the cursor stops recognising a feature the moment it's
+  // moved, only recovering once something else happens to settle it back.
+  it('queries a .cold layerId\'s .hot sibling too, and detects a hit that only the sibling has', () => {
+    const canvas = { style: { cursor: '' } }
+    const map = {
+      ...makeMap({ 'point-symbol.cold': 'symbol', 'point-symbol.hot': 'symbol' }, []),
+      getCanvas: () => canvas,
+      queryRenderedFeatures: jest.fn((_point, { layers }) =>
+        layers.includes('point-symbol.hot') ? [{ id: 'p1' }] : [])
+    }
+    const handler = setupHoverCursor(map, ['point-symbol.cold'], null)
+    move(handler)
+    expect(map.queryRenderedFeatures).toHaveBeenCalledWith(
+      expect.objectContaining({ x: 10, y: 10 }),
+      { layers: expect.arrayContaining(['point-symbol.cold', 'point-symbol.hot']) }
+    )
+    expect(canvas.style.cursor).toBe('pointer')
+  })
+
+  it('does not add a sibling for a layer id with no cold/hot suffix', () => {
+    const map = makeMap({ 'field-parcels': 'fill' }, [])
+    const handler = setupHoverCursor(map, ['field-parcels'], null)
+    move(handler)
+    expect(map.queryRenderedFeatures).toHaveBeenCalledWith(
+      expect.objectContaining({ x: 10, y: 10 }),
+      { layers: ['field-parcels'] }
+    )
+  })
 })

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

@@ -1,6 +1,6 @@
 import { injectColors, getEffectivePixelRatio } from '../../../../src/utils/patternUtils.js'
 import { getValueForStyle } from '../../../../src/utils/getValueForStyle.js'
-import { rasteriseToImageData } from './rasteriseToImageData.js'
+import { rasteriseToImageData } from '../../../../src/utils/rasteriseToImageData.js'
 
 // Module-level cache: imageId → ImageData. Avoids re-rasterising identical patterns.
 const imageDataCache = new Map()