@defra/interactive-map 0.0.50-alpha → 0.0.51-apha

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

@@ -1,50 +1,10 @@
-import { injectColors, getEffectivePixelRatio } from '../../../../src/utils/patternUtils.js'
-import { getValueForStyle } from '../../../../src/utils/getValueForStyle.js'
-import { rasteriseToImageData } from '../../../../src/utils/rasteriseToImageData.js'
-
-// Module-level cache: imageId → ImageData. Avoids re-rasterising identical patterns.
-const imageDataCache = new Map()
-
-/**
- * Rasterises a dataset's pattern SVG to ImageData, using an in-memory cache
- * to avoid re-rasterising identical patterns.
- *
- * @param {Object} dataset
- * @param {string} mapStyleId
- * @param {Object} patternRegistry
- * @param {number} pixelRatio
- * @returns {Promise<{ imageId: string, imageData: ImageData }|null>}
- */
-const rasterisePattern = async (dataset, mapStyleId, patternRegistry, pixelRatio) => {
-  const innerContent = patternRegistry.getPatternInnerContent(dataset)
-  if (!innerContent) {
-    return null
-  }
-
-  const imageId = patternRegistry.getPatternImageId(dataset, mapStyleId, pixelRatio)
-  if (!imageId) {
-    return null
-  }
-
-  let imageData = imageDataCache.get(imageId)
-  if (!imageData) {
-    const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black'
-    const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
-    const colored = injectColors(innerContent, fg, bg)
-    const bgRect = `<rect width="16" height="16" fill="${bg}"/>`
-    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)
-    imageDataCache.set(imageId, imageData)
-  }
-
-  return { imageId, imageData }
-}
+import { getEffectivePixelRatio } from '../../../../src/utils/patternUtils.js'
 
 /**
  * Register pattern images for the given pre-resolved pattern configs.
  * Skips images that are already registered (safe to call on style change).
+ * Rasterisation itself lives in patternRegistry.rasterisePatternImage, shared with OpenLayers —
+ * this only owns the MapLibre-specific "last mile" of registering via map.addImage().
  *
  * @param {Object} map - MapLibre map instance
  * @param {Object[]} styleArray - an array of pattern style configs
@@ -64,7 +24,7 @@ export const addPatternsToMap = async (map, styleArray, mapStyleId, patternRegis
     const imageId = patternRegistry.getPatternImageId(style, mapStyleId, pixelRatio)
     if (imageId && !imagesToAdd[imageId] && !map.hasImage(imageId)) {
       imagesToAdd[imageId] = async () => {
-        const result = await rasterisePattern(style, mapStyleId, patternRegistry, pixelRatio)
+        const result = await patternRegistry.rasterisePatternImage(style, mapStyleId, pixelRatio)
         if (result && !map.hasImage(result.imageId)) {
           map.addImage(result.imageId, result.imageData, { pixelRatio: effectiveRatio })
         }

package/rollup.esm.mjs

@@ -265,6 +265,8 @@ const ALL_BUILDS = [
     manualChunks: (id) => {
       if (id.includes('/manifest')) { return 'im-datasets-plugin' }
       if (id.includes('maplibreLayerAdapter')) { return 'im-datasets-ml-adapter' }
+      if (id.includes('openlayersLayerAdapter')) { return 'im-datasets-ol-adapter' }
+      if (id.includes('esriLayerAdapter')) { return 'im-datasets-esri-adapter' }
       return undefined
     }
   },

package/src/services/patternRegistry.js

@@ -1,7 +1,10 @@
 import { BUILT_IN_PATTERNS } from '../config/patternConfig.js'
 import { getValueForStyle } from '../utils/getValueForStyle.js'
 import { KEY_BORDER_PATH, getEffectivePixelRatio, injectColors, hashString } from '../utils/patternUtils.js'
+import { rasteriseToImageData } from '../utils/rasteriseToImageData.js'
 const patterns = new Map()
+// Module-level cache: imageId → ImageData. Avoids re-rasterising identical patterns.
+const imageDataCache = new Map()
 
 export const patternRegistry = {
   /**
@@ -106,6 +109,41 @@ export const patternRegistry = {
     const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
     const effectiveRatio = getEffectivePixelRatio(pixelRatio)
     return `pattern-${hashString(innerContent + fg + bg)}-${effectiveRatio}x`
+  },
+
+  /**
+   * Rasterise a pattern to ImageData, cached by imageId — shared by MapLibre's map.addImage()
+   * and OpenLayers' CanvasPattern (canvasPatternStyle.js). Note: the two currently render the
+   * pattern tile at different on-screen sizes (8px vs 16px CSS) — not yet confirmed if that
+   * needs aligning.
+   *
+   * @param {Object} style - Dataset or marker config with fillPattern* properties
+   * @param {string} mapStyleId - Current style/theme identifier
+   * @param {number} [pixelRatio=1] - Device pixel ratio × map size scale factor
+   * @returns {Promise<{imageId: string, imageData: ImageData}|null>}
+   */
+  async rasterisePatternImage (style, mapStyleId, pixelRatio = 1) {
+    const innerContent = this.getPatternInnerContent(style)
+    if (!innerContent) {
+      return null
+    }
+    const imageId = this.getPatternImageId(style, mapStyleId, pixelRatio)
+    if (!imageId) {
+      return null
+    }
+    let imageData = imageDataCache.get(imageId)
+    if (!imageData) {
+      const fg = getValueForStyle(style.fillPatternForegroundColor, mapStyleId) || 'black'
+      const bg = getValueForStyle(style.fillPatternBackgroundColor, mapStyleId) || 'transparent'
+      const colored = injectColors(innerContent, fg, bg)
+      const bgRect = `<rect width="16" height="16" fill="${bg}"/>`
+      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)
+      imageDataCache.set(imageId, imageData)
+    }
+    return { imageId, imageData }
   }
 }
 

package/src/services/patternRegistry.test.js

@@ -1,5 +1,24 @@
 import { patternRegistry } from './patternRegistry.js'
 import { KEY_BORDER_PATH } from '../utils/patternUtils.js'
+
+beforeAll(() => {
+  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?.() }
+  }
+
+  HTMLCanvasElement.prototype.getContext = jest.fn(() => ({
+    drawImage: jest.fn(),
+    getImageData: jest.fn((_x, _y, w, h) => ({ width: w, height: h }))
+  }))
+})
+
 describe('patternRegistry', () => {
   describe('built-in patterns', () => {
     test.each([
@@ -156,4 +175,46 @@ describe('patternRegistry', () => {
       expect(id).toBe(idExplicit)
     })
   })
+
+  describe('rasterisePatternImage', () => {
+    beforeEach(() => {
+      patternRegistry.register('rasterise-test', '<path d="M0 0 L8 8"/>')
+    })
+
+    test('returns null when the pattern has no inner content', async () => {
+      const result = await patternRegistry.rasterisePatternImage({ fillPattern: 'unknown' }, 'style-a')
+      expect(result).toBeNull()
+    })
+
+    test('returns null when getPatternImageId cannot resolve an id even though inner content exists', async () => {
+      // Defensive: getPatternImageId re-derives its own innerContent internally, so this
+      // shouldn't diverge from the check above in practice — but a consumer (see
+      // providers/maplibre/src/utils/patternImages.test.js's equivalent case) still relies on
+      // this guard rather than assuming the two calls can never disagree.
+      const getPatternImageId = jest.spyOn(patternRegistry, 'getPatternImageId').mockReturnValue(null)
+      const result = await patternRegistry.rasterisePatternImage({ fillPattern: 'rasterise-test' }, 'style-a')
+      expect(result).toBeNull()
+      getPatternImageId.mockRestore()
+    })
+
+    test('returns imageId and imageData for a valid pattern', async () => {
+      const result = await patternRegistry.rasterisePatternImage({ fillPattern: 'rasterise-test' }, 'style-a')
+      expect(result.imageId).toBe(patternRegistry.getPatternImageId({ fillPattern: 'rasterise-test' }, 'style-a'))
+      expect(result.imageData).toBeDefined()
+    })
+
+    test('rasterises at 8 * effectivePixelRatio physical pixels', async () => {
+      const result = await patternRegistry.rasterisePatternImage({ fillPattern: 'rasterise-test' }, 'style-a', 2)
+      // effectivePixelRatio(2) = max(2, 2*2) = 4 -> 8 * 4 = 32
+      expect(result.imageData.width).toBe(32)
+      expect(result.imageData.height).toBe(32)
+    })
+
+    test('returns the same cached ImageData object on a second call with identical inputs', async () => {
+      const style = { fillPattern: 'rasterise-test', fillPatternForegroundColor: '#unique-cache-key' }
+      const first = await patternRegistry.rasterisePatternImage(style, 'style-a')
+      const second = await patternRegistry.rasterisePatternImage(style, 'style-a')
+      expect(second.imageData).toBe(first.imageData)
+    })
+  })
 })

package/src/types.js

@@ -356,6 +356,17 @@
  * inline blob, so your CSP only needs `worker-src 'self'`.
  */
 
+/**
+ * Configuration options for the OpenLayers provider.
+ *
+ * @typedef {Object} OpenLayersProviderConfig
+ *
+ * @property {'uk' | 'world'} [zoomAlignment='uk']
+ * Which zoom-level sequence the map's view resolutions follow. 'uk' uses the OS tile
+ * grid zoom levels (0–13, zoom 0 shows all of Great Britain). 'world' uses the ESRI LOD
+ * sequence, for zoom levels that match the ESRI SDK (full UK visible around zoom 7).
+ */
+
 /**
  * Descriptor for lazy-loading a map provider.
  *

package/webpack.dev.mjs

@@ -18,6 +18,7 @@ export default {
   ],
   entry: {
     index: path.join(__dirname, 'demo/js/index.js'),
+    'index-ol': path.join(__dirname, 'demo/js/index-ol.js'),
     draw: path.join(__dirname, 'demo/js/draw.js'),
     'draw-ol': path.join(__dirname, 'demo/js/draw-ol.js'),
     farming: path.join(__dirname, 'demo/js/farming.js'),