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

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

@@ -0,0 +1,245 @@
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import VectorLayer from 'ol/layer/Vector.js'
+import VectorSource from 'ol/source/Vector.js'
+import Feature from 'ol/Feature.js'
+import GeoJSON from 'ol/format/GeoJSON.js'
+import Style from 'ol/style/Style.js'
+import Stroke from 'ol/style/Stroke.js'
+import Fill from 'ol/style/Fill.js'
+import { collectTileFragments } from './vtTileFragments.js'
+
+const CRS = 'EPSG:27700'
+const geoJsonFormat = new GeoJSON({ dataProjection: CRS, featureProjection: CRS })
+
+const HIGHLIGHT_MARKER = '_highlight'
+const HIGHLIGHT_Z = 999
+
+const buildHighlightStyles = (styleEntry, isActive) => {
+  if (!styleEntry) {
+    return []
+  }
+  const { stroke, selectionStroke, fill, strokeWidth, activeStrokeWidth } = styleEntry
+
+  if (isActive) {
+    return [
+      new Style({ stroke: new Stroke({ color: stroke, width: activeStrokeWidth }), zIndex: HIGHLIGHT_Z }),
+      new Style({ stroke: new Stroke({ color: selectionStroke, width: strokeWidth }), zIndex: HIGHLIGHT_Z + 1 })
+    ]
+  }
+
+  const styles = [new Style({ stroke: new Stroke({ color: selectionStroke, width: strokeWidth }), zIndex: HIGHLIGHT_Z })]
+  if (fill && fill !== 'transparent') {
+    styles.push(new Style({ fill: new Fill({ color: fill }), zIndex: HIGHLIGHT_Z }))
+  }
+  return styles
+}
+
+// ---------------------------------------------------------------------------
+// VectorTileLayer: style-function wrap
+// Evaluated per feature per tile at render time — automatically covers all
+// tiles including those that load after selection, matching MapLibre's
+// filter-based behaviour.
+// ---------------------------------------------------------------------------
+
+const buildFeatureKeyIndex = (features) => {
+  const keys = new Set()
+  const idProps = {} // styleLayerId → idProperty
+
+  for (const { layerId, featureId, idProperty } of features ?? []) {
+    keys.add(`${layerId}:${featureId}`)
+    if (idProperty) {
+      idProps[layerId] = idProperty
+    }
+  }
+
+  return { keys, idProps }
+}
+
+const wrapVtLayers = (map, selectedKeys, activeKeys, idPropsMap, stylesMap) => {
+  map.getLayers().forEach(layer => {
+    if (!(layer instanceof VectorTileLayer)) {
+      return
+    }
+
+    const hasSelection = selectedKeys.size > 0 || activeKeys.size > 0
+
+    if (!hasSelection) {
+      if (layer._highlightOriginalStyle) {
+        layer.setStyle(layer._highlightOriginalStyle)
+        delete layer._highlightOriginalStyle
+      }
+      return
+    }
+
+    if (!layer._highlightOriginalStyle) {
+      layer._highlightOriginalStyle = layer.getStyleFunction()
+    }
+    const orig = layer._highlightOriginalStyle
+
+    layer.setStyle((feature, resolution) => {
+      const base = orig(feature, resolution)
+      const styleLayerId = feature.get('mapbox-layer')?.id
+      if (!styleLayerId) {
+        return base
+      }
+
+      const idProp = idPropsMap[styleLayerId]
+      const fid = idProp ? feature.get(idProp) : feature.getId()
+      const key = `${styleLayerId}:${fid}`
+
+      const isActive = activeKeys.has(key)
+      const isSelected = !isActive && selectedKeys.has(key)
+      if (!isActive && !isSelected) {
+        return base
+      }
+
+      const highlightStyles = buildHighlightStyles(stylesMap?.[styleLayerId], isActive)
+      if (!highlightStyles.length) {
+        return base
+      }
+
+      const baseArr = base ? (Array.isArray(base) ? base : [base]) : []
+      return [...baseArr, ...highlightStyles]
+    })
+    // setStyle() calls layer.changed() internally — no source.changed() needed
+    // (source.changed() works but causes a visible flicker on selection)
+  })
+}
+
+// ---------------------------------------------------------------------------
+// VectorLayer: overlay approach
+// Non-tiled vector layers (e.g. the draw layer) have no tile-boundary issue,
+// so a simple overlay Feature works correctly and needs no style-wrap.
+// ---------------------------------------------------------------------------
+
+const getOrCreateHighlightLayer = (map) => {
+  let layer = null
+  map.getLayers().forEach(l => {
+    if (l.get(HIGHLIGHT_MARKER)) {
+      layer = l
+    }
+  })
+  if (!layer) {
+    layer = new VectorLayer({ source: new VectorSource(), zIndex: HIGHLIGHT_Z + 2 })
+    layer.set(HIGHLIGHT_MARKER, true)
+    map.addLayer(layer)
+  }
+  return layer
+}
+
+const addVectorHighlights = (source, features, isActive, stylesMap) => {
+  for (const { layerId, geometry } of features ?? []) {
+    if (!geometry) {
+      continue
+    }
+    const styles = buildHighlightStyles(stylesMap?.[layerId], isActive)
+    if (!styles.length) {
+      continue
+    }
+    const olFeature = new Feature({ geometry: geoJsonFormat.readGeometry(geometry) })
+    olFeature.setStyle(styles)
+    source.addFeature(olFeature)
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Bounds
+// ---------------------------------------------------------------------------
+
+const expandBoundsFromGeometry = (geometry, cb) => {
+  const { type, coordinates } = geometry
+  const visitCoord = ([x, y]) => cb(x, y)
+  const visitRing = (ring) => ring.forEach(visitCoord)
+
+  if (type === 'Point') {
+    visitCoord(coordinates)
+  } else if (type === 'MultiPoint' || type === 'LineString') {
+    coordinates.forEach(visitCoord)
+  } else if (type === 'MultiLineString' || type === 'Polygon') {
+    coordinates.forEach(visitRing)
+  } else if (type === 'MultiPolygon') {
+    coordinates.forEach(poly => poly.forEach(visitRing))
+  }
+}
+
+const resolveGeometries = (map, { layerId, featureId, idProperty, geometry }) => {
+  if (featureId != null) {
+    const fragments = collectTileFragments(map, layerId, featureId, idProperty)
+    if (fragments.length > 0) {
+      return fragments
+    }
+  }
+  return geometry ? [geometry] : []
+}
+
+const computeBounds = (geometries) => {
+  if (!geometries.length) {
+    return null
+  }
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const geometry of geometries) {
+    expandBoundsFromGeometry(geometry, (x, y) => {
+      if (x < minX) { minX = x }
+      if (y < minY) { minY = y }
+      if (x > maxX) { maxX = x }
+      if (y > maxY) { maxY = y }
+    })
+  }
+
+  return minX === Infinity ? null : [minX, minY, maxX, maxY]
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Highlight selected/active features.
+ * - VectorTileLayers: style-function wrap so all tiles (including those that
+ *   load after selection) render the highlight automatically.
+ * - VectorLayers (draw etc.): overlay Feature at zIndex 1001.
+ * Returns EPSG:27700 bounds [minX, minY, maxX, maxY] for selected features, or null.
+ */
+export const updateHighlightedFeatures = (map, selectedFeatures, activeFeatures, stylesMap) => {
+  if (!map) {
+    return null
+  }
+
+  // Determine which layerIds belong to plain VectorLayers vs VT layers
+  const vectorLayerIds = new Set()
+  map.getLayers().forEach(l => {
+    if (l instanceof VectorLayer && !l.get(HIGHLIGHT_MARKER)) {
+      const id = l.get('layerId')
+      if (id) {
+        vectorLayerIds.add(id)
+      }
+    }
+  })
+
+  // VT layers — style-wrap
+  const { keys: selectedKeys, idProps: selectedIdProps } = buildFeatureKeyIndex(selectedFeatures)
+  const { keys: activeKeys, idProps: activeIdProps } = buildFeatureKeyIndex(activeFeatures)
+  const idPropsMap = { ...selectedIdProps, ...activeIdProps }
+  wrapVtLayers(map, selectedKeys, activeKeys, idPropsMap, stylesMap)
+
+  // VectorLayers — overlay
+  const hlLayer = getOrCreateHighlightLayer(map)
+  const hlSource = hlLayer.getSource()
+  hlSource.clear()
+
+  const vecSelected = (selectedFeatures ?? []).filter(f => vectorLayerIds.has(f.layerId))
+  const vecActive = (activeFeatures ?? []).filter(f => vectorLayerIds.has(f.layerId))
+
+  // VT features are handled by style-wrap; only add vector features to overlay
+  addVectorHighlights(hlSource, vecActive, true, stylesMap)
+  addVectorHighlights(hlSource, vecSelected, false, stylesMap)
+
+  // Bounds from all tile fragments of selected features
+  const allGeoms = (selectedFeatures ?? []).flatMap(feat => resolveGeometries(map, feat))
+  return computeBounds(allGeoms)
+}

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

@@ -0,0 +1,65 @@
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import VectorLayer from 'ol/layer/Vector.js'
+
+const HIGHLIGHT_MARKER = '_highlight'
+const HIT_TOLERANCE = 8
+
+const isInteractiveFeature = (feature, layer, layerSet) => {
+  if (layer instanceof VectorTileLayer) {
+    const styleLayerId = feature.get('mapbox-layer')?.id
+    return Boolean(styleLayerId && layerSet.has(styleLayerId))
+  }
+  if (layer instanceof VectorLayer && !layer.get(HIGHLIGHT_MARKER)) {
+    const layerId = layer.get('layerId')
+    return Boolean(layerId && layerSet.has(layerId))
+  }
+  return false
+}
+
+/**
+ * Attaches a pointermove listener that changes the map cursor to a pointer when
+ * hovering over any of the specified layers. Only fires for mouse pointer events
+ * so touch interactions are unaffected.
+ *
+ * @param {import('ol/Map').default} map - OL map instance
+ * @param {string[]} layerIds - Layer IDs to watch
+ * @param {Function|null} prevHandler - Previous pointermove handler to remove
+ * @returns {Function|null} The new handler, or null if layerIds is empty
+ */
+export const setupHoverCursor = (map, layerIds, prevHandler) => {
+  const viewport = map.getViewport()
+
+  if (prevHandler) {
+    map.un('pointermove', prevHandler)
+  }
+
+  if (!layerIds?.length) {
+    viewport.style.cursor = ''
+    return null
+  }
+
+  const layerSet = new Set(layerIds)
+  let rafId = null
+
+  const handler = (e) => {
+    if (e.originalEvent?.pointerType !== 'mouse') {
+      return
+    }
+    const pixel = e.pixel
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+    }
+    rafId = requestAnimationFrame(() => {
+      rafId = null
+      const hit = map.forEachFeatureAtPixel(
+        pixel,
+        (feature, layer) => isInteractiveFeature(feature, layer, layerSet),
+        { hitTolerance: HIT_TOLERANCE }
+      )
+      viewport.style.cursor = hit ? 'pointer' : ''
+    })
+  }
+
+  map.on('pointermove', handler)
+  return handler
+}

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

@@ -0,0 +1,235 @@
+import { setupHoverCursor } from './hoverCursor.js'
+
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import VectorLayer from 'ol/layer/Vector.js'
+
+jest.mock('ol/layer/VectorTile.js', () => ({ __esModule: true, default: class VectorTileLayer {} }))
+jest.mock('ol/layer/Vector.js', () => ({ __esModule: true, default: class VectorLayer {} }))
+
+const makeViewport = () => ({ style: { cursor: '' } })
+
+const makeMap = (forEachResult = undefined) => {
+  const viewport = makeViewport()
+  return {
+    getViewport: () => viewport,
+    forEachFeatureAtPixel: jest.fn(() => forEachResult),
+    on: jest.fn(),
+    un: jest.fn()
+  }
+}
+
+const makeVTFeature = (styleLayerId) => ({
+  get: (key) => key === 'mapbox-layer' ? { id: styleLayerId } : undefined
+})
+
+const makeVectorFeature = () => ({ get: () => undefined })
+
+const makeVTLayer = () => {
+  const layer = new VectorTileLayer()
+  layer.get = () => undefined
+  return layer
+}
+
+const makeVectorLayer = (layerId, isHighlight = false) => {
+  const layer = new VectorLayer()
+  layer.get = (key) => {
+    if (key === '_highlight') return isHighlight ? true : undefined
+    if (key === 'layerId') return layerId
+    return undefined
+  }
+  return layer
+}
+
+const move = (handler, pointerType = 'mouse') =>
+  handler({ pixel: [10, 10], originalEvent: { pointerType } })
+
+describe('setupHoverCursor', () => {
+  beforeEach(() => {
+    jest.spyOn(global, 'requestAnimationFrame').mockImplementation(cb => { cb(); return 0 })
+    jest.spyOn(global, 'cancelAnimationFrame').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Setup / teardown                                                   */
+  /* ------------------------------------------------------------------ */
+
+  it('returns null and clears cursor when layerIds is empty', () => {
+    const map = makeMap()
+    const result = setupHoverCursor(map, [], null)
+    expect(result).toBeNull()
+    expect(map.getViewport().style.cursor).toBe('')
+    expect(map.on).not.toHaveBeenCalled()
+  })
+
+  it('returns null and clears cursor when layerIds is null', () => {
+    const map = makeMap()
+    const result = setupHoverCursor(map, null, null)
+    expect(result).toBeNull()
+    expect(map.getViewport().style.cursor).toBe('')
+  })
+
+  it('removes previous handler before attaching a new one', () => {
+    const map = makeMap()
+    const prev = jest.fn()
+    setupHoverCursor(map, ['layer-a'], prev)
+    expect(map.un).toHaveBeenCalledWith('pointermove', prev)
+  })
+
+  it('removes previous handler when clearing layers', () => {
+    const map = makeMap()
+    const prev = jest.fn()
+    setupHoverCursor(map, [], prev)
+    expect(map.un).toHaveBeenCalledWith('pointermove', prev)
+  })
+
+  it('attaches a pointermove listener and returns the handler', () => {
+    const map = makeMap()
+    const handler = setupHoverCursor(map, ['layer-a'], null)
+    expect(typeof handler).toBe('function')
+    expect(map.on).toHaveBeenCalledWith('pointermove', handler)
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Pointermove — cursor state                                         */
+  /* ------------------------------------------------------------------ */
+
+  it('sets pointer cursor when an interactive VT feature is hit', () => {
+    const map = makeMap(true)
+    const handler = setupHoverCursor(map, ['fill-layer'], null)
+    move(handler)
+    expect(map.getViewport().style.cursor).toBe('pointer')
+  })
+
+  it('clears cursor when no interactive feature is hit', () => {
+    const viewport = makeViewport()
+    viewport.style.cursor = 'pointer'
+    const map = { ...makeMap(undefined), getViewport: () => viewport }
+    const handler = setupHoverCursor(map, ['fill-layer'], null)
+    move(handler)
+    expect(viewport.style.cursor).toBe('')
+  })
+
+  it('ignores touch pointer events', () => {
+    const map = makeMap(true)
+    const handler = setupHoverCursor(map, ['layer-a'], null)
+    move(handler, 'touch')
+    expect(map.forEachFeatureAtPixel).not.toHaveBeenCalled()
+  })
+
+  it('ignores pen pointer events', () => {
+    const map = makeMap(true)
+    const handler = setupHoverCursor(map, ['layer-a'], null)
+    move(handler, 'pen')
+    expect(map.forEachFeatureAtPixel).not.toHaveBeenCalled()
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Feature matching — VectorTile layer                                */
+  /* ------------------------------------------------------------------ */
+
+  it('matches a VT feature whose mapbox-layer id is in the watched set', () => {
+    const map = makeMap()
+    const feature = makeVTFeature('roads')
+    const layer = makeVTLayer()
+    map.forEachFeatureAtPixel.mockImplementation((pixel, cb) => cb(feature, layer))
+
+    const handler = setupHoverCursor(map, ['roads'], null)
+    move(handler)
+    expect(map.getViewport().style.cursor).toBe('pointer')
+  })
+
+  it('does not match a VT feature whose mapbox-layer id is not in the watched set', () => {
+    const map = makeMap()
+    const feature = makeVTFeature('other-layer')
+    const layer = makeVTLayer()
+    map.forEachFeatureAtPixel.mockImplementation((pixel, cb) => cb(feature, layer))
+
+    const handler = setupHoverCursor(map, ['roads'], null)
+    move(handler)
+    expect(map.getViewport().style.cursor).toBe('')
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Feature matching — Vector layer                                    */
+  /* ------------------------------------------------------------------ */
+
+  it('matches a VectorLayer feature whose layerId is in the watched set', () => {
+    const map = makeMap()
+    const feature = makeVectorFeature()
+    const layer = makeVectorLayer('draw')
+    map.forEachFeatureAtPixel.mockImplementation((pixel, cb) => cb(feature, layer))
+
+    const handler = setupHoverCursor(map, ['draw'], null)
+    move(handler)
+    expect(map.getViewport().style.cursor).toBe('pointer')
+  })
+
+  it('does not match a VectorLayer feature whose layerId is not in the watched set', () => {
+    const map = makeMap()
+    const feature = makeVectorFeature()
+    const layer = makeVectorLayer('other')
+    map.forEachFeatureAtPixel.mockImplementation((pixel, cb) => cb(feature, layer))
+
+    const handler = setupHoverCursor(map, ['draw'], null)
+    move(handler)
+    expect(map.getViewport().style.cursor).toBe('')
+  })
+
+  it('skips highlight overlay VectorLayers', () => {
+    const map = makeMap()
+    const feature = makeVectorFeature()
+    const layer = makeVectorLayer('draw', true)
+    map.forEachFeatureAtPixel.mockImplementation((pixel, cb) => cb(feature, layer))
+
+    const handler = setupHoverCursor(map, ['draw'], null)
+    move(handler)
+    expect(map.getViewport().style.cursor).toBe('')
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* forEachFeatureAtPixel options                                      */
+  /* ------------------------------------------------------------------ */
+
+  it('passes hitTolerance to forEachFeatureAtPixel', () => {
+    const map = makeMap()
+    const handler = setupHoverCursor(map, ['layer-a'], null)
+    move(handler)
+    expect(map.forEachFeatureAtPixel).toHaveBeenCalledWith(
+      [10, 10],
+      expect.any(Function),
+      { hitTolerance: 8 }
+    )
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* RAF throttle                                                        */
+  /* ------------------------------------------------------------------ */
+
+  it('cancels a pending RAF when a second move fires before the frame', () => {
+    global.requestAnimationFrame.mockImplementation(() => 42) // don't execute immediately
+    const map = makeMap(true)
+    const handler = setupHoverCursor(map, ['layer-a'], null)
+    move(handler)
+    move(handler)
+    expect(global.cancelAnimationFrame).toHaveBeenCalledWith(42)
+  })
+
+  it('calls forEachFeatureAtPixel only once per RAF even with multiple moves', () => {
+    let pendingCb = null
+    global.requestAnimationFrame.mockImplementation(cb => { pendingCb = cb; return 1 })
+    global.cancelAnimationFrame.mockImplementation(() => { pendingCb = null })
+
+    const map = makeMap(true)
+    const handler = setupHoverCursor(map, ['layer-a'], null)
+    move(handler)
+    move(handler)
+    move(handler)
+
+    pendingCb?.()
+    expect(map.forEachFeatureAtPixel).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -0,0 +1,11 @@
+// OL creates hit-detection canvases without willReadFrequently, causing browser warnings.
+// Patching getContext ensures any 2D canvas created after this point gets the flag.
+export const applyOpenLayersFixes = () => {
+  if (typeof HTMLCanvasElement === 'undefined') {
+    return
+  }
+  const _getContext = HTMLCanvasElement.prototype.getContext
+  HTMLCanvasElement.prototype.getContext = function (type, attrs, ...rest) { // NOSONAR
+    return _getContext.call(this, type, type === '2d' ? { ...attrs, willReadFrequently: true } : attrs, ...rest)
+  }
+}

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

@@ -0,0 +1,53 @@
+import { applyOpenLayersFixes } from './openLayersFixes.js'
+
+let origGetContext
+
+beforeEach(() => {
+  origGetContext = HTMLCanvasElement.prototype.getContext
+})
+
+afterEach(() => {
+  HTMLCanvasElement.prototype.getContext = origGetContext
+})
+
+const applyFix = (spy) => {
+  HTMLCanvasElement.prototype.getContext = spy
+  applyOpenLayersFixes()
+}
+
+describe('applyOpenLayersFixes', () => {
+  it('adds willReadFrequently: true to 2D context requests', () => {
+    const spy = jest.fn()
+    applyFix(spy)
+    document.createElement('canvas').getContext('2d')
+    expect(spy).toHaveBeenCalledWith('2d', { willReadFrequently: true })
+  })
+
+  it('willReadFrequently: true wins over an explicit false', () => {
+    const spy = jest.fn()
+    applyFix(spy)
+    document.createElement('canvas').getContext('2d', { willReadFrequently: false })
+    expect(spy).toHaveBeenCalledWith('2d', { willReadFrequently: true })
+  })
+
+  it('preserves other 2D context attributes', () => {
+    const spy = jest.fn()
+    applyFix(spy)
+    document.createElement('canvas').getContext('2d', { alpha: false })
+    expect(spy).toHaveBeenCalledWith('2d', { alpha: false, willReadFrequently: true })
+  })
+
+  it('does not modify non-2D context requests', () => {
+    const spy = jest.fn()
+    applyFix(spy)
+    document.createElement('canvas').getContext('webgl', { antialias: true })
+    expect(spy).toHaveBeenCalledWith('webgl', { antialias: true })
+  })
+
+  it('does nothing in environments without HTMLCanvasElement', () => {
+    const orig = global.HTMLCanvasElement
+    delete global.HTMLCanvasElement
+    expect(() => applyOpenLayersFixes()).not.toThrow()
+    global.HTMLCanvasElement = orig
+  })
+})

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

@@ -0,0 +1,77 @@
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import VectorLayer from 'ol/layer/Vector.js'
+import GeoJSON from 'ol/format/GeoJSON.js'
+import { renderFeatureToGeoJSON } from './vtTileFragments.js'
+
+const CRS = 'EPSG:27700'
+
+const geoJsonFormat = new GeoJSON({ dataProjection: CRS, featureProjection: CRS })
+
+// Mirror MapLibre's fallback: use property hash when feature has no explicit MVT ID.
+// This deduplicates tile-split fragments that share the same properties.
+const getVtFeatureId = (feature) => {
+  const id = feature.getId()
+  if (id !== null && id !== undefined) {
+    return id
+  }
+  const props = { ...feature.getProperties() }
+  delete props['mapbox-layer']
+  return JSON.stringify(props)
+}
+
+export const queryFeatures = (map, point, options = {}) => {
+  if (!point) {
+    return []
+  }
+  const { radius = 10 } = options
+  const pixel = [point.x, point.y]
+  const results = []
+  const seenKeys = new Set()
+
+  map.forEachFeatureAtPixel(
+    pixel,
+    (feature, layer) => {
+      if (layer instanceof VectorTileLayer) {
+        const mapboxLayer = feature.get('mapbox-layer')
+        const styleLayerId = mapboxLayer?.id
+        // background-type layers have no features in MapLibre — skip to match behaviour
+        if (!styleLayerId || mapboxLayer?.type === 'background') {
+          return
+        }
+        const key = `${styleLayerId}:${getVtFeatureId(feature)}`
+        if (seenKeys.has(key)) {
+          return
+        }
+        seenKeys.add(key)
+        results.push({
+          id: feature.getId(),
+          layer: { id: styleLayerId },
+          geometry: renderFeatureToGeoJSON(feature),
+          properties: feature.getProperties()
+        })
+      } else if (layer instanceof VectorLayer) {
+        const layerId = layer.get('layerId')
+        if (!layerId || layer.get('_highlight')) {
+          return
+        }
+        const featureId = feature.getId()
+        const key = `${layerId}:${featureId}`
+        if (seenKeys.has(key)) {
+          return
+        }
+        seenKeys.add(key)
+        results.push({
+          id: featureId,
+          layer: { id: layerId },
+          geometry: geoJsonFormat.writeGeometryObject(feature.getGeometry()),
+          properties: feature.getProperties()
+        })
+      } else {
+        // other layer types (e.g. TileLayer) — skip
+      }
+    },
+    { hitTolerance: radius }
+  )
+
+  return results
+}