@defra/interactive-map 0.0.8-alpha → 0.0.9-alpha

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

@@ -0,0 +1,31 @@
+import { calculateLinearTextSize } from './calculateLinearTextSize.js'
+
+describe('calculateLinearTextSize', () => {
+  it('returns 0 if stops is empty', () => {
+    expect(calculateLinearTextSize({ stops: [] }, 5)).toBe(0)
+  })
+
+  it('returns single stop value if stops has one entry', () => {
+    expect(calculateLinearTextSize({ stops: [[3, 10]] }, 5)).toBe(10)
+  })
+
+  it('returns lower stop if zoom below first stop', () => {
+    expect(calculateLinearTextSize({ stops: [[3, 10], [6, 20]] }, 2)).toBe(10)
+  })
+
+  it('returns upper stop if zoom above last stop', () => {
+    expect(calculateLinearTextSize({ stops: [[3, 10], [6, 20]] }, 7)).toBe(20)
+  })
+
+  it('interpolates between stops for zoom in range', () => {
+    expect(calculateLinearTextSize({ stops: [[3, 10], [6, 20]] }, 4.5)).toBe(15)
+  })
+
+  it('works with multiple stops', () => {
+    const expr = { stops: [[0, 5], [5, 15], [10, 25]] }
+    expect(calculateLinearTextSize(expr, -1)).toBe(5)  // below first
+    expect(calculateLinearTextSize(expr, 12)).toBe(25)  // above last
+    expect(calculateLinearTextSize(expr, 2.5)).toBe(10) // between first two
+    expect(calculateLinearTextSize(expr, 7.5)).toBe(20) // between last two
+  })
+})

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

@@ -0,0 +1,63 @@
+import { getWebGL } from './detectWebgl.js'
+
+describe('getWebGL', () => {
+  const originalWebGL = window.WebGLRenderingContext
+  const originalCreateElement = document.createElement
+
+  afterEach(() => {
+    window.WebGLRenderingContext = originalWebGL
+    document.createElement = originalCreateElement
+    jest.restoreAllMocks()
+  })
+
+  it('returns disabled if WebGL is not supported', () => {
+    window.WebGLRenderingContext = undefined
+    expect(getWebGL(['webgl'])).toEqual({
+      isEnabled: false,
+      error: 'WebGL is not supported'
+    })
+  })
+
+  it('returns enabled if WebGL context is created successfully', () => {
+    window.WebGLRenderingContext = class {}
+    const fakeContext = { getParameter: () => true }
+    document.createElement = jest.fn(() => ({
+      getContext: jest.fn(() => fakeContext)
+    }))
+    expect(getWebGL(['webgl'])).toEqual({ isEnabled: true })
+  })
+
+  it('returns disabled if WebGL is supported but context fails', () => {
+    window.WebGLRenderingContext = class {}
+    document.createElement = jest.fn(() => ({
+      getContext: jest.fn(() => null)
+    }))
+    expect(getWebGL(['webgl'])).toEqual({
+      isEnabled: false,
+      error: 'WebGL is supported, but disabled'
+    })
+  })
+
+  it('tries multiple context names and succeeds on second', () => {
+    window.WebGLRenderingContext = class {}
+    let call = 0
+    document.createElement = jest.fn(() => ({
+      getContext: jest.fn(() => {
+        call++
+        return call === 2 ? { getParameter: () => true } : null
+      })
+    }))
+    expect(getWebGL(['webgl1', 'webgl2'])).toEqual({ isEnabled: true })
+  })
+
+  it('catches errors from getContext and continues', () => {
+    window.WebGLRenderingContext = class {}
+    document.createElement = jest.fn(() => ({
+      getContext: jest.fn(() => { throw new Error('fail') })
+    }))
+    expect(getWebGL(['webgl', 'webgl2'])).toEqual({
+      isEnabled: false,
+      error: 'WebGL is supported, but disabled'
+    })
+  })
+})

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

@@ -0,0 +1,126 @@
+import { updateHighlightedFeatures } from './highlightFeatures.js'
+
+describe('Highlighting Utils', () => {
+  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]))
+  }
+
+  beforeEach(() => {
+    map = {
+      _highlightedSources: new Set(['stale']),
+      getLayer: jest.fn(),
+      addLayer: jest.fn(),
+      setFilter: jest.fn(),
+      setPaintProperty: jest.fn(),
+      queryRenderedFeatures: jest.fn()
+    }
+  })
+
+  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
+    })
+
+    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)
+    map.queryRenderedFeatures.mockReturnValue([
+      { id: 1, geometry: { coordinates: [10, 10] } }, // Simple point
+      { id: 2, properties: { customId: 4 }, geometry: { coordinates: [[0, 0], [5, 5]] } } // Nested
+    ])
+
+    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', ''])
+    
+    // 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-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' } }
+    })
+    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' } }
+    })
+    expect(map.setFilter).not.toHaveBeenCalledWith(expect.stringContaining('stale'), expect.anything())
+  })
+
+  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
+      return null
+    })
+    map.queryRenderedFeatures.mockReturnValue([])
+    updateHighlightedFeatures({ 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()
+  })
+})

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

@@ -234,9 +234,7 @@ export function createMapLabelNavigator(map, mapColorScheme, events, eventBus) {
     }
     const centerPoint = map.project(map.getCenter())
     const closest = findClosestLabel(state.labels, centerPoint)
-    if (closest) {
-      state.currentPixel = { x: closest.x, y: closest.y }
-    }
+    state.currentPixel = { x: closest.x, y: closest.y }
     applyHighlight(map, closest, state)
     return `${closest.text} (${closest.layer.id})`
   }

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

@@ -0,0 +1,231 @@
+import {
+  getGeometryCenter, evalInterpolate, getHighlightColors, extractTextPropertyName,
+  buildLabelFromFeature, buildLabelsFromLayers, findClosestLabel,
+  createHighlightLayerConfig, removeHighlightLayer, applyHighlight,
+  navigateToNextLabel, createMapLabelNavigator
+} from './labels.js'
+
+jest.mock('./spatial.js', () => ({ spatialNavigate: jest.fn() }))
+jest.mock('./calculateLinearTextSize.js', () => ({ calculateLinearTextSize: jest.fn(() => 12) }))
+
+import { spatialNavigate } from './spatial.js'
+import { calculateLinearTextSize } from './calculateLinearTextSize.js'
+
+describe('labels utils', () => {
+
+  test('getGeometryCenter all geometry types', () => {
+    expect(getGeometryCenter({ type: 'Point', coordinates: [1, 2] })).toEqual([1, 2])
+    expect(getGeometryCenter({ type: 'MultiPoint', coordinates: [[3, 4]] })).toEqual([3, 4])
+    expect(getGeometryCenter({ type: 'LineString', coordinates: [[0, 0], [4, 4]] })).toEqual([2, 2])
+    expect(getGeometryCenter({ type: 'MultiLineString', coordinates: [[[0, 0], [4, 4]]] })).toEqual([2, 2])
+    expect(getGeometryCenter({ type: 'Polygon', coordinates: [[[0, 0], [2, 0], [2, 2], [0, 2]]] })).toEqual([1, 1])
+    expect(getGeometryCenter({ type: 'MultiPolygon', coordinates: [[[[0, 0], [2, 0], [2, 2], [0, 2]]]] })).toEqual([1, 1])
+    expect(getGeometryCenter({ type: 'GeometryCollection', coordinates: [] })).toBeNull()
+  })
+
+  test('evalInterpolate all branches', () => {
+    expect(evalInterpolate(14, 10)).toBe(14)
+    expect(evalInterpolate('label', 10)).toBe(12)
+    expect(calculateLinearTextSize).toHaveBeenCalledWith('label', 10)
+    expect(evalInterpolate(['literal', 'x'], 10)).toBe(12)
+    expect(() => evalInterpolate(['interpolate', ['linear'], ['get', 'p'], 5, 10], 10)).toThrow()
+    const expr = ['interpolate', ['linear'], ['zoom'], 5, 10, 10, 20]
+    expect(evalInterpolate(expr, 3)).toBe(10)    // zoom <= z0
+    expect(evalInterpolate(expr, 7.5)).toBe(15)  // interpolated
+    expect(evalInterpolate(expr, 15)).toBe(20)   // beyond last stop
+  })
+
+  test('getHighlightColors', () => {
+    expect(getHighlightColors(true)).toEqual({ text: '#ffffff', halo: '#000000' })
+    expect(getHighlightColors(false)).toEqual({ text: '#000000', halo: '#ffffff' })
+  })
+
+  test('extractTextPropertyName all branches', () => {
+    expect(extractTextPropertyName('{name}')).toBe('name')
+    expect(extractTextPropertyName('plain')).toBeUndefined()
+    expect(extractTextPropertyName(['label', ['get', 'title']])).toBe('title')
+    expect(extractTextPropertyName(['label'])).toBeUndefined()
+    expect(extractTextPropertyName(null)).toBeNull()
+  })
+
+  test('buildLabelFromFeature: null center returns null; valid returns label', () => {
+    const map = { project: jest.fn(({ lng, lat }) => ({ x: lng, y: lat })) }
+    expect(buildLabelFromFeature(
+      { geometry: { type: 'Unknown', coordinates: [] }, properties: {} }, {}, 'n', map
+    )).toBeNull()
+    const result = buildLabelFromFeature(
+      { geometry: { type: 'Point', coordinates: [1, 2] }, properties: { n: 'A' } },
+      { id: 'l1' }, 'n', map
+    )
+    expect(result).toMatchObject({ text: 'A', x: 1, y: 2 })
+  })
+
+  test('buildLabelsFromLayers: skips no-propName layer; filters null-center labels', () => {
+    const map = { project: jest.fn(({ lng, lat }) => ({ x: lng, y: lat })) }
+    const layers = [
+      { id: 'l1', layout: {} },
+      { id: 'l2', layout: { 'text-field': '{name}' } }
+    ]
+    const features = [
+      { layer: { id: 'l2' }, properties: { name: 'Town' }, geometry: { type: 'Point', coordinates: [1, 2] } },
+      { layer: { id: 'l2' }, properties: { name: 'X' }, geometry: { type: 'Unknown', coordinates: [] } }
+    ]
+    const result = buildLabelsFromLayers(map, layers, features)
+    expect(result).toHaveLength(1)
+    expect(result[0].text).toBe('Town')
+  })
+
+  test('findClosestLabel: empty → undefined; returns closest; skips farther', () => {
+    expect(findClosestLabel([], { x: 0, y: 0 })).toBeUndefined()
+    const labels = [{ x: 2, y: 0 }, { x: 10, y: 0 }]  // closer first → second hits false branch
+    expect(findClosestLabel(labels, { x: 0, y: 0 })).toBe(labels[0])
+  })
+
+  test('createHighlightLayerConfig returns merged config', () => {
+    const config = createHighlightLayerConfig(
+      { id: 'sl', type: 'symbol', layout: { 'text-font': ['Open Sans'] }, paint: {} },
+      18, { text: '#fff', halo: '#000' }
+    )
+    expect(config.id).toBe('highlight-sl')
+    expect(config.layout['text-size']).toBe(18)
+    expect(config.layout['text-allow-overlap']).toBe(true)
+    expect(config.paint['text-color']).toBe('#fff')
+  })
+
+  test('removeHighlightLayer: skips when no id or layer absent; removes when present', () => {
+    const map = { getLayer: jest.fn(), removeLayer: jest.fn() }
+    const state = { highlightLayerId: null, highlightedExpr: 'x' }
+    removeHighlightLayer(map, state)
+    expect(map.removeLayer).not.toHaveBeenCalled()
+    state.highlightLayerId = 'h1'
+    map.getLayer.mockReturnValue(null)
+    removeHighlightLayer(map, state)
+    expect(map.removeLayer).not.toHaveBeenCalled()
+    map.getLayer.mockReturnValue(true)
+    removeHighlightLayer(map, state)
+    expect(map.removeLayer).toHaveBeenCalledWith('h1')
+    expect(state.highlightLayerId).toBeNull()
+  })
+
+  test('applyHighlight: early returns without feature.layer; applies otherwise', () => {
+    const map = {
+      getLayer: jest.fn(), removeLayer: jest.fn(),
+      getSource: jest.fn(() => ({ setData: jest.fn() })),
+      getZoom: jest.fn(() => 10), addLayer: jest.fn(), moveLayer: jest.fn()
+    }
+    const state = { highlightLayerId: null, highlightedExpr: null, isDarkStyle: false }
+    applyHighlight(map, null, state)
+    applyHighlight(map, { feature: null }, state)
+    applyHighlight(map, { feature: {} }, state)
+    expect(map.addLayer).not.toHaveBeenCalled()
+    applyHighlight(map, {
+      feature: { id: 1, type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [0, 0] }, layer: { id: 'l1' } },
+      layer: { id: 'l1', layout: { 'text-size': 12 }, paint: {} }
+    }, state)
+    expect(map.addLayer).toHaveBeenCalled()
+    expect(map.moveLayer).toHaveBeenCalledWith('highlight-l1')
+  })
+
+  test('navigateToNextLabel all branches', () => {
+    expect(navigateToNextLabel('ArrowRight', { currentPixel: null })).toBeNull()
+    expect(navigateToNextLabel('ArrowRight', {
+      currentPixel: { x: 1, y: 1 }, labels: [{ x: 1, y: 1 }]
+    })).toBeNull()
+    const state = { currentPixel: { x: 0, y: 0 }, labels: [{ x: 0, y: 0 }, { x: 5, y: 5 }] }
+    spatialNavigate.mockReturnValue(-1)  // out of range → use 0
+    expect(navigateToNextLabel('ArrowRight', state)).toBe(state.labels[1])
+    spatialNavigate.mockReturnValue(0)   // valid index
+    expect(navigateToNextLabel('ArrowRight', state)).toBe(state.labels[1])
+  })
+
+  describe('createMapLabelNavigator', () => {
+    let map, layers
+
+    beforeEach(() => {
+      layers = [
+        { id: 's1', type: 'symbol', layout: { 'symbol-placement': 'line', 'text-field': '{name}', 'text-size': 12 }, paint: {} },
+        { id: 's2', type: 'symbol', layout: { 'text-field': '{name}', 'text-size': 14 }, paint: {} },
+        { id: 'fill', type: 'fill', layout: {} }
+      ]
+      map = {
+        getStyle: jest.fn(() => ({ layers })),
+        setLayoutProperty: jest.fn(),
+        setPaintProperty: jest.fn(),
+        getSource: jest.fn().mockReturnValueOnce(null).mockReturnValue({ setData: jest.fn() }),
+        addSource: jest.fn(),
+        getLayer: jest.fn(() => null),
+        removeLayer: jest.fn(),
+        addLayer: jest.fn(),
+        moveLayer: jest.fn(),
+        on: jest.fn(),
+        once: jest.fn(),
+        queryRenderedFeatures: jest.fn(() => []),
+        project: jest.fn(c => ({ x: c.lng ?? 0, y: c.lat ?? 0 })),
+        getCenter: jest.fn(() => ({ lng: 0, lat: 0 })),
+        getZoom: jest.fn(() => 10)
+      }
+    })
+
+    test('init, full highlight lifecycle, and zoom handler branches', () => {
+      const eventBus = { on: jest.fn() }
+      const nav = createMapLabelNavigator(map, 'dark', { MAP_SET_STYLE: 'set-style' }, eventBus)
+
+      // Init: line-center placement, addSource, eventBus registration
+      expect(map.setLayoutProperty).toHaveBeenCalledWith('s1', 'symbol-placement', 'line-center')
+      expect(map.setLayoutProperty).not.toHaveBeenCalledWith('s2', 'symbol-placement', expect.anything())
+      expect(map.addSource).toHaveBeenCalled()
+      expect(eventBus.on).toHaveBeenCalledWith('set-style', expect.any(Function))
+
+      // No labels → null for both highlight functions
+      expect(nav.highlightLabelAtCenter()).toBeNull()
+      expect(nav.highlightNextLabel('ArrowRight')).toBeNull()
+
+      // Zoom handler: no active highlight → no-op
+      const zoomHandler = map.on.mock.calls.find(([e]) => e === 'zoom')[1]
+      map.setLayoutProperty.mockClear()
+      zoomHandler()
+      expect(map.setLayoutProperty).not.toHaveBeenCalled()
+
+      // One feat: highlightNext without currentPixel falls back to highlightCenter (lines 249-251)
+      const feat1 = { layer: { id: 's2' }, properties: { name: 'City1' }, geometry: { type: 'Point', coordinates: [1, 2] } }
+      map.queryRenderedFeatures.mockReturnValue([feat1])
+      expect(nav.highlightNextLabel('ArrowRight')).toContain('City1')
+
+      // Single label at currentPixel → navigateToNextLabel → null (lines 253-255)
+      expect(nav.highlightNextLabel('ArrowRight')).toBeNull()
+
+      // Zoom handler: active highlight → updates text-size
+      map.setLayoutProperty.mockClear()
+      zoomHandler()
+      expect(map.setLayoutProperty).toHaveBeenCalledWith('highlight-s2', 'text-size', expect.any(Number))
+
+      // Two feats: navigation path sets currentPixel + applies highlight (lines 256-258)
+      const feat2 = { layer: { id: 's2' }, properties: { name: 'City2' }, geometry: { type: 'Point', coordinates: [3, 4] } }
+      map.queryRenderedFeatures.mockReturnValue([feat1, feat2])
+      spatialNavigate.mockReturnValue(0)
+      expect(nav.highlightNextLabel('ArrowRight')).toContain('City2')
+
+      // clearHighlightedLabel removes layer
+      map.getLayer.mockReturnValue(true)
+      nav.clearHighlightedLabel()
+      expect(map.removeLayer).toHaveBeenCalledWith('highlight-s2')
+    })
+
+    test('initLabelSource skips addSource when source exists; MAP_SET_STYLE triggers re-init', () => {
+      map.getSource.mockReset().mockReturnValue({ setData: jest.fn() })  // source always exists
+      const eventBus = { on: jest.fn() }
+      createMapLabelNavigator(map, 'light', { MAP_SET_STYLE: 'set-style' }, eventBus)
+      expect(map.addSource).not.toHaveBeenCalled()
+
+      // Fire MAP_SET_STYLE → styledata → idle → setLineCenterPlacement + initLabelSource
+      const styleHandler = eventBus.on.mock.calls[0][1]
+      styleHandler({ mapColorScheme: 'dark' })
+      const styleDataHandler = map.once.mock.calls.find(([e]) => e === 'styledata')[1]
+      styleDataHandler()
+      map.setLayoutProperty.mockClear()
+      const idleHandler = map.once.mock.calls.find(([e]) => e === 'idle')[1]
+      idleHandler()
+      expect(map.setLayoutProperty).toHaveBeenCalledWith('s1', 'symbol-placement', 'line-center')
+    })
+  })
+})

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

@@ -0,0 +1,66 @@
+import { cleanCanvas, applyPreventDefaultFix } from './maplibreFixes.js'
+
+describe('cleanCanvas', () => {
+  it('removes and sets correct attributes on the canvas', () => {
+    const canvas = document.createElement('canvas')
+    canvas.setAttribute('role', 'presentation')
+    canvas.setAttribute('aria-label', 'map')
+    canvas.style.display = 'none'
+
+    const map = { getCanvas: () => canvas }
+
+    cleanCanvas(map)
+
+    expect(canvas.hasAttribute('role')).toBe(false)
+    expect(canvas.getAttribute('tabindex')).toBe('-1')
+    expect(canvas.hasAttribute('aria-label')).toBe(false)
+    expect(canvas.style.display).toBe('block')
+  })
+})
+
+describe('applyPreventDefaultFix', () => {
+  let map, canvas, spy
+
+  beforeEach(() => {
+    canvas = document.createElement('div')
+    map = { getCanvas: () => canvas }
+    spy = jest.spyOn(Event.prototype, 'preventDefault')
+  })
+
+  afterEach(() => {
+    spy.mockRestore()
+  })
+
+  it('skips preventDefault for non-cancelable touch events on the map', () => {
+    applyPreventDefaultFix(map)
+    const e = new Event('touchmove', { cancelable: false })
+    Object.defineProperty(e, 'target', { value: canvas })
+    e.preventDefault()
+    expect(spy).not.toHaveBeenCalled()
+  })
+
+  it('calls original preventDefault for events outside the map', () => {
+    applyPreventDefaultFix(map)
+    const e = new Event('touchstart', { cancelable: false })
+    const outside = document.createElement('div')
+    Object.defineProperty(e, 'target', { value: outside })
+    e.preventDefault()
+    expect(spy).toHaveBeenCalled()
+  })
+
+  it('calls original preventDefault for cancelable touch events on the map', () => {
+    applyPreventDefaultFix(map)
+    const e = new Event('touchmove', { cancelable: true }) // cancelable true
+    Object.defineProperty(e, 'target', { value: canvas })
+    e.preventDefault()
+    expect(spy).toHaveBeenCalled()
+  })
+
+  it('calls original preventDefault for non-touch events', () => {
+    applyPreventDefaultFix(map)
+    const e = new Event('mousedown', { cancelable: false }) // not touch
+    Object.defineProperty(e, 'target', { value: canvas })
+    e.preventDefault()
+    expect(spy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,60 @@
+import { queryFeatures } from './queryFeatures.js'
+
+const mockMap = {
+  project: (l) => ({ x: l[0], y: l[1] }),
+  unproject: (p) => ({ lng: p.x, lat: p.y }),
+  queryRenderedFeatures: () => []
+}
+
+describe('queryFeatures coverage', () => {
+  test('all branches and sorting', () => {
+    // 1. Test empty case
+    expect(queryFeatures(mockMap, { x: 0, y: 0 })).toEqual([])
+
+    // 2. Data-driven loop for all geometry types and distance edge cases
+    const cases = [
+      { type: 'Point', coords: [0, 0], p: { x: 3, y: 4 } },
+      { type: 'LineString', coords: [[0, 0], [10, 0]], p: { x: 5, y: 5 } }, // t=0.5
+      { type: 'LineString', coords: [[0, 0], [0, 0]], p: { x: 1, y: 1 } },   // l2=0
+      { type: 'LineString', coords: [[0, 0], [10, 0]], p: { x: -5, y: 0 } }, // t<0
+      { type: 'MultiPoint', coords: [[0, 0], [10, 10]], p: { x: 1, y: 0 } },
+      { type: 'MultiLineString', coords: [[[0, 0], [10, 0]]], p: { x: 5, y: 1 } },
+      { type: 'Polygon', coords: [[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]], p: { x: 5, y: 5 } }, // Inside
+      { type: 'MultiPolygon', coords: [[[[0, 0], [10, 0], [10, 10], [0, 0]]]], p: { x: 20, y: 20 } },  // Outside
+      { type: 'Unknown', coords: [], p: { x: 0, y: 0 } }
+    ]
+
+    cases.forEach(({ type, coords, p }) => {
+      const feat = { id: type, layer: { id: 'L1' }, geometry: { type, coordinates: coords } }
+      const map = { ...mockMap, queryRenderedFeatures: () => [feat, feat] } // Hits deduplication
+      expect(queryFeatures(map, p).length).toBe(1)
+    })
+
+    // 3. Hits Line 144 (.sort) and property-based ID fallback
+    const f1 = { 
+      properties: { key: 'a' }, 
+      layer: { id: 'layer-A' }, 
+      geometry: { type: 'Point', coordinates: [10, 10] } 
+    }
+    const f2 = { 
+      id: 'b', 
+      layer: { id: 'layer-B' }, 
+      geometry: { type: 'Point', coordinates: [0, 0] } 
+    }
+    
+    // map.queryRenderedFeatures returns multiple items to trigger .sort()
+    const sortMap = { ...mockMap, queryRenderedFeatures: () => [f1, f2] }
+    const result = queryFeatures(sortMap, { x: 0, y: 0 })
+    
+    expect(result.length).toBe(2)
+    expect(result[0].layer.id).toBe('layer-A') // Sorted by layerStack index
+
+    // 4. Hit ray-casting intersect logic (Line 42 branch)
+    const polyFeat = {
+      layer: { id: 'L' },
+      geometry: { type: 'Polygon', coordinates: [[[0, 0], [10, 10], [0, 10], [0, 0]]] }
+    }
+    const rayMap = { ...mockMap, queryRenderedFeatures: () => [polyFeat] }
+    expect(queryFeatures(rayMap, { x: -1, y: 5 }).length).toBe(1)
+  })
+})

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

@@ -28,7 +28,8 @@ const formatDimension = (meters) => {
 
   const miles = meters / METERS_PER_MILE
 
-  if (miles < MILE_THRESHOLD / METERS_PER_MILE) {
+  // Check if we are under the half-mile threshold
+  if (miles < MILE_THRESHOLD) {
     return `${Math.round(meters)}m`
   }
 
@@ -39,8 +40,7 @@ const formatDimension = (meters) => {
   }
 
   const rounded = Math.round(miles)
-  const unit = rounded === 1 ? 'mile' : 'miles'
-  return `${rounded} ${unit}`
+  return `${rounded} miles`
 }
 
 // -----------------------------------------------------------------------------
@@ -191,5 +191,6 @@ export {
   getCardinalMove,
   spatialNavigate,
   getResolution,
-  getPaddedBounds
+  getPaddedBounds,
+  formatDimension
 }