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

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

@@ -1,19 +1,23 @@
 import { updateHighlightedFeatures } from './highlightFeatures.js'
 
-function lngLatBounds () {
-  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]))
+class LngLatBounds {
+  constructor () { this.coords = [] }
+  extend (c) { this.coords.push(c) }
+  getWest () { return Math.min(...this.coords.map(c => c[0])) }
+  getSouth () { return Math.min(...this.coords.map(c => c[1])) }
+  getEast () { return Math.max(...this.coords.map(c => c[0])) }
+  getNorth () { return Math.max(...this.coords.map(c => c[1])) }
 }
 
+const SYMBOL_IMAGE = 'symbol-abc123'
 const EMPTY_FILTER = ['==', 'id', '']
-const STALE_SYMBOL_LAYER = 'highlight-stale-symbol'
+const LINE_COLOR = 'line-color'
+const STALE_SYMBOL_LAYER = 'active-highlight-stale-symbol'
+const SEL_STALE_SYMBOL_LAYER = 'selected-highlight-stale-symbol'
 
 const makeMap = (overrides = {}) => ({
-  _highlightedSources: new Set(),
+  _activehighlightSources: new Set(),
+  _selectedhighlightSources: new Set(),
   getLayer: jest.fn(),
   addLayer: jest.fn(),
   moveLayer: jest.fn(),
@@ -25,7 +29,9 @@ const makeMap = (overrides = {}) => ({
   ...overrides
 })
 
-describe('Highlighting Utils — fill and line', () => {
+// ─── Active (cursor) features — active-highlight-* layers ────────────────────
+
+describe('Highlighting Utils — active (cursor) fill and line', () => {
   let map
 
   const ALL_BRANCHES_FEATURES = [
@@ -38,7 +44,7 @@ describe('Highlighting Utils — fill and line', () => {
   const ALL_BRANCHES_STYLES = { l1: { stroke: 'red', fill: 'blue' }, l2: { stroke: 'green' } }
 
   beforeEach(() => {
-    map = makeMap({ _highlightedSources: new Set(['stale']) })
+    map = makeMap({ _activehighlightSources: new Set(['stale']) })
   })
 
   test('All branches', () => {
@@ -48,69 +54,140 @@ describe('Highlighting Utils — fill and line', () => {
       if (id.includes('stale')) { return {} }
       if (id === 'l1') { return { source: 's1', type: 'fill' } }
       if (id === 'l2') { return { source: 's2', type: 'line' } }
-      if (id === 'highlight-s2-fill') { return {} }
+      if (id === 'active-highlight-s2-fill') { return {} }
       return null
     })
 
-    const coordMax = 10
-    const coordMid = 5
-    map.queryRenderedFeatures.mockReturnValue([
-      { id: 1, geometry: { coordinates: [coordMax, coordMax] } },
-      { id: 2, properties: { customId: 4 }, geometry: { coordinates: [[0, 0], [coordMid, coordMid]] } }
-    ])
-
-    const bounds = updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures: ALL_BRANCHES_FEATURES, stylesMap: ALL_BRANCHES_STYLES })
+    updateHighlightedFeatures({ LngLatBounds, map, activeFeatures: ALL_BRANCHES_FEATURES, stylesMap: ALL_BRANCHES_STYLES })
 
-    expect(map.setFilter).toHaveBeenCalledWith('highlight-stale-fill', EMPTY_FILTER)
+    expect(map.setFilter).toHaveBeenCalledWith('active-highlight-stale-fill', EMPTY_FILTER)
     expect(map.setFilter).toHaveBeenCalledWith(STALE_SYMBOL_LAYER, EMPTY_FILTER)
-    expect(map.setFilter).toHaveBeenCalledWith('highlight-s2-fill', EMPTY_FILTER)
-    expect(map.setFilter).toHaveBeenCalledWith('highlight-s2-line', expect.arrayContaining([['get', 'customId']]))
-    expect(bounds).toEqual([0, 0, 10, 10])
+    expect(map.setFilter).toHaveBeenCalledWith('active-highlight-s2-fill', EMPTY_FILTER)
+    expect(map.setFilter).toHaveBeenCalledWith('active-highlight-s2-line', expect.arrayContaining([['get', 'customId']]))
   })
 
-  test('null _highlightedSources falls back to empty set; line geom skips absent fill layer', () => {
-    map._highlightedSources = null
+  test('null _activehighlightSources falls back to empty set; line geom skips absent fill layer', () => {
+    map._activehighlightSources = null
     map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null) // NOSONAR
-    updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures: [{ featureId: 1, layerId: 'l1' }], stylesMap: { l1: { stroke: 'red' } } })
-    expect(map.setFilter).not.toHaveBeenCalledWith('highlight-s1-fill', expect.anything())
+    updateHighlightedFeatures({ LngLatBounds, map, activeFeatures: [{ featureId: 1, layerId: 'l1' }], stylesMap: { l1: { stroke: 'red' } } })
+    expect(map.setFilter).not.toHaveBeenCalledWith('active-highlight-s1-fill', expect.anything())
   })
 
   test('persistent source skips cleanup; missing stale layers skip setFilter', () => {
-    map._highlightedSources = new Set(['stale', 's1'])
+    map._activehighlightSources = new Set(['stale', 's1'])
     map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null) // NOSONAR
-    updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures: [{ featureId: 1, layerId: 'l1' }], stylesMap: { l1: { stroke: 'red' } } })
+    updateHighlightedFeatures({ LngLatBounds, map, activeFeatures: [{ featureId: 1, layerId: 'l1' }], stylesMap: { l1: { stroke: 'red' } } })
     expect(map.setFilter).not.toHaveBeenCalledWith(expect.stringContaining('stale'), expect.anything())
   })
+
+  test('active features get selected-style overlay line on top', () => {
+    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null) // NOSONAR
+    const stylesMap = { l1: { stroke: 'yellow', selectionStroke: 'black', strokeWidth: 3, activeStrokeWidth: 9 } }
+    updateHighlightedFeatures({ LngLatBounds, map, activeFeatures: [{ featureId: 1, layerId: 'l1' }], stylesMap })
+
+    const activeColorCall = map.setPaintProperty.mock.calls.find(c => c[0] === 'active-highlight-s1-line' && c[1] === LINE_COLOR)
+    expect(activeColorCall?.[2]).toBe('yellow')
+
+    const overlayColorCall = map.setPaintProperty.mock.calls.find(c => c[0] === 'active-highlight-inner-s1-line' && c[1] === LINE_COLOR)
+    expect(overlayColorCall?.[2]).toBe('black')
+  })
+
+  test('overlay cleanup when active features cleared', () => {
+    map._activehighlightinnerSources = new Set(['stale'])
+    map.getLayer.mockImplementation(id => id === 'active-highlight-inner-stale-line' ? {} : null) // NOSONAR
+    updateHighlightedFeatures({ LngLatBounds, map, activeFeatures: [], stylesMap: {} })
+    expect(map.setFilter).toHaveBeenCalledWith('active-highlight-inner-stale-line', EMPTY_FILTER)
+  })
 })
 
+// ─── Selected features — selected-highlight-* layers ─────────────────────────
+
+describe('Highlighting Utils — selected fill and line', () => {
+  let map
+
+  const SELECTED_FEATURES = [
+    { featureId: 1, layerId: 'l1', geometry: { type: 'Polygon' } }
+  ]
+
+  const STYLES = { l1: { stroke: 'red', selectionStroke: '#ffdd00', fill: 'blue', strokeWidth: 3 } }
+
+  beforeEach(() => {
+    map = makeMap({ _selectedhighlightSources: new Set(['stale']) })
+  })
+
+  test('creates selected-highlight-* layers with selectionStroke color', () => {
+    map.getLayer.mockImplementation(id => { // NOSONAR
+      if (id.includes('stale')) { return {} }
+      if (id === 'l1') { return { source: 's1', type: 'fill' } }
+      return null
+    })
+    updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures: SELECTED_FEATURES, stylesMap: STYLES })
+    expect(map.setFilter).toHaveBeenCalledWith(SEL_STALE_SYMBOL_LAYER, EMPTY_FILTER)
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({ id: 'selected-highlight-s1-line' }))
+    const linePaintCall = map.setPaintProperty.mock.calls.find(c => c[0] === 'selected-highlight-s1-line' && c[1] === LINE_COLOR)
+    expect(linePaintCall).toBeTruthy()
+    expect(linePaintCall[2]).toBe('#ffdd00')
+  })
+
+  test('bounds matched using idProperty when set', () => {
+    const features = [{ featureId: 'parcel-1', layerId: 'l1', idProperty: 'parcelId', geometry: { type: 'Polygon' } }]
+    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'fill' } : null) // NOSONAR
+    map.queryRenderedFeatures.mockReturnValue([
+      { properties: { parcelId: 'parcel-1' }, geometry: { coordinates: [[1, 2]] } }
+    ])
+    const bounds = updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures: features, stylesMap: STYLES })
+    expect(bounds).not.toBeNull()
+  })
+
+  test('bounds are calculated from selected features only', () => {
+    const features = [
+      { featureId: 1, layerId: 'l1', geometry: { type: 'Polygon' } },
+      { featureId: 2, layerId: 'l1', geometry: { type: 'Polygon' } }
+    ]
+    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'line' } : null) // NOSONAR
+    const coordMax = 10
+    const coordMid = 5
+    map.queryRenderedFeatures.mockReturnValue([
+      { id: 1, geometry: { coordinates: [coordMax, coordMax] } },
+      { id: 2, geometry: { coordinates: [[0, 0], [coordMid, coordMid]] } }
+    ])
+    const bounds = updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures: features, stylesMap: STYLES })
+    expect(bounds).toEqual([0, 0, 10, 10])
+  })
+})
+
+// ─── Layer management ─────────────────────────────────────────────────────────
+
 describe('Highlighting Utils — layer management', () => {
   let map
 
   beforeEach(() => {
-    map = makeMap({ _highlightedSources: new Set(['stale']) })
+    map = makeMap({ _activehighlightSources: new Set(['stale']) })
   })
 
-  test('reuses existing highlight layer; new layer spreads sourceLayer', () => {
+  test('reuses existing active-highlight layer; new layers spread sourceLayer', () => {
     map.getLayer.mockImplementation(id => { // NOSONAR
       if (id === 'l1') { return { source: 's1', type: 'line' } }
       if (id === 'l2') { return { source: 's2', type: 'line', sourceLayer: 'tiles' } }
-      if (id === 'highlight-s1-line') { return {} }
+      if (id === 'active-highlight-s1-line') { return {} }
       return null
     })
-    updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures: [{ featureId: 1, layerId: 'l1' }, { featureId: 2, layerId: 'l2' }], stylesMap: { l1: { stroke: 'blue' }, l2: { stroke: 'green' } } })
-    expect(map.addLayer).toHaveBeenCalledTimes(1)
+    updateHighlightedFeatures({ LngLatBounds, map, activeFeatures: [{ featureId: 1, layerId: 'l1' }, { featureId: 2, layerId: 'l2' }], stylesMap: { l1: { stroke: 'blue' }, l2: { stroke: 'green' } } })
+    // active-highlight-s1-line reused; active-highlight-s2-line, active-highlight-inner-s1-line, active-highlight-inner-s2-line are new
+    expect(map.addLayer).toHaveBeenCalledTimes(3)
     expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({ 'source-layer': 'tiles' }))
   })
 
   test('returns null when no rendered features match', () => {
-    expect(updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures: [], stylesMap: {} })).toBeNull()
+    expect(updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures: [], stylesMap: {} })).toBeNull()
   })
 })
 
-describe('Highlighting Utils — symbol layers', () => {
-  const SYMBOL_IMAGE = 'symbol-abc123'
-  const SELECTED_IMAGE = 'symbol-sel-abc123'
-  const HIGHLIGHT_LAYER = 'highlight-s1-symbol'
+// ─── Symbol layers ────────────────────────────────────────────────────────────
+
+describe('Highlighting Utils — symbol layers (active cursor)', () => {
+  const ACTIVE_IMAGE = 'symbol-act-abc123'
+  const HIGHLIGHT_LAYER = 'active-highlight-s1-symbol'
   const ICON_IMAGE = 'icon-image'
   const ICON_ANCHOR = 'icon-anchor'
   const POINT_FEATURE = { featureId: 1, layerId: 'l1', geometry: { type: 'Point' } }
@@ -119,22 +196,22 @@ describe('Highlighting Utils — symbol layers', () => {
 
   beforeEach(() => {
     map = makeMap()
-    map._symbolImageMap = { [SYMBOL_IMAGE]: SELECTED_IMAGE }
+    map._activeSymbolImageMap = { [SYMBOL_IMAGE]: ACTIVE_IMAGE }
     map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'symbol' } : null) // NOSONAR
     map.getLayoutProperty.mockReturnValue(SYMBOL_IMAGE)
   })
 
-  const run = (selectedFeatures = [POINT_FEATURE]) =>
-    updateHighlightedFeatures({ LngLatBounds: lngLatBounds, map, selectedFeatures, stylesMap: { l1: {} } })
+  const run = (activeFeatures = [POINT_FEATURE]) =>
+    updateHighlightedFeatures({ LngLatBounds, map, activeFeatures, stylesMap: { l1: {} } })
 
-  test('creates symbol highlight layer with selected image variant', () => {
+  test('creates symbol highlight layer with cursor image variant', () => {
     run()
     expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
       id: HIGHLIGHT_LAYER,
       type: 'symbol',
-      layout: expect.objectContaining({ [ICON_IMAGE]: SELECTED_IMAGE })
+      layout: expect.objectContaining({ [ICON_IMAGE]: ACTIVE_IMAGE })
     }))
-    expect(map.setLayoutProperty).toHaveBeenCalledWith(HIGHLIGHT_LAYER, ICON_IMAGE, SELECTED_IMAGE)
+    expect(map.setLayoutProperty).toHaveBeenCalledWith(HIGHLIGHT_LAYER, ICON_IMAGE, ACTIVE_IMAGE)
   })
 
   test('reads icon-anchor from original layer', () => {
@@ -171,20 +248,54 @@ describe('Highlighting Utils — symbol layers', () => {
     })
     run()
     expect(map.addLayer).not.toHaveBeenCalled()
-    expect(map.setLayoutProperty).toHaveBeenCalledWith(HIGHLIGHT_LAYER, ICON_IMAGE, SELECTED_IMAGE)
+    expect(map.setLayoutProperty).toHaveBeenCalledWith(HIGHLIGHT_LAYER, ICON_IMAGE, ACTIVE_IMAGE)
   })
 
-  test('skips highlight when icon-image has no entry in _symbolImageMap', () => {
-    map.getLayoutProperty.mockReturnValue('symbol-abc123')
-    map._symbolImageMap = {} // no mapping registered
+  test('skips highlight when icon-image has no entry in _activeSymbolImageMap', () => {
+    map.getLayoutProperty.mockReturnValue(SYMBOL_IMAGE)
+    map._activeSymbolImageMap = {} // no mapping registered
     run()
     expect(map.addLayer).not.toHaveBeenCalled()
   })
 
   test('cleans up stale symbol highlight layer', () => {
-    map._highlightedSources = new Set(['stale'])
+    map._activehighlightSources = new Set(['stale'])
     map.getLayer.mockImplementation(id => id === STALE_SYMBOL_LAYER ? { type: 'symbol' } : null) // NOSONAR
     run([])
     expect(map.setFilter).toHaveBeenCalledWith(STALE_SYMBOL_LAYER, EMPTY_FILTER)
   })
 })
+
+describe('Highlighting Utils — symbol layers (committed selection)', () => {
+  const SELECTED_IMAGE = 'symbol-sel-abc123'
+  const SEL_HIGHLIGHT_LAYER = 'selected-highlight-s1-symbol'
+  const ICON_IMAGE = 'icon-image'
+  const POINT_FEATURE = { featureId: 1, layerId: 'l1', geometry: { type: 'Point' } }
+
+  let map
+
+  beforeEach(() => {
+    map = makeMap()
+    map._selectedSymbolImageMap = { [SYMBOL_IMAGE]: SELECTED_IMAGE }
+    map.getLayer.mockImplementation(id => id === 'l1' ? { source: 's1', type: 'symbol' } : null) // NOSONAR
+    map.getLayoutProperty.mockReturnValue(SYMBOL_IMAGE)
+  })
+
+  const run = (selectedFeatures = [POINT_FEATURE]) =>
+    updateHighlightedFeatures({ LngLatBounds, map, selectedFeatures, stylesMap: { l1: {} } })
+
+  test('creates selected-highlight symbol layer with selected image variant', () => {
+    run()
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      id: SEL_HIGHLIGHT_LAYER,
+      type: 'symbol',
+      layout: expect.objectContaining({ [ICON_IMAGE]: SELECTED_IMAGE })
+    }))
+  })
+
+  test('skips highlight when icon-image has no entry in _selectedSymbolImageMap', () => {
+    map._selectedSymbolImageMap = {}
+    run()
+    expect(map.addLayer).not.toHaveBeenCalled()
+  })
+})

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

@@ -5,6 +5,16 @@ export function cleanCanvas (map) {
   canvas.setAttribute('tabindex', -1) // If removed altogether Chrome can add a focus-visible style
   canvas.removeAttribute('aria-label')
   canvas.style.display = 'block'
+  // The map container is aria-hidden, but MapLibre's canvas inside it can still
+  // receive focus, triggering: "Blocked aria-hidden on an element because its
+  // descendant retained focus." Immediately blurring and returning focus to
+  // relatedTarget prevents the canvas from holding focus inside an aria-hidden subtree.
+  canvas.addEventListener('focus', (event) => { // NOSONAR
+    canvas.blur()
+    if (event.relatedTarget) {
+      event.relatedTarget.focus()
+    }
+  })
 }
 
 // Fix touch preventDefault console error

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

@@ -16,6 +16,37 @@ describe('cleanCanvas', () => {
     expect(canvas.hasAttribute('aria-label')).toBe(false)
     expect(canvas.style.display).toBe('block')
   })
+
+  it('redirects focus back to the previously focused element when canvas receives focus', () => {
+    const canvas = document.createElement('canvas')
+    const map = { getCanvas: () => canvas }
+    const prev = document.createElement('button')
+    prev.focus = jest.fn()
+    document.body.appendChild(canvas)
+
+    cleanCanvas(map)
+
+    const event = new FocusEvent('focus', { relatedTarget: prev })
+    const blurSpy = jest.spyOn(canvas, 'blur')
+    canvas.dispatchEvent(event)
+
+    expect(blurSpy).toHaveBeenCalled()
+    expect(prev.focus).toHaveBeenCalled()
+  })
+
+  it('blurs canvas without restoring focus when there is no previous element', () => {
+    const canvas = document.createElement('canvas')
+    const map = { getCanvas: () => canvas }
+    document.body.appendChild(canvas)
+
+    cleanCanvas(map)
+
+    const event = new FocusEvent('focus', { relatedTarget: null })
+    const blurSpy = jest.spyOn(canvas, 'blur')
+    canvas.dispatchEvent(event)
+
+    expect(blurSpy).toHaveBeenCalled()
+  })
 })
 
 describe('applyPreventDefaultFix', () => {

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

@@ -1,4 +1,4 @@
-import { getPatternInnerContent, getPatternImageId, injectColors, PATTERN_MIN_PIXEL_RATIO } from '../../../../src/utils/patternUtils.js'
+import { injectColors, getEffectivePixelRatio } from '../../../../src/utils/patternUtils.js'
 import { getValueForStyle } from '../../../../src/utils/getValueForStyle.js'
 import { rasteriseToImageData } from './rasteriseToImageData.js'
 
@@ -16,12 +16,12 @@ const imageDataCache = new Map()
  * @returns {Promise<{ imageId: string, imageData: ImageData }|null>}
  */
 const rasterisePattern = async (dataset, mapStyleId, patternRegistry, pixelRatio) => {
-  const innerContent = getPatternInnerContent(dataset, patternRegistry)
+  const innerContent = patternRegistry.getPatternInnerContent(dataset)
   if (!innerContent) {
     return null
   }
 
-  const imageId = getPatternImageId(dataset, mapStyleId, patternRegistry, pixelRatio)
+  const imageId = patternRegistry.getPatternImageId(dataset, mapStyleId, pixelRatio)
   if (!imageId) {
     return null
   }
@@ -32,9 +32,7 @@ const rasterisePattern = async (dataset, mapStyleId, patternRegistry, pixelRatio
     const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
     const colored = injectColors(innerContent, fg, bg)
     const bgRect = `<rect width="16" height="16" fill="${bg}"/>`
-    // effectiveRatio floored at PATTERN_MIN_PIXEL_RATIO keeps the canvas at ≥16px physical so
-    // SVG detail renders crisply. Logical tile size = physicalSize / effectiveRatio = 8px always.
-    const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio)
+    const effectiveRatio = getEffectivePixelRatio(pixelRatio)
     const physicalSize = Math.round(8 * effectiveRatio)
     const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${physicalSize}" height="${physicalSize}" viewBox="0 0 16 16">${bgRect}${colored}</svg>`
     imageData = await rasteriseToImageData(svgString, physicalSize, physicalSize)
@@ -51,20 +49,20 @@ const rasterisePattern = async (dataset, mapStyleId, patternRegistry, pixelRatio
  * (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 {Object[]} styleArray - Flat list of datasets/merged-sublayers with a pattern config
  * @param {string} mapStyleId
  * @param {Object} patternRegistry
  * @param {number} pixelRatio
  * @returns {Promise<void>}
  */
-export const registerPatterns = async (map, patternConfigs, mapStyleId, patternRegistry, pixelRatio) => {
-  if (!patternConfigs.length) {
+export const addPatternsToMap = async (map, styleArray, mapStyleId, patternRegistry, pixelRatio) => {
+  if (!styleArray.length) {
     return
   }
 
-  const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio)
-  await Promise.all(patternConfigs.map(async (config) => {
-    const imageId = getPatternImageId(config, mapStyleId, patternRegistry, pixelRatio)
+  const effectiveRatio = getEffectivePixelRatio(pixelRatio)
+  await Promise.all(styleArray.map(async (config) => {
+    const imageId = patternRegistry.getPatternImageId(config, mapStyleId, pixelRatio)
     if (!imageId || map.hasImage(imageId)) {
       return
     }