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

package/src/App/hooks/useInterfaceAPI.test.js

@@ -0,0 +1,156 @@
+import { renderHook, act } from '@testing-library/react'
+import { useInterfaceAPI } from './useInterfaceAPI.js'
+import { useApp } from '../store/appContext.js'
+import { useService } from '../store/serviceContext.js'
+
+jest.mock('../store/appContext.js')
+jest.mock('../store/serviceContext.js')
+
+const makeEventBus = () => {
+  const handlers = {}
+  return {
+    on: jest.fn((event, handler) => { handlers[event] = handler }),
+    off: jest.fn(),
+    emit: (event, payload) => handlers[event]?.(payload),
+    _handlers: handlers
+  }
+}
+
+describe('useInterfaceAPI', () => {
+  let mockDispatch, mockEventBus, mockState
+
+  beforeEach(() => {
+    mockDispatch = jest.fn()
+    mockEventBus = makeEventBus()
+    mockState = {
+      hiddenButtons: new Set(),
+      disabledButtons: new Set(),
+      pressedButtons: new Set(),
+      expandedButtons: new Set()
+    }
+
+    useApp.mockReturnValue({ dispatch: mockDispatch, ...mockState })
+    useService.mockReturnValue({ eventBus: mockEventBus })
+  })
+
+  it('dispatches ADD_BUTTON on app:addbutton', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:addbutton', { id: 'btn1', config: { label: 'Test' } }))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_BUTTON', payload: { id: 'btn1', config: { label: 'Test' } } })
+  })
+
+  it('also dispatches ADD_BUTTON for each menuItem', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:addbutton', {
+      id: 'btn1',
+      config: {
+        label: 'Parent',
+        menuItems: [
+          { id: 'item1', label: 'Item 1' },
+          { id: 'item2', label: 'Item 2' }
+        ]
+      }
+    }))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_BUTTON', payload: { id: 'btn1', config: expect.objectContaining({ label: 'Parent' }) } })
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_BUTTON', payload: { id: 'item1', config: { id: 'item1', label: 'Item 1', isMenuItem: true } } })
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_BUTTON', payload: { id: 'item2', config: { id: 'item2', label: 'Item 2', isMenuItem: true } } })
+  })
+
+  it('dispatches TOGGLE_APP_VISIBLE true on app:visible', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:visible'))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'TOGGLE_APP_VISIBLE', payload: true })
+  })
+
+  it('dispatches TOGGLE_APP_VISIBLE false on app:hidden', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:hidden'))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'TOGGLE_APP_VISIBLE', payload: false })
+  })
+
+  it('dispatches ADD_PANEL on app:addpanel', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:addpanel', { id: 'panel1', config: { title: 'My Panel' } }))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_PANEL', payload: { id: 'panel1', config: { title: 'My Panel' } } })
+  })
+
+  it('dispatches REMOVE_PANEL on app:removepanel', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:removepanel', 'panel1'))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'REMOVE_PANEL', payload: 'panel1' })
+  })
+
+  it('dispatches OPEN_PANEL on app:showpanel', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:showpanel', 'panel1'))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'OPEN_PANEL', payload: { panelId: 'panel1' } })
+  })
+
+  it('dispatches CLOSE_PANEL on app:hidepanel', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:hidepanel', 'panel1'))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'CLOSE_PANEL', payload: 'panel1' })
+  })
+
+  it('dispatches ADD_CONTROL on app:addcontrol', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:addcontrol', { id: 'ctrl1', config: { position: 'top-left' } }))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_CONTROL', payload: { id: 'ctrl1', config: { position: 'top-left' } } })
+  })
+
+  describe('handleToggleButtonState', () => {
+    it.each([
+      ['hidden', 'TOGGLE_BUTTON_HIDDEN', 'isHidden'],
+      ['disabled', 'TOGGLE_BUTTON_DISABLED', 'isDisabled'],
+      ['pressed', 'TOGGLE_BUTTON_PRESSED', 'isPressed'],
+      ['expanded', 'TOGGLE_BUTTON_EXPANDED', 'isExpanded']
+    ])('sets %s to explicit boolean value when provided', (prop, actionType, payloadKey) => {
+      renderHook(() => useInterfaceAPI())
+      act(() => mockEventBus.emit('app:togglebuttonstate', { id: 'btn1', prop, value: true }))
+      expect(mockDispatch).toHaveBeenCalledWith({ type: actionType, payload: { id: 'btn1', [payloadKey]: true } })
+
+      mockDispatch.mockClear()
+      act(() => mockEventBus.emit('app:togglebuttonstate', { id: 'btn1', prop, value: false }))
+      expect(mockDispatch).toHaveBeenCalledWith({ type: actionType, payload: { id: 'btn1', [payloadKey]: false } })
+    })
+
+    it.each([
+      ['hidden', 'TOGGLE_BUTTON_HIDDEN', 'isHidden', 'hiddenButtons'],
+      ['disabled', 'TOGGLE_BUTTON_DISABLED', 'isDisabled', 'disabledButtons'],
+      ['pressed', 'TOGGLE_BUTTON_PRESSED', 'isPressed', 'pressedButtons'],
+      ['expanded', 'TOGGLE_BUTTON_EXPANDED', 'isExpanded', 'expandedButtons']
+    ])('toggles %s when no boolean value provided', (prop, actionType, payloadKey, stateKey) => {
+      renderHook(() => useInterfaceAPI())
+
+      // Not in set → toggles to true
+      act(() => mockEventBus.emit('app:togglebuttonstate', { id: 'btn1', prop }))
+      expect(mockDispatch).toHaveBeenCalledWith({ type: actionType, payload: { id: 'btn1', [payloadKey]: true } })
+
+      // Already in set → toggles to false
+      mockDispatch.mockClear()
+      mockState[stateKey].add('btn1')
+      act(() => mockEventBus.emit('app:togglebuttonstate', { id: 'btn1', prop }))
+      expect(mockDispatch).toHaveBeenCalledWith({ type: actionType, payload: { id: 'btn1', [payloadKey]: false } })
+    })
+
+    it('does nothing for unknown prop', () => {
+      renderHook(() => useInterfaceAPI())
+      act(() => mockEventBus.emit('app:togglebuttonstate', { id: 'btn1', prop: 'unknown', value: true }))
+      expect(mockDispatch).not.toHaveBeenCalled()
+    })
+  })
+
+  it('removes all event listeners on unmount', () => {
+    const { unmount } = renderHook(() => useInterfaceAPI())
+    unmount()
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:visible', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:hidden', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:addbutton', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:togglebuttonstate', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:addpanel', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:removepanel', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:showpanel', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:hidepanel', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:addcontrol', expect.any(Function))
+  })
+})

package/src/App/hooks/useMarkersAPI.js

@@ -5,12 +5,9 @@ import { useService } from '../store/serviceContext.js'
 import { scaleFactor } from '../../config/appConfig.js'
 import { EVENTS as events } from '../../config/events.js'
 
-// Vertical offset to align the marker tip with the coordinate point
-const MARKER_ANCHOR_OFFSET_Y = 19
-
 /**
  * Projects geographic coordinates to screen pixel position, scaled for the
- * current map size and offset so the marker tip aligns with the point.
+ * current map size. Anchor alignment is handled in CSS by the Markers component.
  *
  * @param {Array<number>} coords - [lng, lat] geographic coordinates
  * @param {Object} mapProvider - Map provider instance with `mapToScreen` method
@@ -25,7 +22,7 @@ export const projectCoords = (coords, mapProvider, mapSize, isMapReady) => {
   const { x, y } = mapProvider.mapToScreen(coords)
   return {
     x: x * scaleFactor[mapSize],
-    y: y * scaleFactor[mapSize] - MARKER_ANCHOR_OFFSET_Y
+    y: y * scaleFactor[mapSize]
   }
 }
 

package/src/App/hooks/useMarkersAPI.test.js

@@ -19,7 +19,7 @@ describe('projectCoords', () => {
   const mockProvider = { mapToScreen: jest.fn(() => ({ x: 100, y: 200 })) }
 
   it('returns scaled coordinates when ready', () => {
-    expect(projectCoords({ lat: 1, lng: 1 }, mockProvider, 'medium', true)).toEqual({ x: 200, y: 381 })
+    expect(projectCoords({ lat: 1, lng: 1 }, mockProvider, 'medium', true)).toEqual({ x: 200, y: 400 })
   })
 
   it('returns zero when not ready or no provider', () => {
@@ -102,7 +102,7 @@ describe('useMarkers', () => {
 
     const renderCallback = mockEventBus.on.mock.calls.find(call => call[0] === 'map:render')[1]
     act(() => renderCallback())
-    expect(mockElement.style.transform).toBe('translate(200px, 381px)')
+    expect(mockElement.style.transform).toBe('translate(200px, 400px)')
   })
 
   it('skips map:render when not ready or no provider (line 60)', () => {
@@ -126,7 +126,7 @@ describe('useMarkers', () => {
       isMapReady: true
     })
     rerender()
-    expect(mockElement.style.transform).toBe('translate(300px, 581px)')
+    expect(mockElement.style.transform).toBe('translate(300px, 600px)')
   })
 
   it('handles app:addmarker safely', () => {
@@ -137,7 +137,7 @@ describe('useMarkers', () => {
     act(() => handleAddMarker(addPayload))
     expect(mockDispatch).toHaveBeenCalledWith({
       type: 'UPSERT_LOCATION_MARKER',
-      payload: { id: 'm1', coords: { lat: 1, lng: 1 }, label: 'Test', x: 200, y: 381, isVisible: true }
+      payload: { id: 'm1', coords: { lat: 1, lng: 1 }, label: 'Test', x: 200, y: 400, isVisible: true }
     })
   })
 

package/src/App/layout/Layout.jsx

@@ -10,6 +10,7 @@ import { Attributions } from '../components/Attributions/Attributions'
 import { layoutSlots } from '../renderer/slots'
 import { SlotRenderer } from '../renderer/SlotRenderer'
 import { HtmlElementHost } from '../renderer/HtmlElementHost'
+import { getMapThemeVars } from '../../config/mapTheme.js'
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
@@ -30,10 +31,9 @@ export const Layout = () => {
         `im-o-app--${interfaceType}`,
         `im-o-app--${isFullscreen ? 'fullscreen' : 'inline'}`,
         `im-o-app--${mapStyle?.appColorScheme || preferredColorScheme}-app`,
-        `im-o-app--${mapStyle?.mapColorScheme || 'light'}-map`,
         hasExclusiveControl && 'im-o-app--exclusive-control'
       ].filter(Boolean).join(' ')}
-      style={{ backgroundColor: mapStyle?.backgroundColor || undefined }}
+      style={{ backgroundColor: mapStyle?.backgroundColor || undefined, ...getMapThemeVars(mapStyle) }}
       ref={layoutRefs.appContainerRef}
     >
       <Viewport keyboardHintPortalRef={layoutRefs.topRef} />

package/src/App/layout/Layout.test.jsx

@@ -72,9 +72,11 @@ describe('Layout', () => {
     expect(root.className).toContain('im-o-app--map')
     expect(root.className).toContain('im-o-app--inline')
     expect(root.className).toContain('im-o-app--light-app')
-    expect(root.className).toContain('im-o-app--dark-map')
     expect(root.className).toContain('im-o-app--exclusive-control')
     expect(root.style.backgroundColor).toBe('pink')
+    expect(root.style.getPropertyValue('--map-overlay-halo-color')).toBe('#0b0c0c')
+    expect(root.style.getPropertyValue('--map-overlay-selected-color')).toBe('#ffffff')
+    expect(root.style.getPropertyValue('--map-overlay-foreground-color')).toBe('#ffffff')
 
     const overlay = root.querySelector('.im-o-app__overlay')
     expect(overlay.className).not.toContain('not-ready')
@@ -123,7 +125,7 @@ describe('Layout', () => {
 
     const root = document.getElementById('myApp-im-app')
     expect(root.className).toContain('im-o-app--dark-app')
-    expect(root.className).toContain('im-o-app--light-map') // fallback
+    expect(root.className).not.toContain('im-o-app--light-map')
     expect(root.style.backgroundColor).toBe('')
     expect(root.className).not.toContain('exclusive-control')
   })

package/src/App/store/ServiceProvider.jsx

@@ -1,27 +1,29 @@
 // src/App/store/ServiceProvider.jsx
 import React, { createContext, useMemo, useRef } from 'react'
-import { EVENTS } from '../../config/events.js'
 import { createAnnouncer } from '../../services/announcer.js'
 import { reverseGeocode } from '../../services/reverseGeocode.js'
 import { useConfig } from '../store/configContext.js'
 import { closeApp } from '../../services/closeApp.js'
-import { logger } from '../../services/logger.js'
+import { symbolRegistry } from '../../services/symbolRegistry.js'
+import { patternRegistry } from '../../services/patternRegistry.js'
 
 export const ServiceContext = createContext(null)
 
 export const ServiceProvider = ({ eventBus, children }) => {
-  const { id, handleExitClick } = useConfig()
+  const { id, handleExitClick, symbolDefaults: constructorSymbolDefaults } = useConfig()
   const mapStatusRef = useRef(null)
   const announce = useMemo(() => createAnnouncer(mapStatusRef), [])
 
+  symbolRegistry.setDefaults(constructorSymbolDefaults || {})
+
   const services = useMemo(() => ({
     announce,
     reverseGeocode: (zoom, center) => reverseGeocode(zoom, center),
-    events: EVENTS,
     eventBus,
     mapStatusRef,
     closeApp: () => closeApp(id, handleExitClick, eventBus),
-    logger
+    symbolRegistry,
+    patternRegistry
   }), [announce])
 
   return (

package/src/App/store/mapActionsMap.js

@@ -12,12 +12,10 @@ const setMapReady = (state) => ({
   isMapReady: true
 })
 
-const setMapStyle = (state, payload) => {
-  return {
-    ...state,
-    mapStyle: payload
-  }
-}
+const setMapStyle = (state, payload) => ({
+  ...state,
+  mapStyle: payload
+})
 
 const setMapSize = (state, payload) => {
   return {

package/src/App/store/mapActionsMap.test.js

@@ -46,8 +46,9 @@ describe('actionsMap', () => {
   })
 
   test('SET_MAP_STYLE sets mapStyle', () => {
-    const result = actionsMap.SET_MAP_STYLE(state, 'satellite')
-    expect(result.mapStyle).toBe('satellite')
+    const mapStyle = { id: 'satellite' }
+    const result = actionsMap.SET_MAP_STYLE(state, mapStyle)
+    expect(result.mapStyle).toBe(mapStyle)
     expect(result.otherProp).toBe(state.otherProp)
   })
 

package/src/App/store/mapReducer.js

@@ -17,10 +17,11 @@ export const initialState = (config) => {
   // Does a plugin handle map styles
   const pluginHandlesMapStyles = !!registeredPlugins?.find(plugin => plugin.config?.handlesMapStyle)
 
+  const initialMapStyle = pluginHandlesMapStyles ? null : mapStyle
   return {
     isMapReady: false,
     mapProvider: null,
-    mapStyle: pluginHandlesMapStyles ? null : mapStyle,
+    mapStyle: initialMapStyle,
     mapSize,
     center,
     zoom,

package/src/config/appConfig.js

@@ -159,9 +159,3 @@ export const scaleFactor = {
   medium: 1.5,
   large: 2
 }
-
-export const markerSvgPaths = [{
-  shape: 'pin',
-  backgroundPath: 'M31 16.001c0 7.489-8.308 15.289-11.098 17.698-.533.4-1.271.4-1.803 0C15.309 31.29 7 23.49 7 16.001c0-6.583 5.417-12 12-12s12 5.417 12 12z',
-  graphicPath: 'M19 11.001c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.241 5-5-2.24-5-5-5z'
-}]

package/src/config/appConfig.test.js

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import { defaultAppConfig, defaultButtonConfig, scaleFactor, markerSvgPaths } from './appConfig'
+import { defaultAppConfig, defaultButtonConfig, scaleFactor } from './appConfig'
 
 describe('defaultAppConfig', () => {
   const appState = {
@@ -135,6 +135,5 @@ describe('defaultAppConfig', () => {
   it('exports supplementary configs and constants', () => {
     expect(defaultButtonConfig.label).toBe('Button')
     expect(scaleFactor.large).toBe(2)
-    expect(markerSvgPaths[0].shape).toBe('pin')
   })
 })

package/src/config/defaults.js

@@ -27,8 +27,6 @@ const defaults = {
   mapViewParamKey: 'mv',
   maxMobileWidth: 640,
   minDesktopWidth: 835,
-  markerColor: '#ff0000',
-  markerShape: 'pin',
   nudgePanDelta: 5,
   nudgeZoomDelta: 0.1,
   panDelta: 100,

package/src/config/mapTheme.js

@@ -0,0 +1,56 @@
+/**
+ * Canonical colour values for light and dark map colour schemes.
+ * These are the single source of truth for map overlay colours —
+ * used both by the symbol SVG renderer (JS canvas) and injected as
+ * CSS custom properties onto the app container for CSS-rendered elements.
+ *
+ * Per-style overrides take precedence: set `haloColor`, `selectedColor`, or
+ * `foregroundColor` directly on a `MapStyleConfig` to override these defaults.
+ */
+export const SCHEME_COLORS = {
+  light: {
+    haloColor: '#ffffff',
+    selectedColor: '#0b0c0c',
+    foregroundColor: '#0b0c0c'
+  },
+  dark: {
+    haloColor: '#0b0c0c',
+    selectedColor: '#ffffff',
+    foregroundColor: '#ffffff'
+  }
+}
+
+/**
+ * Resolves the three map overlay colours for the given map style,
+ * falling back to the appropriate scheme defaults when not explicitly set.
+ * Stored in `mapState.mapTheme` so plugins can read resolved values without
+ * importing from core.
+ *
+ * @param {import('../types.js').MapStyleConfig|null} mapStyle
+ * @returns {{ haloColor: string, selectedColor: string, foregroundColor: string }}
+ */
+export const resolveMapTheme = (mapStyle) => {
+  const scheme = SCHEME_COLORS[mapStyle?.mapColorScheme] ?? SCHEME_COLORS.light
+  return {
+    haloColor: mapStyle?.haloColor ?? scheme.haloColor,
+    selectedColor: mapStyle?.selectedColor ?? scheme.selectedColor,
+    foregroundColor: mapStyle?.foregroundColor ?? scheme.foregroundColor
+  }
+}
+
+/**
+ * Converts a mapStyle's overlay colours into CSS custom properties,
+ * falling back to the appropriate scheme defaults when not explicitly set.
+ * Suitable for spreading directly into a React `style` prop.
+ *
+ * @param {import('../types.js').MapStyleConfig|null} mapStyle
+ * @returns {Object} CSS custom property object
+ */
+export const getMapThemeVars = (mapStyle) => {
+  const { haloColor, selectedColor, foregroundColor } = resolveMapTheme(mapStyle)
+  return {
+    '--map-overlay-halo-color': haloColor,
+    '--map-overlay-selected-color': selectedColor,
+    '--map-overlay-foreground-color': foregroundColor
+  }
+}

package/src/config/patternConfig.js

@@ -0,0 +1,16 @@
+/**
+ * Built-in fill pattern SVG content.
+ * Each value is the inner SVG paths only (no wrapper element).
+ * Paths are authored in a 16×16 coordinate space and tile seamlessly.
+ * Use {{foregroundColor}} and {{backgroundColor}} tokens for colour injection.
+ */
+export const BUILT_IN_PATTERNS = {
+  'cross-hatch': '<path d="M0 4.486V3.485h3.5V.001h1v3.484h7.002V.001h1v3.484h3.5v1.001h-3.5v7h3.5v.999h-3.5v3.516h-1v-3.516H4.499v3.516h-1v-3.516H0v-.999h3.5v-7H0zm11.501 0H4.499v7h7.002v-7z" fill="{{foregroundColor}}"/>',
+  'diagonal-cross-hatch': '<path d="M0 8.707V7.293L7.293 0h1.414L16 7.293v1.414L8.707 16H7.293L0 8.707zM.707 8L8 15.293 15.293 8 8 .707.707 8z" fill="{{foregroundColor}}"/>',
+  'forward-diagonal-hatch': '<path d="M16 8.707V7.293L7.293 16h1.414L16 8.707zm-16 0L8.707 0H7.293L0 7.293v1.414z" fill="{{foregroundColor}}"/>',
+  'backward-diagonal-hatch': '<path d="M0 8.707V7.293L8.707 16H7.293L0 8.707zm16 0L7.293 0h1.414L16 7.293v1.414z" fill="{{foregroundColor}}"/>',
+  'horizontal-hatch': '<path d="M0 4.5V3.499h15.999V4.5H0zm0 7h15.999V12.5H0v-1.001z" fill="{{foregroundColor}}"/>',
+  'vertical-hatch': '<path d="M3.501 16.001V0h1v16.001h-1zm7.998 0V0h1v16.001h-1z" fill="{{foregroundColor}}"/>',
+  dot: '<path d="M3.999 2A2 2 0 0 1 6 3.999C6 5.103 5.103 6 3.999 6a2 2 0 0 1-1.999-2.001A2 2 0 0 1 3.999 2zm0 7.999C5.103 10 6 10.897 6 12.001A2 2 0 0 1 3.999 14a2 2 0 0 1-1.999-1.999A2 2 0 0 1 3.999 10zM11.999 2A2 2 0 0 1 14 3.999C14 5.103 13.103 6 11.999 6S10 5.103 10 3.999A2 2 0 0 1 11.999 2zm0 7.999c1.104 0 2.001.897 2.001 2.001A2 2 0 0 1 11.999 14 2 2 0 0 1 10 12.001c0-1.104.897-2.001 1.999-2.001z" fill="{{foregroundColor}}"/>',
+  diamond: '<path d="M4 .465L7.535 4 4 7.535.465 4 4 .465zm0 7.999l3.535 3.535L4 15.535.465 11.999 4 8.464zm8-8l3.535 3.535-3.536 3.536L8.464 4 12 .464zm0 8.001L15.536 12 12 15.536 8.465 12 12 8.465z" fill="{{foregroundColor}}"/>'
+}

package/src/config/symbolConfig.js

@@ -0,0 +1,80 @@
+/**
+ * Default token values applied to all symbols unless overridden at the constructor,
+ * symbol registration, or marker creation level.
+ * Colour values may be a plain string or a map-style-keyed object,
+ * e.g. { outdoor: '#ffffff', dark: '#0b0c0c' }
+ */
+export const symbolDefaults = {
+  symbol: 'pin',
+  backgroundColor: '#ca3535',
+  foregroundColor: '#ffffff',
+  haloWidth: '1',
+  selectedWidth: '6'
+}
+
+/**
+ * Built-in graphic path data strings for use with the `graphic` token.
+ *
+ * Each value is an SVG `d` attribute string in a 16×16 coordinate space,
+ * centred at (8, 8). The built-in symbols (`pin`, `circle`, `square`) apply a
+ * `translate` transform to position this 16×16 area correctly within their
+ * 38×38 viewBox — so graphic path data does not need to account for symbol
+ * positioning.
+ *
+ * @example
+ * markers.add('id', coords, { symbol: 'pin', graphic: graphics.dot })
+ *
+ * @example
+ * // Inline path data (16×16 space, centred at 8,8)
+ * markers.add('id', coords, { symbol: 'pin', graphic: 'M3 8 L8 3 L13 8 L8 13 Z' })
+ */
+export const graphics = {
+  /** Small filled circle — the default graphic for built-in symbols */
+  dot: 'M8 3c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.241 5-5-2.24-5-5-5z',
+
+  /** Filled plus / cross shape */
+  cross: 'M6 3H10V6H13V10H10V13H6V10H3V6H6Z',
+
+  /** Filled diamond / rotated square */
+  diamond: 'M8 2L14 8L8 14L2 8Z',
+
+  /** Filled upward-pointing triangle */
+  triangle: 'M8 2L14 14H2Z',
+
+  /** Filled square */
+  square: 'M3 3H13V13H3Z'
+}
+
+// ─── Built-in symbol definitions ─────────────────────────────────────────────
+// Each symbol uses a 38×38 viewBox. SVG templates use {{token}} placeholders
+// resolved at render time by the symbolRegistry.
+
+export const pin = {
+  id: 'pin',
+  viewBox: '0 0 38 38',
+  anchor: [0.5, 0.9], // NOSONAR
+  graphic: graphics.dot,
+  svg: `<path d="M19 33.499c-5.318-5-12-9.509-12-16.998 0-6.583 5.417-12 12-12s12 5.417 12 12c0 7.489-6.682 11.998-12 16.998z" fill="none" stroke="{{selectedColor}}" stroke-width="{{selectedWidth}}"/>
+  <path d="M19 33.499c-5.318-5-12-9.509-12-16.998 0-6.583 5.417-12 12-12s12 5.417 12 12c0 7.489-6.682 11.998-12 16.998z" fill="{{backgroundColor}}" stroke="{{haloColor}}" stroke-width="{{haloWidth}}"/>
+  <g transform="translate(19, 16) scale(0.8) translate(-8, -8)"><path d="{{graphic}}" fill="{{foregroundColor}}"/></g>`
+}
+
+export const circle = {
+  id: 'circle',
+  viewBox: '0 0 38 38',
+  anchor: [0.5, 0.5],
+  graphic: graphics.dot,
+  svg: `<path d="M19 7C12.376 7 7 12.376 7 19s5.376 12 12 12a12.01 12.01 0 0 0 12-12A12.01 12.01 0 0 0 19 7z" fill="none" stroke="{{selectedColor}}" stroke-width="{{selectedWidth}}"/>
+  <path d="M19 7C12.376 7 7 12.376 7 19s5.376 12 12 12a12.01 12.01 0 0 0 12-12A12.01 12.01 0 0 0 19 7z" fill="{{backgroundColor}}" stroke="{{haloColor}}" stroke-width="{{haloWidth}}"/>
+  <g transform="translate(19, 19) scale(0.8) translate(-8, -8)"><path d="{{graphic}}" fill="{{foregroundColor}}"/></g>`
+}
+
+export const square = {
+  id: 'square',
+  viewBox: '0 0 38 38',
+  anchor: [0.5, 0.5],
+  graphic: graphics.dot,
+  svg: `<path d="M28 7a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H10a3 3 0 0 1-3-3V10a3 3 0 0 1 3-3h18z" fill="none" stroke="{{selectedColor}}" stroke-width="{{selectedWidth}}"/>
+  <path d="M28 7a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H10a3 3 0 0 1-3-3V10a3 3 0 0 1 3-3h18z" fill="{{backgroundColor}}" stroke="{{haloColor}}" stroke-width="{{haloWidth}}"/>
+  <g transform="translate(19, 19) scale(0.8) translate(-8, -8)"><path d="{{graphic}}" fill="{{foregroundColor}}"/></g>`
+}

package/src/scss/settings/_colors.scss

@@ -35,10 +35,6 @@
     --attributions-foreground-color: #0b0c0c;
     --attributions-background-color: #ffffff80;
 
-    // Map overlays, such as scale bar, target marker etc
-    --map-overlay-foreground-color: #0b0c0c;
-    --map-overlay-halo-color: #ffffff;
-
     // Fixed colours (Dont chnage with dark mode)
     --fixed-foreground-color: #0b0c0c;
 
@@ -78,8 +74,3 @@
     --content-link-color: #ffffff;
 }
 
-// Map color scheme specific overrides
-:root .im-o-app--dark-map {
-  --map-overlay-foreground-color: #ffffff;
-  --map-overlay-halo-color: #0b0c0c;
-}

package/src/services/patternRegistry.js

@@ -0,0 +1,40 @@
+import { BUILT_IN_PATTERNS } from '../config/patternConfig.js'
+
+const patterns = new Map()
+
+export const patternRegistry = {
+  /**
+   * Register a named pattern.
+   *
+   * @param {string} id - Unique pattern name (e.g. 'my-hatch')
+   * @param {string} svgContent - Inner SVG path content in a 16×16 coordinate space.
+   *   Use {{foregroundColor}} and {{backgroundColor}} tokens for colour injection.
+   */
+  register (id, svgContent) {
+    patterns.set(id, { id, svgContent })
+  },
+
+  /**
+   * Retrieve a registered pattern by name.
+   *
+   * @param {string} id
+   * @returns {{ id: string, svgContent: string }|undefined}
+   */
+  get (id) {
+    return patterns.get(id)
+  },
+
+  /**
+   * Returns all registered patterns.
+   *
+   * @returns {{ id: string, svgContent: string }[]}
+   */
+  list () {
+    return [...patterns.values()]
+  }
+}
+
+// Seed built-in patterns
+Object.entries(BUILT_IN_PATTERNS).forEach(([id, svgContent]) => {
+  patternRegistry.register(id, svgContent)
+})

package/src/services/patternRegistry.test.js

@@ -0,0 +1,48 @@
+import { patternRegistry } from './patternRegistry.js'
+
+describe('patternRegistry', () => {
+  describe('built-in patterns', () => {
+    test.each([
+      'cross-hatch',
+      'diagonal-cross-hatch',
+      'forward-diagonal-hatch',
+      'backward-diagonal-hatch',
+      'horizontal-hatch',
+      'vertical-hatch',
+      'dot',
+      'diamond'
+    ])('seeds built-in pattern: %s', (id) => {
+      const pattern = patternRegistry.get(id)
+      expect(pattern).toBeDefined()
+      expect(pattern.id).toBe(id)
+      expect(typeof pattern.svgContent).toBe('string')
+      expect(pattern.svgContent.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('register / get', () => {
+    test('registers a custom pattern and retrieves it by id', () => {
+      patternRegistry.register('test-hatch', '<path d="M0 0L8 8" stroke="{{foreground}}"/>')
+      const result = patternRegistry.get('test-hatch')
+      expect(result).toEqual({ id: 'test-hatch', svgContent: '<path d="M0 0L8 8" stroke="{{foreground}}"/>' })
+    })
+
+    test('returns undefined for an unregistered id', () => {
+      expect(patternRegistry.get('nonexistent-pattern')).toBeUndefined()
+    })
+
+    test('overwrite an existing pattern by re-registering the same id', () => {
+      patternRegistry.register('overwrite-test', '<path d="M0 0"/>')
+      patternRegistry.register('overwrite-test', '<path d="M1 1"/>')
+      expect(patternRegistry.get('overwrite-test').svgContent).toBe('<path d="M1 1"/>')
+    })
+  })
+
+  describe('list', () => {
+    test('returns all registered patterns including built-ins', () => {
+      const all = patternRegistry.list()
+      expect(all.length).toBeGreaterThanOrEqual(8)
+      expect(all.every(p => p.id && p.svgContent)).toBe(true)
+    })
+  })
+})