@defra/interactive-map 0.0.22-alpha → 0.0.23-alpha

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

@@ -1,4 +1,5 @@
-import { registerPatterns } from './patternImages.js'
+import { addPatternsToMap } from './patternImages.js'
+import { patternRegistry } from '../../../../src/services/patternRegistry.js'
 
 const OUTDOOR = 'outdoor'
 
@@ -30,182 +31,159 @@ const makeMap = (existingIds = []) => ({
   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 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 pixelRatio = 2
-    const { getPatternImageId } = await import('../../../../src/utils/patternUtils.js')
-    const existingId = getPatternImageId(config, OUTDOOR, registry, pixelRatio)
-    const map = makeMap([existingId])
-    await registerPatterns(map, [config], OUTDOOR, registry, pixelRatio)
-    expect(map.addImage).not.toHaveBeenCalled()
+// ─── addPatternsToMap ─────────────────────────────────────────────────────────
+describe('addPatternsToMap', () => {
+  beforeEach(() => {
+    // Clear the registry and re-register a known pattern to ensure consistent test conditions
+    patternRegistry.clear()
+    patternRegistry.register('stripes', SVG_CONTENT)
   })
-
-  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()
+  describe('addPatternsToMap — registration', () => {
+    it('returns early and does not touch map for empty configs', async () => {
+      const map = makeMap()
+      await addPatternsToMap(map, [], OUTDOOR, patternRegistry)
+      expect(map.hasImage).not.toHaveBeenCalled()
+      expect(map.addImage).not.toHaveBeenCalled()
+    })
+
+    it('calls addImage for an inline fillPatternSvgContent config', async () => {
+      const map = makeMap()
+      const config = { fillPatternSvgContent: SVG_CONTENT }
+      await addPatternsToMap(map, [config], OUTDOOR, patternRegistry)
+      expect(map.addImage).toHaveBeenCalledTimes(1)
+    })
+
+    it('skips addImage when image is already registered', async () => {
+      const style = { fillPattern: 'stripes' }
+      const pixelRatio = 1
+      const map = makeMap(['pattern-mpxwil-2x'])
+      await addPatternsToMap(map, [style], OUTDOOR, patternRegistry, pixelRatio)
+      expect(map.addImage).not.toHaveBeenCalled()
+    })
+
+    it('skips config when pattern has no inner content', async () => {
+      const map = makeMap()
+      patternRegistry.clear()
+      await addPatternsToMap(map, [{ fillPattern: 'unknown' }], OUTDOOR, patternRegistry)
+      expect(map.addImage).not.toHaveBeenCalled()
+    })
+
+    it('skips config when neither fillPattern nor fillPatternSvgContent is set', async () => {
+      const map = makeMap()
+      await addPatternsToMap(map, [{ fillColor: '#ff0000' }], OUTDOOR, patternRegistry)
+      expect(map.addImage).not.toHaveBeenCalled()
+    })
+
+    it('processes multiple configs in parallel', async () => {
+      const map = makeMap()
+      patternRegistry.register('dots', SVG_CONTENT)
+      await addPatternsToMap(map, [{ fillPattern: 'stripes' }, { fillPattern: 'dots' }], OUTDOOR, patternRegistry)
+      expect(map.addImage).toHaveBeenCalledTimes(2)
+    })
   })
 
-  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()
+  describe('addPatternsToMap — pixel ratio', () => {
+    it('encodes effectiveRatio in the image ID and passes it to addImage', async () => {
+      const map = makeMap()
+      const config = { fillPattern: 'stripes' }
+      await addPatternsToMap(map, [config], OUTDOOR, patternRegistry, 2)
+      expect(map.addImage).toHaveBeenCalledTimes(1)
+      expect(map.addImage).toHaveBeenCalledWith(
+        expect.stringMatching(/^pattern-[a-z0-9]+-4x$/),
+        expect.any(Object),
+        { pixelRatio: 4 }
+      )
+    })
+
+    it('floors effectiveRatio at 2 so low-DPI patterns stay crisp', async () => {
+      const map = makeMap()
+      const config = { fillPattern: 'stripes' }
+      await addPatternsToMap(map, [config], OUTDOOR, patternRegistry, 1)
+      expect(map.addImage).toHaveBeenCalledWith(
+        expect.stringMatching(/-2x$/),
+        expect.any(Object),
+        { pixelRatio: 2 }
+      )
+    })
+
+    it('produces different image IDs for ratios above the floor', async () => {
+      const map1 = makeMap()
+      const map2 = makeMap()
+      const config = { fillPattern: 'stripes' }
+      const hiDpi = 3
+      await addPatternsToMap(map1, [config], OUTDOOR, patternRegistry, 2)
+      await addPatternsToMap(map2, [config], OUTDOOR, patternRegistry, hiDpi)
+      const [id2x] = map1.addImage.mock.calls[0]
+      const [id3x] = map2.addImage.mock.calls[0]
+      expect(id2x).not.toBe(id3x)
+      expect(id2x).toMatch(/-4x$/)
+      expect(id3x).toMatch(/-6x$/)
+    })
   })
 
-  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('addPatternsToMap — color resolution and caching', () => {
+    it('applies foreground and background colors when resolving the SVG', async () => {
+      const map = makeMap()
+      const getContextSpy = HTMLCanvasElement.prototype.getContext
+      await addPatternsToMap(
+        map,
+        [{ fillPattern: 'stripes', fillPatternForegroundColor: '#aabbcc', fillPatternBackgroundColor: '#112233' }],
+        OUTDOOR,
+        patternRegistry
+      )
+      expect(map.addImage).toHaveBeenCalledTimes(1)
+      expect(getContextSpy).toHaveBeenCalled()
+    })
+
+    it('resolves style-keyed foreground color for the given mapStyleId', async () => {
+      const map = makeMap()
+      const config = {
+        fillPattern: 'stripes',
+        fillPatternForegroundColor: { outdoor: '#aabbcc', dark: '#112233' }
+      }
+      await addPatternsToMap(map, [config], OUTDOOR, patternRegistry)
+      const map2 = makeMap()
+      await addPatternsToMap(map2, [config], 'dark', patternRegistry)
+      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 config = { fillPattern: 'stripes', fillPatternForegroundColor: '#unique2' }
+      const pixelRatio = 2
+      await addPatternsToMap(map, [config], OUTDOOR, patternRegistry, pixelRatio)
+      const imageId = patternRegistry.getPatternImageId(config, OUTDOOR, pixelRatio)
+      const map2 = makeMap([imageId])
+      await addPatternsToMap(map2, [config], OUTDOOR, patternRegistry, pixelRatio)
+      expect(map2.addImage).not.toHaveBeenCalled()
+    })
   })
-})
 
-describe('registerPatterns — pixel ratio', () => {
-  it('encodes effectiveRatio in the image ID and passes it to addImage', async () => {
-    const map = makeMap()
-    const registry = makePatternRegistry()
-    const config = { fillPattern: 'stripes' }
-    await registerPatterns(map, [config], OUTDOOR, registry, 2)
-    expect(map.addImage).toHaveBeenCalledTimes(1)
-    expect(map.addImage).toHaveBeenCalledWith(
-      expect.stringMatching(/^pattern-[a-z0-9]+-2x$/),
-      expect.any(Object),
-      { pixelRatio: 2 }
-    )
-  })
+  describe('addPatternsToMap — null results', () => {
+    it('does not call addImage when innerContent becomes unavailable inside rasterisePattern', async () => {
+      const getPatternInnerContent = jest.spyOn(patternRegistry, 'getPatternInnerContent').mockReturnValue(undefined)
+      const getPatternImageId = jest.spyOn(patternRegistry, 'getPatternImageId').mockReturnValue('test-id')
 
-  it('floors effectiveRatio at 2 so low-DPI patterns stay crisp', async () => {
-    const map = makeMap()
-    const registry = makePatternRegistry()
-    const config = { fillPattern: 'stripes' }
-    await registerPatterns(map, [config], OUTDOOR, registry, 1)
-    expect(map.addImage).toHaveBeenCalledWith(
-      expect.stringMatching(/-2x$/),
-      expect.any(Object),
-      { pixelRatio: 2 }
-    )
-  })
+      const map = makeMap()
+      await addPatternsToMap(map, [{ fillPattern: 'stripes' }], OUTDOOR, patternRegistry)
+      expect(map.addImage).not.toHaveBeenCalled()
 
-  it('produces different image IDs for ratios above the floor', async () => {
-    const map1 = makeMap()
-    const map2 = makeMap()
-    const registry = makePatternRegistry()
-    const config = { fillPattern: 'stripes' }
-    const hiDpi = 3
-    await registerPatterns(map1, [config], OUTDOOR, registry, 2)
-    await registerPatterns(map2, [config], OUTDOOR, registry, hiDpi)
-    const [id2x] = map1.addImage.mock.calls[0]
-    const [id3x] = map2.addImage.mock.calls[0]
-    expect(id2x).not.toBe(id3x)
-    expect(id2x).toMatch(/-2x$/)
-    expect(id3x).toMatch(/-3x$/)
-  })
-})
+      getPatternImageId.mockRestore()
+      getPatternInnerContent.mockRestore()
+    })
 
-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: '#unique2' }
-    const pixelRatio = 2
-    await registerPatterns(map, [config], OUTDOOR, registry, pixelRatio)
-    const { getPatternImageId } = await import('../../../../src/utils/patternUtils.js')
-    const imageId = getPatternImageId(config, OUTDOOR, registry, pixelRatio)
-    const map2 = makeMap([imageId])
-    await registerPatterns(map2, [config], OUTDOOR, registry, pixelRatio)
-    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 })
+    it('does not call addImage when imageId becomes unavailable inside rasterisePattern', async () => {
+      const getPatternInnerContent = jest.spyOn(patternRegistry, 'getPatternInnerContent').mockReturnValue('CONTENT')
+      const getPatternImageId = jest.spyOn(patternRegistry, 'getPatternImageId')
+        .mockReturnValueOnce('test-id')
         .mockReturnValueOnce(undefined)
-    }
-    const map = makeMap()
-    await registerPatterns(map, [{ fillPattern: 'stripes' }], OUTDOOR, registry)
-    expect(map.addImage).not.toHaveBeenCalled()
+      const map = makeMap()
+      await addPatternsToMap(map, [{ fillPattern: 'stripes' }], OUTDOOR, patternRegistry)
+      expect(map.addImage).not.toHaveBeenCalled()
+      getPatternImageId.mockRestore()
+      getPatternInnerContent.mockRestore()
+    })
   })
 })

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

@@ -10,8 +10,7 @@ const SVG_ERROR_PREVIEW_LENGTH = 80
  */
 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 url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`
     const img = new Image(width, height)
     img.onload = () => {
       const canvas = document.createElement('canvas')
@@ -19,11 +18,9 @@ export const rasteriseToImageData = (svgString, width, height) =>
       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

@@ -9,20 +9,25 @@ 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()
+let imageInstances = []
 
+beforeAll(() => {
   HTMLCanvasElement.prototype.getContext = jest.fn(() => ({
     drawImage: jest.fn(),
     getImageData: jest.fn((_x, _y, w, h) => ({ width: w, height: h }))
   }))
+})
+
+beforeEach(() => {
+  imageInstances = []
+  jest.clearAllMocks()
 
   globalThis.Image = class {
     constructor (w, h) {
       this.width = w
       this.height = h
       this._src = ''
+      imageInstances.push(this)
     }
 
     get src () { return this._src }
@@ -30,40 +35,34 @@ beforeAll(() => {
   }
 })
 
-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 () => {
+  it('resolves with ImageData at the requested dimensions and draws via canvas', 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
+  it('sets img.src to a data URI', async () => {
+    await rasteriseToImageData(SVG, WIDTH, HEIGHT)
+    const src = imageInstances[0]._src
+    expect(src).toMatch(/^data:image\/svg\+xml;charset=utf-8,/)
+    expect(src).toContain(encodeURIComponent(SVG))
+  })
+
+  it('rejects with a truncated SVG preview on error', async () => {
     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
-    }
+    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))
   })
 })

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

@@ -1,17 +1,5 @@
-import { getSymbolDef, getSymbolStyleColors, getSymbolViewBox } from '../../../../src/utils/symbolUtils.js'
-import { rasteriseToImageData } from './rasteriseToImageData.js'
-
 const ANCHOR_LOW = 0.25
 const ANCHOR_HIGH = 0.75
-const HASH_BASE = 36
-
-const hashString = (str) => {
-  let hash = 0
-  for (const ch of str) {
-    hash = Math.trunc(((hash << 5) - hash) + ch.codePointAt(0))
-  }
-  return Math.abs(hash).toString(HASH_BASE)
-}
 
 // ─── MapLibre-specific anchor conversion ──────────────────────────────────────
 
@@ -48,99 +36,48 @@ export const anchorToMaplibre = ([ax, ay]) => {
   return (y + (x && y ? '-' : '') + x) || 'center'
 }
 
-// ─── Image IDs ────────────────────────────────────────────────────────────────
-
-/**
- * Returns a deterministic image ID for a symbol in normal or selected state.
- * Based on the hash of the fully resolved SVG content and the pixel ratio.
- *
- * @param {Object} dataset
- * @param {Object} mapStyle - Current map style config (provides id, selectedColor, haloColor)
- * @param {Object} symbolRegistry
- * @param {boolean} [selected=false]
- * @param {number} [pixelRatio=2] - Device pixel ratio × map size scale factor
- * @returns {string|null}
- */
-export const getSymbolImageId = (dataset, mapStyle, symbolRegistry, selected = false, pixelRatio = 2) => {
-  const symbolDef = getSymbolDef(dataset, symbolRegistry)
-  if (!symbolDef) {
-    return null
-  }
-  const styleColors = getSymbolStyleColors(dataset)
-  const resolved = selected
-    ? symbolRegistry.resolveSelected(symbolDef, styleColors, mapStyle)
-    : symbolRegistry.resolve(symbolDef, styleColors, mapStyle)
-  return `symbol-${selected ? 'sel-' : ''}${hashString(resolved)}-${pixelRatio}x`
-}
-
-// ─── Rasterisation ────────────────────────────────────────────────────────────
-
-// Module-level cache: imageId → ImageData. Avoids re-rasterising identical symbols.
-const imageDataCache = new Map()
-
-const rasteriseSymbolImage = async (dataset, mapStyle, symbolRegistry, selected, pixelRatio) => {
-  const symbolDef = getSymbolDef(dataset, symbolRegistry)
-  if (!symbolDef) {
-    return null
-  }
-  const styleColors = getSymbolStyleColors(dataset)
-  const resolvedContent = selected
-    ? symbolRegistry.resolveSelected(symbolDef, styleColors, mapStyle)
-    : symbolRegistry.resolve(symbolDef, styleColors, mapStyle)
-
-  const imageId = `symbol-${selected ? 'sel-' : ''}${hashString(resolvedContent)}-${pixelRatio}x`
-
-  let imageData = imageDataCache.get(imageId)
-  if (!imageData) {
-    const viewBox = getSymbolViewBox(dataset, symbolDef)
-    const [,, width, height] = viewBox.split(' ').map(Number)
-    // Render at pixelRatio× to keep icons crisp at the current device DPI and map size.
-    // MapLibre receives the matching pixelRatio so the image displays at its original logical size.
-    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * pixelRatio}" height="${height * pixelRatio}" viewBox="${viewBox}">${resolvedContent}</svg>`
-    imageData = await rasteriseToImageData(svgString, width * pixelRatio, height * pixelRatio)
-    imageDataCache.set(imageId, imageData)
-  }
-
-  return { imageId, imageData }
-}
-
 /**
- * Register normal and selected symbol images for the given pre-resolved symbol configs.
+ * Register normal, active (both rings) and selected (black ring) symbol images.
  * Skips images that are already registered (safe to call on style change).
- * Updates `map._symbolImageMap` with normal→selected image ID pairs.
+ * Updates `map._activeSymbolImageMap` (normal→active) and `map._selectedSymbolImageMap` (normal→selected).
  *
  * Callers are responsible for resolving sublayers before calling this function
  * (see `getSymbolConfigs` in the datasets plugin adapter).
  *
  * @param {Object} map - MapLibre map instance
- * @param {Object[]} symbolConfigs - Flat list of datasets/merged-sublayers that have a symbol config
+ * @param {Object[]} styleArray - Flat list of datasets/merged-sublayers that have a symbol config
  * @param {Object} mapStyle - Current map style config (provides id, selectedColor, haloColor)
  * @param {Object} symbolRegistry
  * @param {number} [pixelRatio=2] - Device pixel ratio × map size scale factor (computed by caller)
  * @returns {Promise<void>}
  */
-export const registerSymbols = async (map, symbolConfigs, mapStyle, symbolRegistry, pixelRatio = 2) => {
-  if (!symbolConfigs.length) {
+export const addSymbolsToMap = async (map, styleArray, mapStyle, symbolRegistry, pixelRatio = 2) => {
+  if (!styleArray.length) {
     return
   }
 
-  // Reset the normal→selected image ID lookup so stale entries don't persist after a style change
-  map._symbolImageMap = {}
+  map._activeSymbolImageMap = {}
+  map._selectedSymbolImageMap = {}
 
-  await Promise.all(symbolConfigs.flatMap(config => {
-    const normalId = getSymbolImageId(config, mapStyle, symbolRegistry, false, pixelRatio)
-    const selectedId = getSymbolImageId(config, mapStyle, symbolRegistry, true, pixelRatio)
-    if (normalId && selectedId) {
-      map._symbolImageMap[normalId] = selectedId
+  await Promise.all(styleArray.flatMap(config => {
+    const normalId = symbolRegistry.getSymbolImageId(config, mapStyle, false, pixelRatio)
+    const activeId = symbolRegistry.getSymbolImageId(config, mapStyle, true, pixelRatio)
+    if (normalId && activeId) {
+      map._activeSymbolImageMap[normalId] = activeId
     }
-    return [false, true].map(async (selected) => {
-      const imageId = selected ? selectedId : normalId
-      if (!imageId || map.hasImage(imageId)) {
+    return ['normal', 'active', 'selected'].map(async (variant) => {
+      const imageId = variant === 'active' ? activeId : normalId
+      if (variant !== 'selected' && (!imageId || map.hasImage(imageId))) {
         return
       }
-      const result = await rasteriseSymbolImage(config, mapStyle, symbolRegistry, selected, pixelRatio)
-      if (result && !map.hasImage(result.imageId)) {
-        map.addImage(result.imageId, result.imageData, { pixelRatio })
+      const result = await symbolRegistry.rasteriseSymbolImage(config, mapStyle, variant, pixelRatio)
+      if (result) {
+        if (variant === 'selected' && normalId) {
+          map._selectedSymbolImageMap[normalId] = result.imageId
+        }
+        if (!map.hasImage(result.imageId)) {
+          map.addImage(result.imageId, result.imageData, { pixelRatio })
+        }
       }
     })
   }))