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

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

@@ -0,0 +1,248 @@
+import { anchorToMaplibre, getSymbolImageId, registerSymbols } from './symbolImages.js'
+import { symbolRegistry } from '../../../../src/services/symbolRegistry.js'
+
+const STYLE_ID = 'test'
+const mapStyle = { id: STYLE_ID }
+
+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(() => {
+  symbolRegistry.setDefaults({})
+})
+
+// ─── anchorToMaplibre ─────────────────────────────────────────────────────────
+
+describe('anchorToMaplibre', () => {
+  it('returns center for [0.5, 0.5]', () => {
+    expect(anchorToMaplibre([0.5, 0.5])).toBe('center')
+  })
+
+  it('returns top for [0.5, 0]', () => {
+    expect(anchorToMaplibre([0.5, 0])).toBe('top')
+  })
+
+  it('returns bottom for [0.5, 1]', () => {
+    expect(anchorToMaplibre([0.5, 1])).toBe('bottom')
+  })
+
+  it('returns left for [0, 0.5]', () => {
+    expect(anchorToMaplibre([0, 0.5])).toBe('left')
+  })
+
+  it('returns right for [1, 0.5]', () => {
+    expect(anchorToMaplibre([1, 0.5])).toBe('right')
+  })
+
+  it('returns top-left for [0, 0]', () => {
+    expect(anchorToMaplibre([0, 0])).toBe('top-left')
+  })
+
+  it('returns top-right for [1, 0]', () => {
+    expect(anchorToMaplibre([1, 0])).toBe('top-right')
+  })
+
+  it('returns bottom-left for [0, 1]', () => {
+    expect(anchorToMaplibre([0, 1])).toBe('bottom-left')
+  })
+
+  it('returns bottom-right for [1, 1]', () => {
+    expect(anchorToMaplibre([1, 1])).toBe('bottom-right')
+  })
+
+  it('snaps pin anchor [0.5, 0.9] to bottom', () => {
+    expect(anchorToMaplibre([0.5, 0.9])).toBe('bottom') // NOSONAR S109 — deliberate boundary test value
+  })
+
+  it('returns center for values in the middle band', () => {
+    expect(anchorToMaplibre([0.5, 0.5])).toBe('center')
+    expect(anchorToMaplibre([0.26, 0.26])).toBe('center') // NOSONAR S109 — just inside center band
+    expect(anchorToMaplibre([0.74, 0.74])).toBe('center') // NOSONAR S109 — just inside center band
+  })
+
+  it('returns top at boundary value 0.25', () => {
+    expect(anchorToMaplibre([0.5, 0.25])).toBe('top')
+  })
+
+  it('returns bottom at boundary value 0.75', () => {
+    expect(anchorToMaplibre([0.5, 0.75])).toBe('bottom') // NOSONAR S109 — ANCHOR_HIGH boundary
+  })
+})
+
+// ─── getSymbolImageId ─────────────────────────────────────────────────────────
+
+describe('getSymbolImageId', () => {
+  it('returns null when dataset has no symbol', () => {
+    expect(getSymbolImageId({}, mapStyle, symbolRegistry)).toBeNull()
+  })
+
+  it('returns null for an unregistered symbol id', () => {
+    expect(getSymbolImageId({ symbol: 'does-not-exist' }, mapStyle, symbolRegistry)).toBeNull()
+  })
+
+  it('returns a string prefixed symbol- for normal state', () => {
+    const id = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry)
+    expect(typeof id).toBe('string')
+    expect(id).toMatch(/^symbol-[a-z0-9]+-\d+(\.\d+)?x$/)
+  })
+
+  it('returns a string prefixed symbol-sel- for selected state', () => {
+    const id = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry, true)
+    expect(typeof id).toBe('string')
+    expect(id).toMatch(/^symbol-sel-[a-z0-9]+-\d+(\.\d+)?x$/)
+  })
+
+  it('normal and selected ids differ for the same dataset', () => {
+    const normalId = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry, false)
+    const selectedId = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry, true)
+    expect(normalId).not.toBe(selectedId)
+  })
+
+  it('same dataset and style always produces the same id', () => {
+    const id1 = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry)
+    const id2 = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry)
+    expect(id1).toBe(id2)
+  })
+
+  it('different symbols produce different ids', () => {
+    const pinId = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry)
+    const circleId = getSymbolImageId({ symbol: 'circle' }, mapStyle, symbolRegistry)
+    expect(pinId).not.toBe(circleId)
+  })
+
+  it('different backgrounds produce different ids', () => {
+    const redId = getSymbolImageId({ symbol: 'pin', symbolBackgroundColor: '#ff0000' }, mapStyle, symbolRegistry)
+    const blueId = getSymbolImageId({ symbol: 'pin', symbolBackgroundColor: '#0000ff' }, mapStyle, symbolRegistry)
+    expect(redId).not.toBe(blueId)
+  })
+
+  it('resolves inline symbolSvgContent', () => {
+    const dataset = {
+      symbolSvgContent: '<circle cx="19" cy="19" r="12" fill="{{backgroundColor}}"/>',
+      symbolViewBox: '0 0 38 38',
+      symbolAnchor: [0.5, 0.5]
+    }
+    const id = getSymbolImageId(dataset, mapStyle, symbolRegistry)
+    expect(id).toMatch(/^symbol-[a-z0-9]+-\d+(\.\d+)?x$/)
+  })
+})
+
+// ─── registerSymbols ──────────────────────────────────────────────────────────
+
+const makeMap = (existingIds = []) => ({
+  _symbolImageMap: {},
+  hasImage: jest.fn((id) => existingIds.includes(id)),
+  addImage: jest.fn()
+})
+
+describe('registerSymbols — registration', () => {
+  it('returns early and does not touch map for empty configs', async () => {
+    const map = makeMap()
+    await registerSymbols(map, [], mapStyle, symbolRegistry)
+    expect(map.hasImage).not.toHaveBeenCalled()
+    expect(map.addImage).not.toHaveBeenCalled()
+  })
+
+  it('resets _symbolImageMap before processing', async () => {
+    const map = makeMap()
+    map._symbolImageMap = { stale: 'entry' }
+    await registerSymbols(map, [{ symbol: 'pin' }], mapStyle, symbolRegistry)
+    expect(map._symbolImageMap).not.toHaveProperty('stale')
+  })
+
+  it('calls addImage for normal and selected variants', async () => {
+    const map = makeMap()
+    await registerSymbols(map, [{ symbol: 'pin' }], mapStyle, symbolRegistry)
+    expect(map.addImage).toHaveBeenCalledTimes(2)
+    expect(map.addImage).toHaveBeenCalledWith(expect.stringMatching(/^symbol-[a-z0-9]+-\d+(\.\d+)?x$/), expect.any(Object), { pixelRatio: 2 })
+    expect(map.addImage).toHaveBeenCalledWith(expect.stringMatching(/^symbol-sel-[a-z0-9]+-\d+(\.\d+)?x$/), expect.any(Object), { pixelRatio: 2 })
+  })
+
+  it('populates _symbolImageMap with normal → selected id pairs', async () => {
+    const map = makeMap()
+    await registerSymbols(map, [{ symbol: 'pin' }], mapStyle, symbolRegistry)
+    const normalId = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry, false)
+    const selectedId = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry, true)
+    expect(map._symbolImageMap[normalId]).toBe(selectedId)
+  })
+
+  it('skips addImage when image is already registered', async () => {
+    const normalId = getSymbolImageId({ symbol: 'circle' }, mapStyle, symbolRegistry, false)
+    const selectedId = getSymbolImageId({ symbol: 'circle' }, mapStyle, symbolRegistry, true)
+    const map = makeMap([normalId, selectedId])
+    await registerSymbols(map, [{ symbol: 'circle' }], mapStyle, symbolRegistry)
+    expect(map.addImage).not.toHaveBeenCalled()
+  })
+
+  it('processes multiple configs independently', async () => {
+    const map = makeMap()
+    await registerSymbols(map, [{ symbol: 'pin' }, { symbol: 'circle' }], mapStyle, symbolRegistry)
+    expect(map.addImage).toHaveBeenCalledTimes(4)
+    expect(Object.keys(map._symbolImageMap)).toHaveLength(2)
+  })
+})
+
+describe('registerSymbols — null results and caching', () => {
+  it('does not call addImage when rasteriseSymbolImage returns null', async () => {
+    // getSymbolImageId (called twice — normal + selected) needs a real symbolDef to produce imageIds,
+    // but rasteriseSymbolImage must get undefined from getSymbolDef so it returns null.
+    // The registry.get call order: [1] getSymbolImageId normal, [2] getSymbolImageId selected,
+    // [3] rasteriseSymbolImage normal, [4] rasteriseSymbolImage selected.
+    const pinDef = symbolRegistry.get('pin')
+    const getSpy = jest.spyOn(symbolRegistry, 'get')
+      .mockReturnValueOnce(pinDef)
+      .mockReturnValueOnce(pinDef)
+      .mockReturnValueOnce(undefined)
+      .mockReturnValueOnce(undefined)
+    const map = makeMap()
+    await registerSymbols(map, [{ symbol: 'pin' }], mapStyle, symbolRegistry)
+    expect(map.addImage).not.toHaveBeenCalled()
+    getSpy.mockRestore()
+  })
+
+  it('skips config when symbolDef cannot be resolved', async () => {
+    const map = makeMap()
+    await registerSymbols(map, [{ symbol: 'no-such-symbol' }], mapStyle, symbolRegistry)
+    expect(map.addImage).not.toHaveBeenCalled()
+    expect(map._symbolImageMap).toEqual({})
+  })
+
+  it('reuses cached imageData when called again with the same pixelRatio', async () => {
+    // Use an unusual ratio so this test owns its cache entries
+    const uniqueRatio = 7
+
+    const map1 = makeMap()
+    const blobCallsBefore = globalThis.URL.createObjectURL.mock.calls.length
+    await registerSymbols(map1, [{ symbol: 'pin' }], mapStyle, symbolRegistry, uniqueRatio)
+    const blobCallsAfterFirst = globalThis.URL.createObjectURL.mock.calls.length
+    // Rasterisation ran — blob was created
+    expect(blobCallsAfterFirst).toBeGreaterThan(blobCallsBefore)
+
+    // Second call with a fresh map (hasImage → false) but same ratio → cache hit
+    const map2 = makeMap()
+    await registerSymbols(map2, [{ symbol: 'pin' }], mapStyle, symbolRegistry, uniqueRatio)
+    const blobCallsAfterSecond = globalThis.URL.createObjectURL.mock.calls.length
+    // No new blob created — rasterisation was skipped via cache
+    expect(blobCallsAfterSecond).toBe(blobCallsAfterFirst)
+    // addImage still called because map2 has no pre-registered images
+    expect(map2.addImage).toHaveBeenCalledTimes(2)
+  })
+})

package/src/App/components/Markers/Markers.jsx

@@ -1,47 +1,142 @@
-import { markerSvgPaths } from '../../../config/appConfig.js'
+import { useEffect, useRef, useState } from 'react'
 import { useMarkers } from '../../hooks/useMarkersAPI.js'
 import { useConfig } from '../../store/configContext.js'
 import { useMap } from '../../store/mapContext.js'
-import { getValueForStyle } from '../../../utils/getValueForStyle.js'
+import { useService } from '../../store/serviceContext.js'
 import { stringToKebab } from '../../../utils/stringToKebab.js'
+import { scaleFactor } from '../../../config/appConfig.js'
+
+// Marker properties handled internally — excluded from style value resolution
+const INTERNAL_KEYS = new Set(['id', 'coords', 'x', 'y', 'isVisible', 'symbol', 'symbolSvgContent', 'viewBox', 'anchor', 'selectedColor', 'selectedWidth'])
+
+const resolveSymbolDef = (marker, defaults, symbolRegistry) => {
+  const svgContent = marker.symbolSvgContent || defaults.symbolSvgContent
+  // Inline symbolSvgContent takes precedence over a registered symbol,
+  // cascading through marker → constructor defaults
+  return svgContent
+    ? { svg: svgContent }
+    : symbolRegistry.get(marker.symbol || defaults.symbol)
+}
+
+const resolveViewBox = (marker, defaults, symbolDef) =>
+  marker.viewBox || defaults.viewBox || symbolDef?.viewBox || '0 0 38 38'
+
+const resolveAnchor = (marker, defaults, symbolDef) =>
+  marker.anchor ?? defaults.anchor ?? symbolDef?.anchor ?? [0.5, 0.5]
+
+/**
+ * When the interact plugin is active, watch mousemove to set cursor:pointer whenever
+ * the mouse is over one of the marker SVG elements (which are pointer-events:none).
+ */
+const useMarkerCursor = (markers, interactActive, viewportRef) => {
+  useEffect(() => {
+    if (!interactActive) {
+      return undefined
+    }
+    const viewport = viewportRef.current
+    if (!viewport) {
+      return undefined
+    }
+    const onMove = (e) => {
+      const hit = markers.items.some(marker => {
+        const el = markers.markerRefs?.get(marker.id)
+        if (!el) {
+          return false
+        }
+        const { left, top, right, bottom } = el.getBoundingClientRect()
+        return e.clientX >= left && e.clientX <= right && e.clientY >= top && e.clientY <= bottom
+      })
+      viewport.style.cursor = hit ? 'pointer' : ''
+    }
+    viewport.addEventListener('mousemove', onMove)
+    return () => {
+      viewport.removeEventListener('mousemove', onMove)
+      viewport.style.cursor = ''
+    }
+  }, [markers, interactActive, viewportRef])
+}
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
 export const Markers = () => {
-  const { id, markerShape, markerColor } = useConfig()
-  const { mapStyle } = useMap()
+  const { id } = useConfig()
+  const { mapStyle, mapSize } = useMap()
   const { markers, markerRef } = useMarkers()
+  const { symbolRegistry, eventBus } = useService()
+
+  const [canSelectMarker, setCanSelectMarker] = useState(false)
+  const [selectedMarkers, setSelectedMarkers] = useState([])
+  const viewportRef = useRef(null)
+
+  useEffect(() => {
+    const handleActive = ({ active, interactionModes = [] }) => setCanSelectMarker(active && interactionModes.includes('selectMarker'))
+    const handleSelectionChange = ({ selectedMarkers: next = [] }) => setSelectedMarkers(next)
+    eventBus.on('interact:active', handleActive)
+    eventBus.on('interact:selectionchange', handleSelectionChange)
+    return () => {
+      eventBus.off('interact:active', handleActive)
+      eventBus.off('interact:selectionchange', handleSelectionChange)
+    }
+  }, [eventBus])
+
+  // Resolve viewport element once on mount for cursor tracking
+  useEffect(() => {
+    viewportRef.current = document.querySelector('.im-c-viewport')
+  }, [])
+
+  useMarkerCursor(markers, canSelectMarker, viewportRef)
 
   if (!mapStyle) {
     return undefined
   }
 
-  const defaultSvgPaths = markerSvgPaths.find(m => m.shape === markerShape)
+  const defaults = symbolRegistry.getDefaults()
 
   return (
     <>
-      {markers.items.map(marker => (
-        <svg
-          key={marker.id}
-          ref={markerRef(marker.id)} // Single callback ref, just like useCrossHair
-          id={`${id}-marker-${marker.id}`}
-          className={`im-c-marker im-c-marker--${marker.markerShape || stringToKebab(markerShape)}`}
-          width='38'
-          height='38'
-          viewBox='0 0 38 38'
-          style={{ display: marker.isVisible ? 'block' : 'none' }}
-        >
-          <path
-            className='im-c-marker__background'
-            d={defaultSvgPaths.backgroundPath}
-            fill={getValueForStyle(marker.color || markerColor, mapStyle.id)}
-          />
-          <path
-            className='im-c-marker__graphic'
-            d={defaultSvgPaths.graphicPath}
-          />
-        </svg>
-      ))}
+      {markers.items.map(marker => {
+        const symbolDef = resolveSymbolDef(marker, defaults, symbolRegistry)
+        // selectedColor comes from mapStyle — not per-marker; selectedWidth stays in cascade
+        const styleValues = Object.fromEntries(
+          Object.entries(marker).filter(([k]) => !INTERNAL_KEYS.has(k))
+        )
+        const isSelected = selectedMarkers.includes(marker.id)
+        const resolvedSvg = isSelected
+          ? symbolRegistry.resolveSelected(symbolDef, styleValues, mapStyle)
+          : symbolRegistry.resolve(symbolDef, styleValues, mapStyle)
+
+        const viewBox = resolveViewBox(marker, defaults, symbolDef)
+        const [,, svgWidth, svgHeight] = viewBox.split(' ').map(Number)
+        const anchor = resolveAnchor(marker, defaults, symbolDef)
+        const shapeId = marker.symbol || defaults.symbol
+        const scale = scaleFactor[mapSize] ?? 1
+        const scaledWidth = svgWidth * scale
+        const scaledHeight = svgHeight * scale
+
+        return (
+          <svg
+            key={marker.id}
+            ref={markerRef(marker.id)}
+            id={`${id}-marker-${marker.id}`}
+            className={[
+              'im-c-marker',
+              `im-c-marker--${stringToKebab(shapeId)}`,
+              isSelected && 'im-c-marker--selected'
+            ].filter(Boolean).join(' ')}
+            width={scaledWidth}
+            height={scaledHeight}
+            viewBox={viewBox}
+            overflow='visible'
+            style={{
+              display: marker.isVisible ? 'block' : 'none',
+              marginLeft: `${-anchor[0] * scaledWidth}px`,
+              marginTop: `${-anchor[1] * scaledHeight}px`
+            }}
+          >
+            <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
+          </svg>
+        )
+      })}
     </>
   )
 }

package/src/App/components/Markers/Markers.module.scss

@@ -7,16 +7,6 @@
   position: absolute;
   left: 0;
   top: 0;
-  margin: -17px 0 0 -19px;
   pointer-events: none;
 }
 
-// 2. Elements
-.im-c-marker__graphic {
-  fill: var(--map-overlay-halo-color);
-}
-
-// 3. Modifiers
-.im-c-marker--pin .im-c-marker__graphic {
-  filter: opacity(50%) brightness(0.25);
-}

package/src/App/components/Markers/Markers.test.jsx

@@ -0,0 +1,246 @@
+import { render, act } from '@testing-library/react'
+import { Markers } from './Markers.jsx'
+import { useMarkers } from '../../hooks/useMarkersAPI.js'
+import { useConfig } from '../../store/configContext.js'
+import { useMap } from '../../store/mapContext.js'
+import { useService } from '../../store/serviceContext.js'
+
+jest.mock('../../hooks/useMarkersAPI.js', () => ({ useMarkers: jest.fn() }))
+jest.mock('../../store/configContext.js', () => ({ useConfig: jest.fn() }))
+jest.mock('../../store/mapContext.js', () => ({ useMap: jest.fn() }))
+jest.mock('../../store/serviceContext.js', () => ({ useService: jest.fn() }))
+jest.mock('../../../config/appConfig.js', () => ({ scaleFactor: { small: 1, medium: 1.5, large: 2 } }))
+
+const makeEventBus = () => {
+  const listeners = {}
+  return {
+    on: jest.fn((e, fn) => { listeners[e] = fn }),
+    off: jest.fn(),
+    emit: (e, payload) => listeners[e]?.(payload)
+  }
+}
+
+const makeSymbolRegistry = (overrides = {}) => ({
+  get: jest.fn(() => ({ svg: '<circle/>', viewBox: '0 0 38 38', anchor: [0.5, 1] })),
+  getDefaults: jest.fn(() => ({ symbol: 'pin', viewBox: '0 0 38 38', anchor: [0.5, 1] })),
+  resolve: jest.fn(() => '<circle/>'),
+  resolveSelected: jest.fn(() => '<circle class="selected"/>'),
+  ...overrides
+})
+
+const makeMarker = (overrides = {}) => ({
+  id: 'marker-1', isVisible: true, symbol: 'pin', ...overrides
+})
+
+const setup = ({ markers = [], mapSize = 'small', eventBus, symbolRegistry, mapStyle = 'outdoor' } = {}) => {
+  const eb = eventBus ?? makeEventBus()
+  const sr = symbolRegistry ?? makeSymbolRegistry()
+  const markerRefs = new Map()
+  useConfig.mockReturnValue({ id: 'test-app' })
+  useMap.mockReturnValue({ mapStyle, mapSize })
+  useService.mockReturnValue({ symbolRegistry: sr, eventBus: eb })
+  useMarkers.mockReturnValue({
+    markers: { items: markers, markerRefs },
+    markerRef: (id) => (el) => { if (el) markerRefs.set(id, el) }
+  })
+  return { eb, sr, result: render(<Markers />) }
+}
+
+describe('Markers', () => {
+  it('renders nothing when mapStyle is not set', () => {
+    expect(setup({ mapStyle: null }).result.container.firstChild).toBeNull()
+  })
+
+  it('renders nothing when there are no markers', () => {
+    expect(setup().result.container.querySelectorAll('svg')).toHaveLength(0)
+  })
+
+  it('renders one svg per marker with correct id and classes', () => {
+    const { result } = setup({ markers: [makeMarker(), makeMarker({ id: 'b', symbol: undefined })] })
+    const [svg1, svg2] = result.container.querySelectorAll('svg')
+    expect(svg1.getAttribute('id')).toBe('test-app-marker-marker-1')
+    expect(svg1).toHaveClass('im-c-marker', 'im-c-marker--pin')
+    expect(svg2).toHaveClass('im-c-marker--pin')
+  })
+
+  it.each([
+    [true, 'block'],
+    [false, 'none']
+  ])('display is %s when isVisible=%s', (isVisible, display) => {
+    const svg = setup({ markers: [makeMarker({ isVisible })] }).result.container.querySelector('svg')
+    expect(svg).toHaveStyle({ display })
+  })
+
+  it('uses inline symbolSvgContent over the symbol registry', () => {
+    const sr = makeSymbolRegistry()
+    setup({ markers: [makeMarker({ symbolSvgContent: '<rect/>' })], symbolRegistry: sr })
+    expect(sr.get).not.toHaveBeenCalled()
+  })
+
+  it('falls back to defaults.symbolSvgContent', () => {
+    const sr = makeSymbolRegistry({
+      getDefaults: jest.fn(() => ({ symbolSvgContent: '<default-svg/>', viewBox: '0 0 38 38', anchor: [0.5, 1] }))
+    })
+    setup({ markers: [makeMarker({ symbol: undefined })], symbolRegistry: sr })
+    expect(sr.get).not.toHaveBeenCalled()
+  })
+
+  it('uses marker.viewBox when provided', () => {
+    const svg = setup({ markers: [makeMarker({ viewBox: '0 0 50 60' })] }).result.container.querySelector('svg')
+    expect(svg.getAttribute('viewBox')).toBe('0 0 50 60')
+    expect(svg.getAttribute('width')).toBe('50')
+    expect(svg.getAttribute('height')).toBe('60')
+  })
+
+  it("falls back to '0 0 38 38' viewBox when none is provided", () => {
+    const sr = makeSymbolRegistry({
+      get: jest.fn(() => ({ svg: '<circle/>' })),
+      getDefaults: jest.fn(() => ({ symbol: 'pin' }))
+    })
+    expect(setup({ markers: [makeMarker()], symbolRegistry: sr }).result.container.querySelector('svg').getAttribute('viewBox')).toBe('0 0 38 38')
+  })
+
+  it.each([
+    ['marker.anchor', makeMarker({ anchor: [0, 0] }), null, '0px', '0px'],
+    ['symbolDef.anchor', makeMarker(), { get: jest.fn(() => ({ svg: '<circle/>', viewBox: '0 0 38 38', anchor: [0, 0.5] })), getDefaults: jest.fn(() => ({ symbol: 'pin', viewBox: '0 0 38 38' })) }, '0px', '-19px'],
+    ['[0.5, 0.5] fallback', makeMarker(), { get: jest.fn(() => ({ svg: '<circle/>', viewBox: '0 0 38 38' })), getDefaults: jest.fn(() => ({ symbol: 'pin', viewBox: '0 0 38 38' })) }, '-19px', '-19px']
+  ])('resolveAnchor uses %s', (_, marker, srOverrides, left, top) => {
+    const sr = srOverrides ? makeSymbolRegistry(srOverrides) : undefined
+    expect(setup({ markers: [marker], symbolRegistry: sr }).result.container.querySelector('svg')).toHaveStyle({ marginLeft: left, marginTop: top })
+  })
+
+  it.each([
+    ['small', '38', '38'],
+    ['medium', '57', '57'],
+    ['large', '76', '76'],
+    ['huge', '38', '38']
+  ])('scales svg dimensions for mapSize=%s', (mapSize, width, height) => {
+    const svg = setup({ markers: [makeMarker()], mapSize }).result.container.querySelector('svg')
+    expect(svg.getAttribute('width')).toBe(width)
+    expect(svg.getAttribute('height')).toBe(height)
+  })
+
+  it('scales anchor offsets for medium mapSize', () => {
+    expect(setup({ markers: [makeMarker()], mapSize: 'medium' }).result.container.querySelector('svg'))
+      .toHaveStyle({ marginLeft: '-28.5px', marginTop: '-57px' })
+  })
+
+  it('adds selected class and calls resolveSelected when marker is selected', () => {
+    const { eb, sr, result } = setup({ markers: [makeMarker()] })
+    act(() => eb.emit('interact:selectionchange', { selectedMarkers: ['marker-1'] }))
+    expect(result.container.querySelector('svg')).toHaveClass('im-c-marker--selected')
+    expect(sr.resolveSelected).toHaveBeenCalled()
+    expect(sr.resolve).not.toHaveBeenCalledAfter?.(sr.resolveSelected)
+  })
+
+  it('uses resolve (not resolveSelected) for unselected markers', () => {
+    const { sr } = setup({ markers: [makeMarker()] })
+    expect(sr.resolve).toHaveBeenCalled()
+    expect(sr.resolveSelected).not.toHaveBeenCalled()
+  })
+
+  it.each([
+    ['explicit empty array', { selectedMarkers: [] }],
+    ['missing selectedMarkers key', {}]
+  ])('deselects when selectionchange has %s', (_, payload) => {
+    const { eb, result } = setup({ markers: [makeMarker()] })
+    act(() => eb.emit('interact:selectionchange', { selectedMarkers: ['marker-1'] }))
+    act(() => eb.emit('interact:selectionchange', payload))
+    expect(result.container.querySelector('svg')).not.toHaveClass('im-c-marker--selected')
+  })
+
+  it('wires interact:active and interact:selectionchange on mount and removes them on unmount', () => {
+    const { eb, result } = setup()
+    expect(eb.on).toHaveBeenCalledWith('interact:active', expect.any(Function))
+    expect(eb.on).toHaveBeenCalledWith('interact:selectionchange', expect.any(Function))
+    result.unmount()
+    expect(eb.off).toHaveBeenCalledWith('interact:active', expect.any(Function))
+    expect(eb.off).toHaveBeenCalledWith('interact:selectionchange', expect.any(Function))
+  })
+
+  describe('useMarkerCursor', () => {
+    let viewport
+
+    beforeEach(() => {
+      viewport = document.createElement('div')
+      viewport.className = 'im-c-viewport'
+      document.body.appendChild(viewport)
+    })
+
+    afterEach(() => {
+      if (viewport.parentNode) document.body.removeChild(viewport)
+    })
+
+    const activate = (eb) => act(() => eb.emit('interact:active', { active: true, interactionModes: ['selectMarker'] }))
+    const deactivate = (eb) => act(() => eb.emit('interact:active', { active: false, interactionModes: ['selectMarker'] }))
+    const fireMove = (clientX, clientY) => act(() => {
+      viewport.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX, clientY }))
+    })
+
+    const setupCursor = (markerBounds) => {
+      const eb = makeEventBus()
+      const markerRefs = new Map()
+      if (markerBounds) markerRefs.set('marker-1', { getBoundingClientRect: () => markerBounds })
+      useConfig.mockReturnValue({ id: 'test-app' })
+      useMap.mockReturnValue({ mapStyle: 'outdoor', mapSize: 'small' })
+      useService.mockReturnValue({ symbolRegistry: makeSymbolRegistry(), eventBus: eb })
+      useMarkers.mockReturnValue({ markers: { items: [makeMarker()], markerRefs }, markerRef: () => () => {} })
+      render(<Markers />)
+      return eb
+    }
+
+    it('does not track mousemove when interact is not active', () => {
+      setupCursor({ left: 0, top: 0, right: 50, bottom: 50 })
+      fireMove(20, 20)
+      expect(viewport.style.cursor).toBe('')
+    })
+
+    it('does not track mousemove when selectMarker is not in interactionModes', () => {
+      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
+      act(() => eb.emit('interact:active', { active: true, interactionModes: ['selectFeature'] }))
+      fireMove(20, 20)
+      expect(viewport.style.cursor).toBe('')
+    })
+
+    it('does not track mousemove when interactionModes is absent from payload', () => {
+      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
+      act(() => eb.emit('interact:active', { active: true }))
+      fireMove(20, 20)
+      expect(viewport.style.cursor).toBe('')
+    })
+
+    it('does not track mousemove when viewport element is absent', () => {
+      document.body.removeChild(viewport)
+      const eb = setupCursor({ left: 0, top: 0, right: 50, bottom: 50 })
+      activate(eb)
+      expect(viewport.style.cursor).toBe('')
+    })
+
+    it('sets cursor to pointer when mousemove lands inside a marker', () => {
+      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
+      activate(eb)
+      fireMove(20, 20)
+      expect(viewport.style.cursor).toBe('pointer')
+    })
+
+    it.each([
+      ['outside all markers', 100, 100],
+      ['marker has no ref element', 20, 20]
+    ])('cursor stays empty when %s', (label, x, y) => {
+      const bounds = label.includes('no ref') ? null : { left: 10, top: 10, right: 50, bottom: 50 }
+      const eb = setupCursor(bounds)
+      activate(eb)
+      fireMove(x, y)
+      expect(viewport.style.cursor).toBe('')
+    })
+
+    it('clears cursor and stops tracking when interact becomes inactive', () => {
+      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
+      activate(eb)
+      fireMove(20, 20)
+      expect(viewport.style.cursor).toBe('pointer')
+      deactivate(eb)
+      expect(viewport.style.cursor).toBe('')
+    })
+  })
+})