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

package/src/utils/patternUtils.js

@@ -0,0 +1,94 @@
+import { getValueForStyle } from '../utils/getValueForStyle.js'
+
+// Border path rendered behind the pattern content in Key panel symbols (20×20 coordinate space).
+export const KEY_BORDER_PATH = '<path d="M19 2.862v14.275c0 1.028-.835 1.862-1.862 1.862H2.863c-1.028 0-1.862-.835-1.862-1.862V2.862C1.001 1.834 1.836 1 2.863 1h14.275C18.166 1 19 1.835 19 2.862z" fill="{{backgroundColor}}" stroke="{{foregroundColor}}" stroke-width="2"/>'
+
+export const hashString = (str) => {
+  let hash = 0
+  for (const ch of str) {
+    hash = ((hash << 5) - hash) + ch.codePointAt(0)
+    hash = hash & hash
+  }
+  return Math.abs(hash).toString(36) // NOSONAR: base36 encoding for compact alphanumeric hash string
+}
+
+/**
+ * Replaces {{foregroundColor}} and {{backgroundColor}} tokens in SVG content with resolved colour values.
+ *
+ * @param {string} content - SVG path string with colour tokens
+ * @param {string} foregroundColor
+ * @param {string} backgroundColor
+ * @returns {string}
+ */
+export const injectColors = (content, foregroundColor, backgroundColor) =>
+  content
+    .replace(/\{\{foregroundColor\}\}/g, foregroundColor || 'black')
+    .replace(/\{\{backgroundColor\}\}/g, backgroundColor || 'transparent')
+
+/**
+ * Returns true if a dataset/config has a fill pattern configured.
+ *
+ * @param {Object} dataset
+ * @returns {boolean}
+ */
+export const hasPattern = (dataset) => !!(dataset.fillPattern || dataset.fillPatternSvgContent)
+
+/**
+ * Returns the raw (un-coloured) inner SVG content for a dataset's pattern.
+ * Precedence: inline fillPatternSvgContent → named fillPattern from registry.
+ *
+ * @param {Object} dataset
+ * @param {Object} patternRegistry
+ * @returns {string|null}
+ */
+export const getPatternInnerContent = (dataset, patternRegistry) => {
+  if (dataset.fillPatternSvgContent) {
+    return dataset.fillPatternSvgContent
+  }
+  if (dataset.fillPattern) {
+    return patternRegistry?.get(dataset.fillPattern)?.svgContent ?? null
+  }
+  return null
+}
+
+/**
+ * Returns a deterministic image ID for a pattern + resolved colour combination.
+ *
+ * @param {Object} dataset
+ * @param {string} mapStyleId
+ * @param {Object} patternRegistry
+ * @returns {string|null}
+ */
+export const getPatternImageId = (dataset, mapStyleId, patternRegistry) => {
+  const innerContent = getPatternInnerContent(dataset, patternRegistry)
+  if (!innerContent) {
+    return null
+  }
+  const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black'
+  const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
+  return `pattern-${hashString(innerContent + fg + bg)}`
+}
+
+/**
+ * Returns colour-injected SVG path content for use in Key panel pattern symbols.
+ * Returns { border, content } where border is the rounded-rect outline and content
+ * is the pattern fill. Returns null if the dataset has no pattern.
+ *
+ * @param {Object} dataset
+ * @param {string} mapStyleId
+ * @param {Object} patternRegistry
+ * @returns {{ border: string, content: string }|null}
+ */
+export const getKeyPatternPaths = (dataset, mapStyleId, patternRegistry) => {
+  const innerContent = getPatternInnerContent(dataset, patternRegistry)
+  if (!innerContent) {
+    return null
+  }
+  const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black'
+  const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
+  const borderStroke = getValueForStyle(dataset.stroke, mapStyleId) || fg
+  return {
+    border: injectColors(KEY_BORDER_PATH, borderStroke, bg),
+    content: injectColors(innerContent, fg, bg)
+  }
+}

package/src/utils/patternUtils.test.js

@@ -0,0 +1,160 @@
+import {
+  hashString,
+  injectColors,
+  hasPattern,
+  getPatternInnerContent,
+  getPatternImageId,
+  getKeyPatternPaths,
+  KEY_BORDER_PATH
+} from './patternUtils.js'
+
+const mockRegistry = {
+  get: (id) => id === 'dot' ? { id: 'dot', svgContent: '<path d="M4 4" fill="{{foregroundColor}}"/>' } : undefined
+}
+
+describe('hashString', () => {
+  test('returns a non-empty string', () => {
+    expect(typeof hashString('hello')).toBe('string')
+    expect(hashString('hello').length).toBeGreaterThan(0)
+  })
+
+  test('is deterministic', () => {
+    expect(hashString('hello')).toBe(hashString('hello'))
+  })
+
+  test('produces different values for different inputs', () => {
+    expect(hashString('a')).not.toBe(hashString('b'))
+  })
+})
+
+describe('injectColors', () => {
+  test('replaces {{foregroundColor}} and {{backgroundColor}} tokens', () => {
+    const result = injectColors('fill="{{foregroundColor}}" bg="{{backgroundColor}}"', 'red', 'blue')
+    expect(result).toBe('fill="red" bg="blue"')
+  })
+
+  test('replaces all occurrences', () => {
+    const result = injectColors('{{foregroundColor}} {{foregroundColor}}', 'red', 'blue')
+    expect(result).toBe('red red')
+  })
+
+  test('uses fallback "black" when foregroundColor is falsy', () => {
+    expect(injectColors('{{foregroundColor}}', '', 'blue')).toBe('black')
+  })
+
+  test('uses fallback "transparent" when backgroundColor is falsy', () => {
+    expect(injectColors('{{backgroundColor}}', 'red', '')).toBe('transparent')
+  })
+})
+
+describe('hasPattern', () => {
+  test('returns true when fillPattern is set', () => {
+    expect(hasPattern({ fillPattern: 'dot' })).toBe(true)
+  })
+
+  test('returns true when fillPatternSvgContent is set', () => {
+    expect(hasPattern({ fillPatternSvgContent: '<path/>' })).toBe(true)
+  })
+
+  test('returns false when neither is set', () => {
+    expect(hasPattern({})).toBe(false)
+    expect(hasPattern({ fill: 'red' })).toBe(false)
+  })
+})
+
+describe('getPatternInnerContent', () => {
+  test('returns fillPatternSvgContent when set (inline SVG takes precedence)', () => {
+    const dataset = { fillPatternSvgContent: '<path d="custom"/>', fillPattern: 'dot' }
+    expect(getPatternInnerContent(dataset, mockRegistry)).toBe('<path d="custom"/>')
+  })
+
+  test('returns svgContent from registry for a named fillPattern', () => {
+    const dataset = { fillPattern: 'dot' }
+    expect(getPatternInnerContent(dataset, mockRegistry)).toBe('<path d="M4 4" fill="{{foregroundColor}}"/>')
+  })
+
+  test('returns null for an unregistered fillPattern name', () => {
+    const dataset = { fillPattern: 'unknown-pattern' }
+    expect(getPatternInnerContent(dataset, mockRegistry)).toBeNull()
+  })
+
+  test('returns null when no pattern is configured', () => {
+    expect(getPatternInnerContent({}, mockRegistry)).toBeNull()
+  })
+})
+
+describe('getPatternImageId', () => {
+  test('returns a deterministic string id', () => {
+    const dataset = { fillPattern: 'dot', fillPatternForegroundColor: 'red', fillPatternBackgroundColor: 'blue' }
+    const id = getPatternImageId(dataset, 'style-a', mockRegistry)
+    expect(typeof id).toBe('string')
+    expect(id).toMatch(/^pattern-/)
+    expect(id).toBe(getPatternImageId(dataset, 'style-a', mockRegistry))
+  })
+
+  test('returns null when no pattern content is found', () => {
+    expect(getPatternImageId({ fillPattern: 'unknown' }, 'style-a', mockRegistry)).toBeNull()
+  })
+
+  test('produces different ids for different colours', () => {
+    const base = { fillPattern: 'dot' }
+    const idA = getPatternImageId({ ...base, fillPatternForegroundColor: 'red' }, 'style-a', mockRegistry)
+    const idB = getPatternImageId({ ...base, fillPatternForegroundColor: 'blue' }, 'style-a', mockRegistry)
+    expect(idA).not.toBe(idB)
+  })
+
+  test('falls back to "black" foreground and "transparent" background when colours are absent', () => {
+    const id = getPatternImageId({ fillPattern: 'dot' }, 'style-a', mockRegistry)
+    const idExplicit = getPatternImageId(
+      { fillPattern: 'dot', fillPatternForegroundColor: 'black', fillPatternBackgroundColor: 'transparent' },
+      'style-a',
+      mockRegistry
+    )
+    expect(id).toBe(idExplicit)
+  })
+})
+
+describe('getKeyPatternPaths', () => {
+  test('returns border and content strings with colours injected', () => {
+    const dataset = {
+      fillPattern: 'dot',
+      fillPatternForegroundColor: 'red',
+      fillPatternBackgroundColor: 'white',
+      stroke: 'black'
+    }
+    const result = getKeyPatternPaths(dataset, 'style-a', mockRegistry)
+    expect(result).not.toBeNull()
+    expect(result.border).toContain('black') // stroke colour
+    expect(result.border).toContain('white') // background colour
+    expect(result.content).toContain('red') // foreground colour
+    expect(result.border).not.toContain('{{foregroundColor}}')
+    expect(result.content).not.toContain('{{foregroundColor}}')
+  })
+
+  test('returns null when no pattern content is found', () => {
+    expect(getKeyPatternPaths({ fillPattern: 'unknown' }, 'style-a', mockRegistry)).toBeNull()
+  })
+
+  test('falls back to "black" fg and "transparent" bg when colour properties are absent', () => {
+    const result = getKeyPatternPaths({ fillPattern: 'dot' }, 'style-a', mockRegistry)
+    expect(result).not.toBeNull()
+    expect(result.content).toContain('black')
+    expect(result.border).toContain('transparent')
+  })
+
+  test('border stroke falls back to foreground colour when stroke is absent', () => {
+    const result = getKeyPatternPaths(
+      { fillPattern: 'dot', fillPatternForegroundColor: 'green' },
+      'style-a',
+      mockRegistry
+    )
+    expect(result).not.toBeNull()
+    // borderStroke falls back to fg ('green'), so the border uses green for both stroke and background
+    expect(result.border).toContain('green')
+  })
+
+  test('KEY_BORDER_PATH contains foregroundColor and backgroundColor tokens', () => {
+    expect(KEY_BORDER_PATH).toContain('{{foregroundColor}}')
+    expect(KEY_BORDER_PATH).toContain('{{backgroundColor}}')
+  })
+})

package/src/utils/symbolUtils.js

@@ -0,0 +1,85 @@
+// Symbol style props in dataset style that carry token values.
+// These use the 'symbol' prefix to distinguish them from fill/stroke props at the same level.
+// The prefix is stripped before passing tokens to the registry (e.g. symbolBackgroundColor → backgroundColor).
+const SYMBOL_STYLE_PROPS = new Set([
+  'symbolBackgroundColor', 'symbolForegroundColor',
+  'symbolHaloWidth', 'symbolGraphic'
+])
+
+/**
+ * Returns true if this dataset should be rendered as a symbol (point) layer.
+ * @param {Object} dataset
+ * @returns {boolean}
+ */
+export const hasSymbol = (dataset) => !!(dataset.symbol || dataset.symbolSvgContent)
+
+/**
+ * Resolves the symbolDef for a dataset's symbol config.
+ *
+ * dataset.symbol is a string symbol ID (e.g. 'pin').
+ * dataset.symbolSvgContent is inline SVG content for a custom symbol.
+ *
+ * @param {Object} dataset
+ * @param {Object} symbolRegistry
+ * @returns {Object|undefined}
+ */
+export const getSymbolDef = (dataset, symbolRegistry) => {
+  if (dataset.symbolSvgContent) {
+    return { svg: dataset.symbolSvgContent }
+  }
+  if (dataset.symbol) {
+    return symbolRegistry.get(dataset.symbol)
+  }
+  return undefined
+}
+
+/**
+ * Extracts token overrides from a dataset's flat symbol style props.
+ * Strips the 'symbol' prefix to produce internal token names (e.g. symbolBackgroundColor → backgroundColor).
+ * Returns an empty object when no symbol is configured.
+ *
+ * @param {Object} dataset
+ * @returns {Object}
+ */
+export const getSymbolStyleColors = (dataset) => {
+  if (!hasSymbol(dataset)) { return {} }
+  const tokens = {}
+  SYMBOL_STYLE_PROPS.forEach(key => {
+    if (dataset[key] != null) {
+      // Strip 'symbol' prefix: symbolBackgroundColor → backgroundColor
+      const tokenKey = key.charAt(6).toLowerCase() + key.slice(7) // NOSONAR
+      tokens[tokenKey] = dataset[key]
+    }
+  })
+  return tokens
+}
+
+/**
+ * Returns the viewBox string for a dataset's symbol.
+ * Precedence: dataset.symbolViewBox → symbolDef viewBox → default.
+ *
+ * @param {Object} dataset
+ * @param {Object|undefined} symbolDef
+ * @returns {string}
+ */
+export const getSymbolViewBox = (dataset, symbolDef) => {
+  if (dataset.symbolViewBox) {
+    return dataset.symbolViewBox
+  }
+  return symbolDef?.viewBox ?? '0 0 38 38'
+}
+
+/**
+ * Returns the anchor for a dataset's symbol as [x, y] in 0–1 space.
+ * Precedence: dataset.symbolAnchor → symbolDef anchor → [0.5, 0.5].
+ *
+ * @param {Object} dataset
+ * @param {Object|undefined} symbolDef
+ * @returns {number[]}
+ */
+export const getSymbolAnchor = (dataset, symbolDef) => {
+  if (dataset.symbolAnchor) {
+    return dataset.symbolAnchor
+  }
+  return symbolDef?.anchor ?? [0.5, 0.5]
+}

package/src/utils/symbolUtils.test.js

@@ -0,0 +1,156 @@
+import {
+  hasSymbol,
+  getSymbolDef,
+  getSymbolStyleColors,
+  getSymbolViewBox,
+  getSymbolAnchor
+} from './symbolUtils.js'
+
+const mockRegistry = (defs = {}) => ({
+  get: jest.fn((id) => defs[id])
+})
+
+// ─── hasSymbol ────────────────────────────────────────────────────────────────
+
+describe('hasSymbol', () => {
+  it('returns true when dataset has a symbol string', () => {
+    expect(hasSymbol({ symbol: 'pin' })).toBe(true)
+  })
+
+  it('returns true when dataset has symbolSvgContent', () => {
+    expect(hasSymbol({ symbolSvgContent: '<circle/>' })).toBe(true)
+  })
+
+  it('returns false when symbol is absent', () => {
+    expect(hasSymbol({})).toBe(false)
+  })
+
+  it('returns false when symbol is null', () => {
+    expect(hasSymbol({ symbol: null })).toBe(false)
+  })
+})
+
+// ─── getSymbolDef ─────────────────────────────────────────────────────────────
+
+describe('getSymbolDef', () => {
+  it('returns undefined when dataset has no symbol', () => {
+    expect(getSymbolDef({}, mockRegistry())).toBeUndefined()
+  })
+
+  it('looks up string symbol id in the registry', () => {
+    const pinDef = { id: 'pin', svg: '<g/>' }
+    const registry = mockRegistry({ pin: pinDef })
+    expect(getSymbolDef({ symbol: 'pin' }, registry)).toBe(pinDef)
+  })
+
+  it('returns undefined for an unregistered string symbol', () => {
+    expect(getSymbolDef({ symbol: 'missing' }, mockRegistry())).toBeUndefined()
+  })
+
+  it('returns inline def from symbolSvgContent with svg key', () => {
+    const dataset = { symbolSvgContent: '<circle/>', symbolViewBox: '0 0 10 10' }
+    const result = getSymbolDef(dataset, mockRegistry())
+    expect(result.svg).toBe('<circle/>')
+  })
+
+  it('symbolSvgContent takes precedence over symbol id', () => {
+    const pinDef = { id: 'pin', svg: '<g/>' }
+    const registry = mockRegistry({ pin: pinDef })
+    const result = getSymbolDef({ symbol: 'pin', symbolSvgContent: '<circle/>' }, registry)
+    expect(result.svg).toBe('<circle/>')
+  })
+})
+
+// ─── getSymbolStyleColors ─────────────────────────────────────────────────────
+
+describe('getSymbolStyleColors', () => {
+  it('returns empty object when dataset has no symbol', () => {
+    expect(getSymbolStyleColors({})).toEqual({})
+  })
+
+  it('returns empty object for string symbol with no token props', () => {
+    expect(getSymbolStyleColors({ symbol: 'pin' })).toEqual({})
+  })
+
+  it('strips symbol prefix from token props', () => {
+    const dataset = {
+      symbol: 'pin',
+      symbolBackgroundColor: '#ff0000',
+      symbolForegroundColor: '#ffffff',
+      symbolHaloWidth: '2',
+      symbolGraphic: 'cross'
+    }
+    expect(getSymbolStyleColors(dataset)).toEqual({
+      backgroundColor: '#ff0000',
+      foregroundColor: '#ffffff',
+      haloWidth: '2',
+      graphic: 'cross'
+    })
+  })
+
+  it('works with symbolSvgContent instead of symbol id', () => {
+    const dataset = { symbolSvgContent: '<circle/>', symbolBackgroundColor: '#0000ff' }
+    expect(getSymbolStyleColors(dataset)).toEqual({ backgroundColor: '#0000ff' })
+  })
+
+  it('omits token props that are null or undefined', () => {
+    const dataset = { symbol: 'pin', symbolBackgroundColor: '#ff0000', symbolForegroundColor: null }
+    const result = getSymbolStyleColors(dataset)
+    expect(result).toEqual({ backgroundColor: '#ff0000' })
+    expect(result).not.toHaveProperty('foregroundColor')
+  })
+
+  it('supports style-keyed colour objects', () => {
+    const dataset = {
+      symbol: 'pin',
+      symbolBackgroundColor: { outdoor: '#1d70b8', dark: '#5694ca' }
+    }
+    expect(getSymbolStyleColors(dataset)).toEqual({
+      backgroundColor: { outdoor: '#1d70b8', dark: '#5694ca' }
+    })
+  })
+})
+
+// ─── getSymbolViewBox ─────────────────────────────────────────────────────────
+
+describe('getSymbolViewBox', () => {
+  it('returns symbolViewBox from dataset', () => {
+    const dataset = { symbol: 'custom', symbolViewBox: '0 0 24 24' }
+    expect(getSymbolViewBox(dataset, undefined)).toBe('0 0 24 24')
+  })
+
+  it('falls back to symbolDef viewBox', () => {
+    const symbolDef = { id: 'pin', viewBox: '0 0 38 38' }
+    expect(getSymbolViewBox({ symbol: 'pin' }, symbolDef)).toBe('0 0 38 38')
+  })
+
+  it('returns default viewBox when neither source has one', () => {
+    expect(getSymbolViewBox({ symbol: 'pin' }, {})).toBe('0 0 38 38')
+  })
+
+  it('returns default viewBox when symbolDef is undefined', () => {
+    expect(getSymbolViewBox({ symbol: 'pin' }, undefined)).toBe('0 0 38 38')
+  })
+})
+
+// ─── getSymbolAnchor ──────────────────────────────────────────────────────────
+
+describe('getSymbolAnchor', () => {
+  it('returns symbolAnchor from dataset', () => {
+    const dataset = { symbol: 'custom', symbolAnchor: [0.5, 0.9] }
+    expect(getSymbolAnchor(dataset, undefined)).toEqual([0.5, 0.9])
+  })
+
+  it('falls back to symbolDef anchor', () => {
+    const symbolDef = { id: 'pin', anchor: [0.5, 0.9] }
+    expect(getSymbolAnchor({ symbol: 'pin' }, symbolDef)).toEqual([0.5, 0.9])
+  })
+
+  it('returns default [0.5, 0.5] when neither source has an anchor', () => {
+    expect(getSymbolAnchor({ symbol: 'pin' }, {})).toEqual([0.5, 0.5])
+  })
+
+  it('returns default [0.5, 0.5] when symbolDef is undefined', () => {
+    expect(getSymbolAnchor({ symbol: 'pin' }, undefined)).toEqual([0.5, 0.5])
+  })
+})

package/docs/examples.mdx

@@ -1,70 +0,0 @@
-import DemoMapInline from '../demo/DemoMapInline.js'
-import DemoMapButton from '../demo/DemoMapButton.js'
-
-# Examples
-
-See [Getting started](getting-started) for installation and full configuration options.
-
-## Inline map
-
-Embed an interactive map directly on the page, allowing users to explore and interact with the map without leaving the current context.
-
-<DemoMapInline />
-
-```js
-import InteractiveMap from '@defra/interactive-map'
-import maplibreProvider from '@defra/interactive-map/providers/maplibre'
-import searchPlugin from '@defra/interactive-map/plugins/search'
-import scaleBarPlugin from '@defra/interactive-map/plugins/scale-bar'
-import mapStylesPlugin from '@defra/interactive-map/plugins/map-styles'
-
-new InteractiveMap('my-map', {
-  behaviour: 'inline',
-  mapProvider: maplibreProvider(),
-  mapStyle: {
-    url: '/assets/my-map-style.json',
-    attribution: '© OpenStreetMap contributors'
-  },
-  center: [-1.6, 53.1],
-  zoom: 6,
-  containerHeight: '500px',
-  enableZoomControls: true,
-  plugins: [
-    searchPlugin({ customDatasets: [nominatimDataset], showMarker: true }),
-    scaleBarPlugin({ units: 'metric' }),
-    mapStylesPlugin({ mapStyles: [...] })
-  ]
-})
-```
-
-## Button-triggered map
-
-Trigger the map to show on button press, allowing users to access the map when needed without it taking up space on the page by default.
-
-<DemoMapButton />
-
-```js
-import InteractiveMap from '@defra/interactive-map'
-import maplibreProvider from '@defra/interactive-map/providers/maplibre'
-import searchPlugin from '@defra/interactive-map/plugins/search'
-import scaleBarPlugin from '@defra/interactive-map/plugins/scale-bar'
-import mapStylesPlugin from '@defra/interactive-map/plugins/map-styles'
-
-new InteractiveMap('my-map', {
-  behaviour: 'buttonFirst',
-  mapProvider: maplibreProvider(),
-  mapStyle: {
-    url: '/assets/my-map-style.json',
-    attribution: '© OpenStreetMap contributors'
-  },
-  center: [-1.6, 53.1],
-  zoom: 6,
-  containerHeight: '500px',
-  enableZoomControls: true,
-  plugins: [
-    searchPlugin({ customDatasets: [nominatimDataset], showMarker: true }),
-    scaleBarPlugin({ units: 'metric' }),
-    mapStylesPlugin({ mapStyles: [...] })
-  ]
-})
-```

package/plugins/beta/datasets/src/adapters/maplibre/patternRegistry.js

@@ -1,48 +0,0 @@
-import { hasPattern, getPatternImageId, rasterisePattern } from '../../styles/patterns.js'
-import { mergeSublayer } from '../../utils/mergeSublayer.js'
-
-/**
- * Collect all style configs that require a pattern image: top-level datasets
- * and any sublayers whose merged style has a pattern.
- * @param {Object[]} datasets
- * @returns {Object[]}
- */
-const getPatternConfigs = (datasets) =>
-  datasets.flatMap(dataset => {
-    const configs = hasPattern(dataset) ? [dataset] : []
-    if (dataset.sublayers?.length) {
-      dataset.sublayers.forEach(sublayer => {
-        const merged = mergeSublayer(dataset, sublayer)
-        if (hasPattern(merged)) {
-          configs.push(merged)
-        }
-      })
-    }
-    return configs
-  })
-
-/**
- * Register all required pattern images with the map.
- * Skips images that are already registered (safe to call on style change).
- * @param {Object} map - MapLibre map instance
- * @param {Object[]} datasets
- * @param {string} mapStyleId
- * @returns {Promise<void>}
- */
-export const registerPatterns = async (map, datasets, mapStyleId) => {
-  const patternConfigs = getPatternConfigs(datasets)
-  if (!patternConfigs.length) {
-    return
-  }
-
-  await Promise.all(patternConfigs.map(async (config) => {
-    const imageId = getPatternImageId(config, mapStyleId)
-    if (!imageId || map.hasImage(imageId)) {
-      return
-    }
-    const result = await rasterisePattern(config, mapStyleId)
-    if (result) {
-      map.addImage(result.imageId, result.imageData, { pixelRatio: 2 })
-    }
-  }))
-}