@defra/interactive-map 0.0.3-alpha → 0.0.5-alpha

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

@@ -1,17 +1,7 @@
-/**
- * Update highlighted features using pure filters.
- * Supports fill + line geometry, multi-source, cleanup, and bounds.
- */
-function updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures, stylesMap }) {
-  if (!map) {
-    return null
-  }
-
+const groupFeaturesBySource = (map, selectedFeatures) => {
   const featuresBySource = {}
-  const renderedFeatures = []
 
-  // Group features by source
-  selectedFeatures?.forEach(({ featureId, layerId, idProperty }) => {
+  selectedFeatures?.forEach(({ featureId, layerId, idProperty, geometry }) => {
     const layer = map.getLayer(layerId)
 
     if (!layer) {
@@ -24,16 +14,23 @@ function updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures, styles
       featuresBySource[sourceId] = {
         ids: new Set(),
         idProperty,
-        layerId
+        layerId,
+        hasFillGeometry: false
       }
     }
+
+    // Track whether any selected feature on this source is a polygon
+    if (geometry && (geometry.type === 'Polygon' || geometry.type === 'MultiPolygon')) {
+      featuresBySource[sourceId].hasFillGeometry = true
+    }
+
     featuresBySource[sourceId].ids.add(featureId)
   })
 
-  const currentSources = new Set(Object.keys(featuresBySource))
-  const previousSources = map._highlightedSources || new Set()
+  return featuresBySource
+}
 
-  // Cleanup for sources no longer selected
+const cleanupStaleSources = (map, previousSources, currentSources) => {
   previousSources.forEach(src => {
     if (!currentSources.has(src)) {
       const base = `highlight-${src}`
@@ -45,80 +42,94 @@ function updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures, styles
       })
     }
   })
+}
+
+const applyHighlightLayer = (map, id, type, sourceId, srcLayer, paint, filter) => {
+  if (!map.getLayer(id)) {
+    map.addLayer({
+      id,
+      type,
+      source: sourceId,
+      ...(srcLayer && { 'source-layer': srcLayer }),
+      paint
+    })
+  }
+  Object.entries(paint).forEach(([prop, value]) => {
+    map.setPaintProperty(id, prop, value)
+  })
+  map.setFilter(id, filter)
+}
+
+const calculateBounds = (LngLatBounds, renderedFeatures) => {
+  if (!renderedFeatures.length) {
+    return null
+  }
+
+  const bounds = new LngLatBounds()
+  
+  renderedFeatures.forEach(f => {
+    const add = (c) => typeof c[0] === 'number' ? bounds.extend(c) : c.forEach(add)
+    add(f.geometry.coordinates)
+  })
+
+  return [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()]
+}
+
+/**
+ * Update highlighted features using pure filters.
+ * Supports fill + line geometry, multi-source, cleanup, and bounds.
+ */
+export function updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures, stylesMap }) {
+  if (!map) {
+    return null
+  }
+
+  const featuresBySource = groupFeaturesBySource(map, selectedFeatures)
+  const renderedFeatures = []
+
+  const currentSources = new Set(Object.keys(featuresBySource))
+  const previousSources = map._highlightedSources || new Set()
 
+  cleanupStaleSources(map, previousSources, currentSources)
   map._highlightedSources = currentSources
 
   // Apply highlights for current sources
   currentSources.forEach(sourceId => {
-    const { ids, idProperty, layerId } = featuresBySource[sourceId]
+    const { ids, idProperty, layerId, hasFillGeometry } = featuresBySource[sourceId]
     const baseLayer = map.getLayer(layerId)
     const srcLayer = baseLayer.sourceLayer
-    const geom = baseLayer.type
+
+    // Use the actual feature geometry to determine highlight type
+    const geom = hasFillGeometry ? 'fill' : baseLayer.type
     const base = `highlight-${sourceId}`
 
     const { stroke, strokeWidth, fill } = stylesMap[layerId]
-    const filter = ['in', ['get', idProperty], ['literal', [...ids]]]
+    // Use ['id'] for feature.id, ['get', idProperty] for properties
+    const idExpression = idProperty ? ['get', idProperty] : ['id']
+    const filter = ['in', idExpression, ['literal', [...ids]]]
+
+    const linePaint = { 'line-color': stroke, 'line-width': strokeWidth }
 
-    // Ensure layers
     if (geom === 'fill') {
-      if (!map.getLayer(`${base}-fill`)) {
-        map.addLayer({
-          id: `${base}-fill`,
-          type: 'fill',
-          source: sourceId,
-          ...(srcLayer && { 'source-layer': srcLayer }),
-          paint: { 'fill-color': fill }
-        })
-      }
-      map.setPaintProperty(`${base}-fill`, 'fill-color', fill)
-      map.setFilter(`${base}-fill`, filter)
-      if (!map.getLayer(`${base}-line`)) {
-        map.addLayer({
-          id: `${base}-line`,
-          type: 'line',
-          source: sourceId,
-          ...(srcLayer && { 'source-layer': srcLayer }),
-          paint: { 'line-color': stroke, 'line-width': strokeWidth }
-        })
-      }
-      map.setPaintProperty(`${base}-line`, 'line-color', stroke)
-      map.setPaintProperty(`${base}-line`, 'line-width', strokeWidth)
-      map.setFilter(`${base}-line`, filter)
+      applyHighlightLayer(map, `${base}-fill`, 'fill', sourceId, srcLayer, { 'fill-color': fill }, filter)
+      applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, linePaint, filter)
     }
 
     if (geom === 'line') {
-      if (!map.getLayer(`${base}-line`)) {
-        map.addLayer({
-          id: `${base}-line`,
-          type: 'line',
-          source: sourceId,
-          ...(srcLayer && { 'source-layer': srcLayer }),
-          paint: { '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', ''])
       }
-      map.setFilter(`${base}-line`, filter)
+      applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, linePaint, filter)
     }
 
     // Bounds only from rendered tiles
     renderedFeatures.push(
       ...map
         .queryRenderedFeatures({ layers: [layerId] })
-        .filter(f => ids.has(f.properties?.[idProperty]))
+        .filter(f => ids.has(idProperty ? f.properties?.[idProperty] : f.id))
     )
   })
 
-  // Calculate bounds
-  if (!renderedFeatures.length) {
-    return null
-  }
-
-  let bounds = new LngLatBounds()
-  renderedFeatures.forEach(f => {
-    const add = (c) => typeof c[0] === 'number' ? bounds.extend(c) : c.forEach(add)
-    add(f.geometry.coordinates)
-  })
-
-  return [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()]
+  return calculateBounds(LngLatBounds, renderedFeatures)
 }
-
-export { updateHighlightedFeatures }

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

@@ -2,8 +2,9 @@ import { spatialNavigate } from './spatial.js'
 import { calculateLinearTextSize } from './calculateLinearTextSize.js'
 
 const HIGHLIGHT_SCALE_FACTOR = 1.5
+const HIGHLIGHT_LABEL_SOURCE = 'highlighted-label'
 
-function getGeometryCenter(geometry) {
+export function getGeometryCenter(geometry) {
   const { type, coordinates } = geometry
   if (type === 'Point') {
     return coordinates
@@ -23,13 +24,12 @@ function getGeometryCenter(geometry) {
   return null
 }
 
-function evalInterpolate(expr, zoom) {
+export function evalInterpolate(expr, zoom) {
   if (typeof expr === 'number') {
     return expr
   }
   if (!Array.isArray(expr) || expr[0] !== 'interpolate') {
     return calculateLinearTextSize(expr, zoom)
-    // throw new Error('Only interpolate expressions supported')
   }
   const [, , input, ...stops] = expr
   if (input[0] !== 'zoom') {
@@ -39,7 +39,7 @@ function evalInterpolate(expr, zoom) {
     const z0 = stops[i]
     const v0 = stops[i + 1]
     const z1 = stops[i + 2]
-    const v1 = stops[i + 3]
+    const v1 = stops[i + 3] // NOSONAR: array index offset for interpolation pairs
     if (zoom <= z0) {
       return v0
     }
@@ -50,166 +50,220 @@ function evalInterpolate(expr, zoom) {
   return stops[stops.length - 1]
 }
 
-export function createMapLabelNavigator(map, mapColorScheme, events, eventBus) {
-  let isDarkStyle = mapColorScheme === 'dark'
-  let labels = []
-  let currentPixel = null
-  let highlightLayerId = null
-  let highlightedExpr = null
-  let highlightedFeature = null
-
-  const colors = {
-    get current() {
-      if (isDarkStyle) {
-        return { text: '#ffffff', halo: '#000000' }
-      }
-      return { text: '#000000', halo: '#ffffff' }
-    }
+export function getHighlightColors(isDarkStyle) {
+  if (isDarkStyle) {
+    return { text: '#ffffff', halo: '#000000' }
   }
+  return { text: '#000000', halo: '#ffffff' }
+}
 
-  const initLabelSource = () => {
-    if (!map.getSource('highlighted-label')) {
-      map.addSource('highlighted-label', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
-    }
+export function extractTextPropertyName(textField) {
+  if (typeof textField === 'string') {
+    return /^{(.+)}$/.exec(textField)?.[1]
   }
+  if (Array.isArray(textField)) {
+    return textField.find(e => Array.isArray(e) && e[0] === 'get')?.[1]
+  }
+  return null
+}
 
-  map.getStyle().layers.filter(l => l.layout?.['symbol-placement'] === 'line').forEach(l => {
-    map.setLayoutProperty(l.id, 'symbol-placement', 'line-center')
-  })
-  initLabelSource()
+export function buildLabelFromFeature(feature, layer, propName, map) {
+  const center = getGeometryCenter(feature.geometry)
+  if (!center) {
+    return null
+  }
+  const projected = map.project({ lng: center[0], lat: center[1] })
+  return { text: feature.properties[propName], x: projected.x, y: projected.y, feature, layer }
+}
 
-  eventBus?.on(events.MAP_SET_STYLE, style => {
-    map.once('styledata', () => map.once('idle', () => {
-      map.getStyle().layers.filter(l => l.layout?.['symbol-placement'] === 'line').forEach(l => {
-        map.setLayoutProperty(l.id, 'symbol-placement', 'line-center')
-      })
-      initLabelSource()
-      isDarkStyle = style?.mapColorScheme === 'dark'
-    }))
+export function buildLabelsFromLayers(map, symbolLayers, features) {
+  return symbolLayers.flatMap(layer => {
+    const textField = layer.layout?.['text-field']
+    const propName = extractTextPropertyName(textField)
+    if (!propName) {
+      return []
+    }
+    return features
+      .filter(f => f.layer.id === layer.id && f.properties?.[propName])
+      .map(f => buildLabelFromFeature(f, layer, propName, map))
+      .filter(Boolean)
   })
+}
 
-  function refreshLabels() {
-    const symbolLayers = map.getStyle().layers.filter(l => l.type === 'symbol')
-    const features = map.queryRenderedFeatures({ layers: symbolLayers.map(l => l.id) })
-    labels = symbolLayers.flatMap(layer => {
-      const textField = layer.layout?.['text-field']
-      const propName = typeof textField === 'string'
-        ? textField.match(/^{(.+)}$/)?.[1]
-        : Array.isArray(textField)
-        ? textField.find(e => Array.isArray(e) && e[0] === 'get')?.[1]
-        : null
-      if (!propName) {
-        return []
-      }
-      return features.filter(f => f.layer.id === layer.id && f.properties?.[propName]).map(f => {
-        const center = getGeometryCenter(f.geometry)
-        if (!center) {
-          return null
-        }
-        const projected = map.project({ lng: center[0], lat: center[1] })
-        return { text: f.properties[propName], x: projected.x, y: projected.y, feature: f, layer }
-      }).filter(Boolean)
-    })
-  }
+export function findClosestLabel(labels, centerPoint) {
+  return labels.reduce((best, label) => {
+    const dist = (label.x - centerPoint.x) ** 2 + (label.y - centerPoint.y) ** 2
+    if (!best || dist < best.dist) {
+      return { label, dist }
+    }
+    return best
+  }, null)?.label
+}
 
-  function removeHighlight() {
-    if (highlightLayerId && map.getLayer(highlightLayerId)) {
-      try {
-        map.removeLayer(highlightLayerId)
-      }
-      catch {}
-      highlightLayerId = null
-      highlightedExpr = null
-      highlightedFeature = null
+export function createHighlightLayerConfig(sourceLayer, highlightSize, colors) {
+  return {
+    id: `highlight-${sourceLayer.id}`,
+    type: sourceLayer.type,
+    source: HIGHLIGHT_LABEL_SOURCE,
+    layout: {
+      ...sourceLayer.layout,
+      'text-size': highlightSize,
+      'text-allow-overlap': true,
+      'text-ignore-placement': true,
+      'text-max-angle': 90
+    },
+    paint: {
+      ...sourceLayer.paint,
+      'text-color': colors.text,
+      'text-halo-color': colors.halo,
+      'text-halo-width': 3,
+      'text-halo-blur': 1,
+      'text-opacity': 1
     }
   }
+}
 
-  function highlight(labelData) {
-    if (!labelData?.feature?.layer) {
-      return
+export function removeHighlightLayer(map, state) {
+  if (state.highlightLayerId && map.getLayer(state.highlightLayerId)) {
+    try {
+      map.removeLayer(state.highlightLayerId)
     }
-    removeHighlight()
-    const { feature, layer } = labelData
-    highlightLayerId = `highlight-${layer.id}`
-
-    const { id, type, properties, geometry } = feature
-    highlightedFeature = { id, type, properties, geometry }
-    map.getSource('highlighted-label').setData(highlightedFeature)
-    highlightedExpr = layer.layout['text-size']
-    const zoom = map.getZoom()
-    const baseSize = evalInterpolate(highlightedExpr, zoom)
-    const highlightSize = baseSize * HIGHLIGHT_SCALE_FACTOR
-    map.addLayer({
-      id: highlightLayerId,
-      type: layer.type,
-      source: 'highlighted-label',
-      layout: { ...layer.layout, 'text-size': highlightSize, 'text-allow-overlap': true, 'text-ignore-placement': true, 'text-max-angle': 90 },
-      paint: { ...layer.paint, 'text-color': colors.current.text, 'text-halo-color': colors.current.halo, 'text-halo-width': 3, 'text-halo-blur': 1, 'text-opacity': 1 }
+    catch {}
+    state.highlightLayerId = null
+    state.highlightedExpr = null
+  }
+}
+
+export function applyHighlight(map, labelData, state) {
+  if (!labelData?.feature?.layer) {
+    return
+  }
+  removeHighlightLayer(map, state)
+  const { feature, layer } = labelData
+  state.highlightLayerId = `highlight-${layer.id}`
+
+  const { id, type, properties, geometry } = feature
+  map.getSource(HIGHLIGHT_LABEL_SOURCE).setData({ id, type, properties, geometry })
+  state.highlightedExpr = layer.layout['text-size']
+
+  const zoom = map.getZoom()
+  const baseSize = evalInterpolate(state.highlightedExpr, zoom)
+  const highlightSize = baseSize * HIGHLIGHT_SCALE_FACTOR
+  const colors = getHighlightColors(state.isDarkStyle)
+  const layerConfig = createHighlightLayerConfig(layer, highlightSize, colors)
+
+  map.addLayer(layerConfig)
+  map.moveLayer(state.highlightLayerId)
+}
+
+export function navigateToNextLabel(direction, state) {
+  if (!state.currentPixel) {
+    return null
+  }
+  const filtered = state.labels
+    .map((l, i) => ({ pixel: [l.x, l.y], index: i }))
+    .filter(l => l.pixel[0] !== state.currentPixel.x || l.pixel[1] !== state.currentPixel.y)
+  if (!filtered.length) {
+    return null
+  }
+  const pixelArray = filtered.map(l => l.pixel)
+  let nextFilteredIndex = spatialNavigate(direction, [state.currentPixel.x, state.currentPixel.y], pixelArray)
+  if (nextFilteredIndex == null || nextFilteredIndex < 0 || nextFilteredIndex >= filtered.length) {
+    nextFilteredIndex = 0
+  }
+  return state.labels[filtered[nextFilteredIndex].index]
+}
+
+function initLabelSource(map) {
+  if (!map.getSource(HIGHLIGHT_LABEL_SOURCE)) {
+    map.addSource(HIGHLIGHT_LABEL_SOURCE, { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
+  }
+}
+
+function setLineCenterPlacement(map) {
+  map.getStyle().layers
+    .filter(l => l.layout?.['symbol-placement'] === 'line')
+    .forEach(l => map.setLayoutProperty(l.id, 'symbol-placement', 'line-center'))
+}
+
+function setSymbolTextOpacity(map) {
+  map.getStyle().layers
+    .filter(l => l.type === 'symbol')
+    .forEach(layer => {
+      map.setPaintProperty(layer.id, 'text-opacity', ['case', ['boolean', ['feature-state', 'highlighted'], false], 0, 1])
     })
-    map.moveLayer(highlightLayerId)
+}
+
+export function createMapLabelNavigator(map, mapColorScheme, events, eventBus) {
+  const state = {
+    isDarkStyle: mapColorScheme === 'dark',
+    labels: [],
+    currentPixel: null,
+    highlightLayerId: null,
+    highlightedExpr: null
   }
 
+  setLineCenterPlacement(map)
+  initLabelSource(map)
+
+  eventBus?.on(events.MAP_SET_STYLE, style => {
+    map.once('styledata', () => map.once('idle', () => {
+      setLineCenterPlacement(map)
+      initLabelSource(map)
+      state.isDarkStyle = style?.mapColorScheme === 'dark'
+    }))
+  })
+
   map.on('zoom', () => {
-    if (highlightLayerId && highlightedExpr) {
-      const zoom = map.getZoom()
-      const baseSize = evalInterpolate(highlightedExpr, zoom)
-      map.setLayoutProperty(highlightLayerId, 'text-size', baseSize * HIGHLIGHT_SCALE_FACTOR)
+    if (state.highlightLayerId && state.highlightedExpr) {
+      const baseSize = evalInterpolate(state.highlightedExpr, map.getZoom())
+      map.setLayoutProperty(state.highlightLayerId, 'text-size', baseSize * HIGHLIGHT_SCALE_FACTOR)
     }
   })
 
+  function refreshLabels() {
+    const symbolLayers = map.getStyle().layers.filter(l => l.type === 'symbol')
+    const features = map.queryRenderedFeatures({ layers: symbolLayers.map(l => l.id) })
+    state.labels = buildLabelsFromLayers(map, symbolLayers, features)
+  }
+
   function highlightCenter() {
     refreshLabels()
-    if (!labels.length) {
+    if (!state.labels.length) {
       return null
     }
     const centerPoint = map.project(map.getCenter())
-    const closest = labels.reduce((best, label) => {
-      const dist = (label.x - centerPoint.x) ** 2 + (label.y - centerPoint.y) ** 2
-      if (!best || dist < best.dist) {
-        return { label, dist }
-      }
-      return best
-    }, null)?.label
+    const closest = findClosestLabel(state.labels, centerPoint)
     if (closest) {
-      currentPixel = { x: closest.x, y: closest.y }
+      state.currentPixel = { x: closest.x, y: closest.y }
     }
-    highlight(closest)
+    applyHighlight(map, closest, state)
     return `${closest.text} (${closest.layer.id})`
   }
 
   function highlightNext(direction) {
     refreshLabels()
-    if (!labels.length) {
+    if (!state.labels.length) {
       return null
     }
-    if (!currentPixel) {
+    if (!state.currentPixel) {
       return highlightCenter()
     }
-    const filtered = labels
-      .map((l, i) => ({ pixel: [l.x, l.y], index: i }))
-      .filter(l => l.pixel[0] !== currentPixel.x || l.pixel[1] !== currentPixel.y)
-    if (!filtered.length) {
+    const labelData = navigateToNextLabel(direction, state)
+    if (!labelData) {
       return null
     }
-    const pixelArray = filtered.map(l => l.pixel)
-    let nextFilteredIndex = spatialNavigate(direction, [currentPixel.x, currentPixel.y], pixelArray)
-    if (nextFilteredIndex == null || nextFilteredIndex < 0 || nextFilteredIndex >= filtered.length) {
-      nextFilteredIndex = 0
-    }
-    const labelData = labels[filtered[nextFilteredIndex].index]
-    currentPixel = { x: labelData.x, y: labelData.y }
-    highlight(labelData)
+    state.currentPixel = { x: labelData.x, y: labelData.y }
+    applyHighlight(map, labelData, state)
     return `${labelData.text} (${labelData.layer.id})`
   }
 
-  map.getStyle().layers.filter(l => l.type === 'symbol').forEach(layer => {
-    map.setPaintProperty(layer.id, 'text-opacity', ['case', ['boolean', ['feature-state', 'highlighted'], false], 0, 1])
-  })
+  setSymbolTextOpacity(map)
 
   return {
     refreshLabels,
     highlightNextLabel: highlightNext,
     highlightLabelAtCenter: highlightCenter,
-    clearHighlightedLabel: removeHighlight
+    clearHighlightedLabel: () => removeHighlightLayer(map, state)
   }
 }

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

@@ -13,7 +13,7 @@ export function applyPreventDefaultFix (map) {
   const originalPreventDefault = Event.prototype.preventDefault
 
   // Override preventDefault only for events targeting our map
-  Event.prototype.preventDefault = function () {
+  Event.prototype.preventDefault = function () { // NOSONAR: intentional monkey-patch to fix MapLibre touch event bug
     if ((this.type === 'touchmove' || this.type === 'touchstart') && !this.cancelable) {
       // Check if the event target is within our map container
       const canvas = map.getCanvas()
@@ -21,6 +21,6 @@ export function applyPreventDefaultFix (map) {
         return
       }
     }
-    return originalPreventDefault.call(this)
+    originalPreventDefault.call(this)
   }
 }