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

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

@@ -0,0 +1,130 @@
+import { setupHoverCursor } from './hoverCursor.js'
+
+const makeMap = (layerTypes = {}, queryResults = []) => ({
+  getCanvas: () => ({ style: { cursor: '' } }),
+  getLayer: (id) => layerTypes[id] ? { type: layerTypes[id] } : undefined,
+  queryRenderedFeatures: jest.fn(() => queryResults),
+  on: jest.fn(),
+  off: jest.fn()
+})
+
+const move = (handler, x = 10, y = 10) =>
+  handler({ point: { x, y } })
+
+describe('setupHoverCursor', () => {
+  /* ------------------------------------------------------------------ */
+  /* 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.getCanvas().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.getCanvas().style.cursor).toBe('')
+  })
+
+  it('removes previous handler before attaching a new one', () => {
+    const map = makeMap({ 'layer-a': 'fill' })
+    const prev = jest.fn()
+    setupHoverCursor(map, ['layer-a'], prev)
+    expect(map.off).toHaveBeenCalledWith('mousemove', prev)
+  })
+
+  it('removes previous handler when clearing layers', () => {
+    const map = makeMap()
+    const prev = jest.fn()
+    setupHoverCursor(map, [], prev)
+    expect(map.off).toHaveBeenCalledWith('mousemove', prev)
+  })
+
+  it('attaches a mousemove listener and returns the handler', () => {
+    const map = makeMap({ 'layer-a': 'fill' })
+    const handler = setupHoverCursor(map, ['layer-a'], null)
+    expect(typeof handler).toBe('function')
+    expect(map.on).toHaveBeenCalledWith('mousemove', handler)
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Mousemove — cursor state                                           */
+  /* ------------------------------------------------------------------ */
+
+  it('sets pointer cursor when a fill layer is hit', () => {
+    const canvas = { style: { cursor: '' } }
+    const map = { ...makeMap({ 'fill-layer': 'fill' }, [{ id: 'f1' }]), getCanvas: () => canvas }
+    const handler = setupHoverCursor(map, ['fill-layer'], null)
+    move(handler)
+    expect(canvas.style.cursor).toBe('pointer')
+  })
+
+  it('clears cursor when no layers are hit', () => {
+    const canvas = { style: { cursor: 'pointer' } }
+    const map = { ...makeMap({ 'fill-layer': 'fill' }, []), getCanvas: () => canvas }
+    const handler = setupHoverCursor(map, ['fill-layer'], null)
+    move(handler)
+    expect(canvas.style.cursor).toBe('')
+  })
+
+  it('clears cursor when no registered layers exist on the map', () => {
+    const canvas = { style: { cursor: 'pointer' } }
+    const map = { ...makeMap({}, []), getCanvas: () => canvas }
+    const handler = setupHoverCursor(map, ['missing-layer'], null)
+    move(handler)
+    expect(canvas.style.cursor).toBe('')
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Line layer tolerance                                               */
+  /* ------------------------------------------------------------------ */
+
+  it('uses bbox query for a pure line layer', () => {
+    const map = makeMap({ hedge: 'line' }, [{ id: 'f1' }])
+    const handler = setupHoverCursor(map, ['hedge'], null)
+    move(handler, 50, 50)
+    expect(map.queryRenderedFeatures).toHaveBeenCalledWith(
+      [[40, 40], [60, 60]],
+      { layers: ['hedge'] }
+    )
+  })
+
+  it('sets pointer when line layer is hit via bbox', () => {
+    const canvas = { style: { cursor: '' } }
+    const map = { ...makeMap({ hedge: 'line' }, [{ id: 'f1' }]), getCanvas: () => canvas }
+    const handler = setupHoverCursor(map, ['hedge'], null)
+    move(handler)
+    expect(canvas.style.cursor).toBe('pointer')
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Stroke + fill companion                                            */
+  /* ------------------------------------------------------------------ */
+
+  it('skips stroke layer when a companion fill layer exists', () => {
+    const map = makeMap({ poly: 'fill', 'poly-stroke': 'line' }, [])
+    const handler = setupHoverCursor(map, ['poly', 'poly-stroke'], null)
+    move(handler)
+    // Only the fill layer should be queried (exact point), not the stroke
+    expect(map.queryRenderedFeatures).toHaveBeenCalledTimes(1)
+    expect(map.queryRenderedFeatures).toHaveBeenCalledWith(
+      expect.objectContaining({ x: 10, y: 10 }),
+      { layers: ['poly'] }
+    )
+  })
+
+  it('does not skip a stroke layer that has no companion fill', () => {
+    const map = makeMap({ 'hedge-stroke': 'line' }, [])
+    const handler = setupHoverCursor(map, ['hedge-stroke'], null)
+    move(handler)
+    expect(map.queryRenderedFeatures).toHaveBeenCalledWith(
+      expect.any(Array),
+      { layers: ['hedge-stroke'] }
+    )
+  })
+})

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

@@ -0,0 +1,70 @@
+import { getPatternInnerContent, getPatternImageId, injectColors } from '../../../../src/utils/patternUtils.js'
+import { getValueForStyle } from '../../../../src/utils/getValueForStyle.js'
+import { rasteriseToImageData } from './rasteriseToImageData.js'
+
+// Module-level cache: imageId → ImageData. Avoids re-rasterising identical patterns.
+const imageDataCache = new Map()
+
+/**
+ * Rasterises a dataset's pattern SVG to ImageData, using an in-memory cache
+ * to avoid re-rasterising identical patterns.
+ *
+ * @param {Object} dataset
+ * @param {string} mapStyleId
+ * @param {Object} patternRegistry
+ * @returns {Promise<{ imageId: string, imageData: ImageData }|null>}
+ */
+const rasterisePattern = async (dataset, mapStyleId, patternRegistry) => {
+  const innerContent = getPatternInnerContent(dataset, patternRegistry)
+  if (!innerContent) {
+    return null
+  }
+
+  const imageId = getPatternImageId(dataset, mapStyleId, patternRegistry)
+  if (!imageId) {
+    return null
+  }
+
+  let imageData = imageDataCache.get(imageId)
+  if (!imageData) {
+    const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black'
+    const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
+    const colored = injectColors(innerContent, fg, bg)
+    const bgRect = `<rect width="16" height="16" fill="${bg}"/>`
+    // pixelRatio: 2 means the map treats this as an 8×8 logical tile — crisp on retina screens.
+    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">${bgRect}${colored}</svg>`
+    imageData = await rasteriseToImageData(svgString, 16, 16)
+    imageDataCache.set(imageId, imageData)
+  }
+
+  return { imageId, imageData }
+}
+
+/**
+ * Register pattern images for the given pre-resolved pattern configs.
+ * Skips images that are already registered (safe to call on style change).
+ * Callers are responsible for sublayer merging before passing configs here
+ * (see `getPatternConfigs` in the datasets plugin adapter).
+ *
+ * @param {Object} map - MapLibre map instance
+ * @param {Object[]} patternConfigs - Flat list of datasets/merged-sublayers with a pattern config
+ * @param {string} mapStyleId
+ * @param {Object} patternRegistry
+ * @returns {Promise<void>}
+ */
+export const registerPatterns = async (map, patternConfigs, mapStyleId, patternRegistry) => {
+  if (!patternConfigs.length) {
+    return
+  }
+
+  await Promise.all(patternConfigs.map(async (config) => {
+    const imageId = getPatternImageId(config, mapStyleId, patternRegistry)
+    if (!imageId || map.hasImage(imageId)) {
+      return
+    }
+    const result = await rasterisePattern(config, mapStyleId, patternRegistry)
+    if (result) {
+      map.addImage(result.imageId, result.imageData, { pixelRatio: 2 })
+    }
+  }))
+}

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

@@ -0,0 +1,180 @@
+import { registerPatterns } from './patternImages.js'
+
+const OUTDOOR = 'outdoor'
+
+const SVG_CONTENT = '<path d="M0 0 L8 8"/>'
+
+beforeAll(() => {
+  globalThis.URL.createObjectURL = jest.fn(() => 'blob:mock')
+  globalThis.URL.revokeObjectURL = jest.fn()
+
+  HTMLCanvasElement.prototype.getContext = jest.fn(() => ({
+    drawImage: jest.fn(),
+    getImageData: jest.fn((_x, _y, w, h) => ({ width: w, height: h }))
+  }))
+
+  globalThis.Image = class {
+    constructor (w, h) {
+      this.width = w
+      this.height = h
+      this._src = ''
+    }
+
+    get src () { return this._src }
+    set src (val) { this._src = val; this.onload?.() }
+  }
+})
+
+const makeMap = (existingIds = []) => ({
+  hasImage: jest.fn((id) => existingIds.includes(id)),
+  addImage: jest.fn()
+})
+
+const makePatternRegistry = (id = 'stripes', content = SVG_CONTENT) => ({
+  get: jest.fn((name) => name === id ? { svgContent: content } : undefined)
+})
+
+// ─── registerPatterns ─────────────────────────────────────────────────────────
+
+describe('registerPatterns — registration', () => {
+  it('returns early and does not touch map for empty configs', async () => {
+    const map = makeMap()
+    const registry = makePatternRegistry()
+    await registerPatterns(map, [], OUTDOOR, registry)
+    expect(map.hasImage).not.toHaveBeenCalled()
+    expect(map.addImage).not.toHaveBeenCalled()
+  })
+
+  it('calls addImage with pixelRatio 2 for a named pattern', async () => {
+    const map = makeMap()
+    const registry = makePatternRegistry()
+    const config = { fillPattern: 'stripes' }
+    await registerPatterns(map, [config], OUTDOOR, registry)
+    expect(map.addImage).toHaveBeenCalledTimes(1)
+    expect(map.addImage).toHaveBeenCalledWith(
+      expect.stringMatching(/^pattern-[a-z0-9]+$/),
+      expect.any(Object),
+      { pixelRatio: 2 }
+    )
+  })
+
+  it('calls addImage for an inline fillPatternSvgContent config', async () => {
+    const map = makeMap()
+    const registry = makePatternRegistry()
+    const config = { fillPatternSvgContent: SVG_CONTENT }
+    await registerPatterns(map, [config], OUTDOOR, registry)
+    expect(map.addImage).toHaveBeenCalledTimes(1)
+  })
+
+  it('skips addImage when image is already registered', async () => {
+    const registry = makePatternRegistry()
+    const config = { fillPattern: 'stripes' }
+    const { getPatternImageId } = await import('../../../../src/utils/patternUtils.js')
+    const existingId = getPatternImageId(config, OUTDOOR, registry)
+    const map = makeMap([existingId])
+    await registerPatterns(map, [config], OUTDOOR, registry)
+    expect(map.addImage).not.toHaveBeenCalled()
+  })
+
+  it('skips config when pattern has no inner content', async () => {
+    const map = makeMap()
+    const emptyRegistry = { get: jest.fn(() => undefined) }
+    await registerPatterns(map, [{ fillPattern: 'unknown' }], OUTDOOR, emptyRegistry)
+    expect(map.addImage).not.toHaveBeenCalled()
+  })
+
+  it('skips config when neither fillPattern nor fillPatternSvgContent is set', async () => {
+    const map = makeMap()
+    const registry = makePatternRegistry()
+    await registerPatterns(map, [{ fillColor: '#ff0000' }], OUTDOOR, registry)
+    expect(map.addImage).not.toHaveBeenCalled()
+  })
+
+  it('processes multiple configs in parallel', async () => {
+    const map = makeMap()
+    const registry = {
+      get: jest.fn((name) => {
+        if (name === 'stripes') { return { svgContent: '<path d="M0 0"/>' } }
+        if (name === 'dots') { return { svgContent: '<circle cx="8" cy="8" r="4"/>' } }
+        return undefined
+      })
+    }
+    await registerPatterns(map, [{ fillPattern: 'stripes' }, { fillPattern: 'dots' }], OUTDOOR, registry)
+    expect(map.addImage).toHaveBeenCalledTimes(2)
+  })
+})
+
+describe('registerPatterns — color resolution and caching', () => {
+  it('applies foreground and background colors when resolving the SVG', async () => {
+    const map = makeMap()
+    const registry = makePatternRegistry()
+    const getContextSpy = HTMLCanvasElement.prototype.getContext
+    await registerPatterns(
+      map,
+      [{ fillPattern: 'stripes', fillPatternForegroundColor: '#aabbcc', fillPatternBackgroundColor: '#112233' }],
+      OUTDOOR,
+      registry
+    )
+    expect(map.addImage).toHaveBeenCalledTimes(1)
+    expect(getContextSpy).toHaveBeenCalled()
+  })
+
+  it('resolves style-keyed foreground color for the given mapStyleId', async () => {
+    const map = makeMap()
+    const registry = makePatternRegistry()
+    const config = {
+      fillPattern: 'stripes',
+      fillPatternForegroundColor: { outdoor: '#aabbcc', dark: '#112233' }
+    }
+    await registerPatterns(map, [config], OUTDOOR, registry)
+    const map2 = makeMap()
+    await registerPatterns(map2, [config], 'dark', registry)
+    const [idOutdoor] = map.addImage.mock.calls[0]
+    const [idDark] = map2.addImage.mock.calls[0]
+    expect(idOutdoor).not.toBe(idDark)
+  })
+
+  it('uses cached ImageData on second call with identical config', async () => {
+    const map = makeMap()
+    const registry = makePatternRegistry()
+    const config = { fillPattern: 'stripes', fillPatternForegroundColor: '#unique1' }
+    await registerPatterns(map, [config], OUTDOOR, registry)
+    const { getPatternImageId } = await import('../../../../src/utils/patternUtils.js')
+    const imageId = getPatternImageId(config, OUTDOOR, registry)
+    const map2 = makeMap([imageId])
+    await registerPatterns(map2, [config], OUTDOOR, registry)
+    expect(map2.addImage).not.toHaveBeenCalled()
+  })
+})
+
+describe('registerPatterns — null results', () => {
+  it('does not call addImage when innerContent becomes unavailable inside rasterisePattern', async () => {
+    // registry.get returns content on the first call (for getPatternImageId in registerPatterns)
+    // but undefined on the second call (for getPatternInnerContent inside rasterisePattern)
+    const registry = {
+      get: jest.fn()
+        .mockReturnValueOnce({ svgContent: SVG_CONTENT })
+        .mockReturnValueOnce(undefined)
+    }
+    const map = makeMap()
+    await registerPatterns(map, [{ fillPattern: 'stripes' }], OUTDOOR, registry)
+    expect(map.addImage).not.toHaveBeenCalled()
+  })
+
+  it('does not call addImage when imageId becomes unavailable inside rasterisePattern', async () => {
+    // Three consecutive calls to registry.get:
+    //   1. getPatternImageId in registerPatterns → returns content → imageId is truthy
+    //   2. getPatternInnerContent directly in rasterisePattern → returns content → passes innerContent guard
+    //   3. getPatternInnerContent inside getPatternImageId in rasterisePattern → returns undefined
+    //      → getPatternImageId returns null → hits the imageId null guard
+    const registry = {
+      get: jest.fn()
+        .mockReturnValueOnce({ svgContent: SVG_CONTENT })
+        .mockReturnValueOnce({ svgContent: SVG_CONTENT })
+        .mockReturnValueOnce(undefined)
+    }
+    const map = makeMap()
+    await registerPatterns(map, [{ fillPattern: 'stripes' }], OUTDOOR, registry)
+    expect(map.addImage).not.toHaveBeenCalled()
+  })
+})

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

@@ -83,12 +83,23 @@ const getMinDistToGeometry = (map, point, geometry) => {
  */
 export const queryFeatures = (map, point, options = {}) => {
   const { radius = 10 } = options
-  const queryArea = [[point.x - radius, point.y - radius], [point.x + radius, point.y + radius]]
-  const rawFeatures = map.queryRenderedFeatures(queryArea)
+
+  const bbox = [[point.x - radius, point.y - radius], [point.x + radius, point.y + radius]]
+  const rawFeatures = map.queryRenderedFeatures(bbox)
   if (rawFeatures.length === 0) {
     return []
   }
 
+  // For symbol/point features, tolerance must not apply — selection should only
+  // fire when the click lands within the rendered icon bounds. An exact point
+  // query uses MapLibre's own icon hit-testing, mirroring the hover cursor behaviour.
+  const exactFeatureKeys = new Set(
+    map.queryRenderedFeatures([point.x, point.y]).map(f => {
+      const rawId = f.id === undefined ? JSON.stringify(f.properties) : f.id
+      return `${f.layer?.source}:${rawId}`
+    })
+  )
+
   // Identify layer visual hierarchy
   const layerStack = []
   rawFeatures.forEach(f => {
@@ -97,12 +108,15 @@ export const queryFeatures = (map, point, options = {}) => {
     }
   })
 
-  // Deduplicate Bottom-Up to favor data layers over highlight layers
+  // Deduplicate Bottom-Up to favor data layers over highlight layers.
+  // Key includes source ID to prevent collisions between features from different
+  // sources that share the same numeric ID (e.g. generateId: true resets per source).
   const seenIds = new Set()
   const uniqueFeatures = []
   for (let i = rawFeatures.length - 1; i >= 0; i--) {
     const f = rawFeatures[i]
-    const featureId = f.id === undefined ? JSON.stringify(f.properties) : f.id
+    const rawId = f.id === undefined ? JSON.stringify(f.properties) : f.id
+    const featureId = `${f.layer?.source}:${rawId}`
     if (seenIds.has(featureId) === false) {
       seenIds.add(featureId)
       uniqueFeatures.push(f)
@@ -112,7 +126,24 @@ export const queryFeatures = (map, point, options = {}) => {
   const clickLngLat = map.unproject(point)
   const clickPt = [clickLngLat.lng, clickLngLat.lat]
 
-  return uniqueFeatures
+  // Discard features where tolerance should not apply:
+  // - Polygons: only include if click is geometrically inside
+  // - Points/symbols: only include if under the exact click point (respects icon bounds)
+  // - Lines: allowed through — tolerance bbox is intentional for them
+  const candidates = uniqueFeatures.filter((f) => {
+    const type = f.geometry.type
+    if (type.includes('Polygon')) {
+      const polys = type === 'Polygon' ? [f.geometry.coordinates] : f.geometry.coordinates
+      return polys.some((ring) => isPointInPolygon(clickPt, ring[0]))
+    }
+    if (type === 'Point' || type === 'MultiPoint') {
+      const rawId = f.id === undefined ? JSON.stringify(f.properties) : f.id
+      return exactFeatureKeys.has(`${f.layer?.source}:${rawId}`)
+    }
+    return true
+  })
+
+  return candidates
     .map((f) => {
       let score = 0
       const type = f.geometry.type
@@ -122,18 +153,9 @@ export const queryFeatures = (map, point, options = {}) => {
       const layerRank = layerStack.indexOf(f.layer.id)
       score += (layerRank * 1000000)
 
-      // PRIORITY 2: CONTAINMENT (Polygon Special Treatment)
+      // PRIORITY 2: POLYGON BOOST (already filtered to inside-only)
       if (type.includes('Polygon')) {
-        const polys = type === 'Polygon' ? [f.geometry.coordinates] : f.geometry.coordinates
-        const isInside = polys.some((ring) => isPointInPolygon(clickPt, ring[0]))
-
-        if (isInside === true) {
-          // Massive boost for polygons if we are actually inside them
-          score -= 500000 // NOSONAR - tolerance used only here
-        } else {
-          // If we are outside a polygon, it loses significantly to anything we ARE inside
-          score += 100000 // NOSONAR - tolerance used only here
-        }
+        score -= 500000 // NOSONAR
       }
 
       // PRIORITY 3: DISTANCE (Final Tie-breaker)

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

@@ -20,7 +20,7 @@ describe('queryFeatures coverage', () => {
       { 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: 'MultiPolygon', coords: [[[[0, 0], [10, 0], [10, 10], [0, 0]]]], p: { x: 5, y: 3 } }, // Inside
       { type: 'Unknown', coords: [], p: { x: 0, y: 0 } }
     ]
 
@@ -49,12 +49,29 @@ describe('queryFeatures coverage', () => {
     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)
+    // 4. Hit ray-casting intersect logic — point inside the polygon
     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)
+    expect(queryFeatures(rayMap, { x: 2, y: 8 }).length).toBe(1)
+
+    // 5. Outside polygon is filtered out (tolerance only applies to lines)
+    const outsideMap = { ...mockMap, queryRenderedFeatures: () => [polyFeat] }
+    expect(queryFeatures(outsideMap, { x: -1, y: 5 }).length).toBe(0)
+
+    // 6. Symbol under exact click point is included
+    const symbolFeat = { id: 'sym', layer: { id: 'S', source: 'src' }, geometry: { type: 'Point', coordinates: [0, 0] } }
+    const symbolMap = { ...mockMap, queryRenderedFeatures: () => [symbolFeat] } // both calls return it
+    expect(queryFeatures(symbolMap, { x: 5, y: 5 }).length).toBe(1)
+
+    // 7. Symbol NOT under exact click point is filtered out
+    let call = 0
+    const symbolMissMap = {
+      ...mockMap,
+      queryRenderedFeatures: () => call++ === 0 ? [symbolFeat] : [] // bbox returns it, exact does not
+    }
+    expect(queryFeatures(symbolMissMap, { x: 5, y: 5 }).length).toBe(0)
   })
 })

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

@@ -0,0 +1,30 @@
+const SVG_ERROR_PREVIEW_LENGTH = 80
+
+/**
+ * Rasterises an SVG string to an ImageData object via a canvas.
+ *
+ * @param {string} svgString - Full SVG markup to render
+ * @param {number} width - Canvas width in pixels
+ * @param {number} height - Canvas height in pixels
+ * @returns {Promise<ImageData>}
+ */
+export const rasteriseToImageData = (svgString, width, height) =>
+  new Promise((resolve, reject) => {
+    const blob = new Blob([svgString], { type: 'image/svg+xml' })
+    const url = URL.createObjectURL(blob)
+    const img = new Image(width, height)
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = width
+      canvas.height = height
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(img, 0, 0, width, height)
+      URL.revokeObjectURL(url)
+      resolve(ctx.getImageData(0, 0, width, height))
+    }
+    img.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error(`Failed to rasterise SVG: ${svgString.slice(0, SVG_ERROR_PREVIEW_LENGTH)}`))
+    }
+    img.src = url
+  })

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

@@ -0,0 +1,69 @@
+import { rasteriseToImageData } from './rasteriseToImageData.js'
+
+const SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="16" cy="16" r="8"/></svg>'
+const WIDTH = 32
+const HEIGHT = 32
+
+// Mirrors SVG_ERROR_PREVIEW_LENGTH in rasteriseToImageData.js
+const ERROR_PREVIEW_LENGTH = 80
+// Length chosen to be well over ERROR_PREVIEW_LENGTH so truncation is exercised
+const LONG_CONTENT_LENGTH = 200
+
+beforeAll(() => {
+  globalThis.URL.createObjectURL = jest.fn(() => 'blob:mock')
+  globalThis.URL.revokeObjectURL = jest.fn()
+
+  HTMLCanvasElement.prototype.getContext = jest.fn(() => ({
+    drawImage: jest.fn(),
+    getImageData: jest.fn((_x, _y, w, h) => ({ width: w, height: h }))
+  }))
+
+  globalThis.Image = class {
+    constructor (w, h) {
+      this.width = w
+      this.height = h
+      this._src = ''
+    }
+
+    get src () { return this._src }
+    set src (val) { this._src = val; this.onload?.() }
+  }
+})
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  globalThis.URL.createObjectURL.mockReturnValue('blob:mock')
+})
+
+describe('rasteriseToImageData', () => {
+  it('resolves with ImageData at the requested dimensions, draws via canvas, and revokes the blob URL', async () => {
+    const getContext = HTMLCanvasElement.prototype.getContext
+    const result = await rasteriseToImageData(SVG, WIDTH, HEIGHT)
+    expect(result).toMatchObject({ width: WIDTH, height: HEIGHT })
+    expect(globalThis.URL.createObjectURL).toHaveBeenCalledWith(expect.any(Blob))
+    expect(globalThis.URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock')
+    const { drawImage, getImageData } = getContext.mock.results[0].value
+    expect(drawImage).toHaveBeenCalledWith(expect.any(Object), 0, 0, WIDTH, HEIGHT)
+    expect(getImageData).toHaveBeenCalledWith(0, 0, WIDTH, HEIGHT)
+  })
+
+  it('rejects with a truncated SVG preview and revokes the blob URL on error', async () => {
+    const originalImage = globalThis.Image
+    globalThis.Image = class {
+      constructor (w, h) { this.width = w; this.height = h; this._src = '' }
+      get src () { return this._src }
+      set src (val) { this._src = val; this.onerror?.() }
+    }
+    try {
+      const longSvg = `<svg>${'x'.repeat(LONG_CONTENT_LENGTH)}</svg>`
+      const error = await rasteriseToImageData(longSvg, WIDTH, HEIGHT).catch(e => e)
+      expect(error.message).toMatch('Failed to rasterise SVG')
+      const preview = error.message.replace('Failed to rasterise SVG: ', '')
+      expect(preview).toHaveLength(ERROR_PREVIEW_LENGTH)
+      expect(preview).toBe(longSvg.slice(0, ERROR_PREVIEW_LENGTH))
+      expect(globalThis.URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock')
+    } finally {
+      globalThis.Image = originalImage
+    }
+  })
+})