@defra/interactive-map 0.0.20-alpha → 0.0.21-alpha

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

@@ -1,4 +1,4 @@
-import { getPatternInnerContent, getPatternImageId, injectColors } from '../../../../src/utils/patternUtils.js'
+import { getPatternInnerContent, getPatternImageId, injectColors, PATTERN_MIN_PIXEL_RATIO } from '../../../../src/utils/patternUtils.js'
 import { getValueForStyle } from '../../../../src/utils/getValueForStyle.js'
 import { rasteriseToImageData } from './rasteriseToImageData.js'
 
@@ -12,15 +12,16 @@ const imageDataCache = new Map()
  * @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) => {
+const rasterisePattern = async (dataset, mapStyleId, patternRegistry, pixelRatio) => {
   const innerContent = getPatternInnerContent(dataset, patternRegistry)
   if (!innerContent) {
     return null
   }
 
-  const imageId = getPatternImageId(dataset, mapStyleId, patternRegistry)
+  const imageId = getPatternImageId(dataset, mapStyleId, patternRegistry, pixelRatio)
   if (!imageId) {
     return null
   }
@@ -31,9 +32,12 @@ const rasterisePattern = async (dataset, mapStyleId, patternRegistry) => {
     const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
     const colored = injectColors(innerContent, fg, bg)
     const bgRect = `<rect width="16" height="16" fill="${bg}"/>`
-    // pixelRatio: 2 means the map treats this as an 8×8 logical tile — crisp on retina screens.
-    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">${bgRect}${colored}</svg>`
-    imageData = await rasteriseToImageData(svgString, 16, 16)
+    // 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 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)
   }
 
@@ -50,21 +54,23 @@ const rasterisePattern = async (dataset, mapStyleId, patternRegistry) => {
  * @param {Object[]} patternConfigs - 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) => {
+export const registerPatterns = async (map, patternConfigs, mapStyleId, patternRegistry, pixelRatio) => {
   if (!patternConfigs.length) {
     return
   }
 
+  const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio)
   await Promise.all(patternConfigs.map(async (config) => {
-    const imageId = getPatternImageId(config, mapStyleId, patternRegistry)
+    const imageId = getPatternImageId(config, mapStyleId, patternRegistry, pixelRatio)
     if (!imageId || map.hasImage(imageId)) {
       return
     }
-    const result = await rasterisePattern(config, mapStyleId, patternRegistry)
+    const result = await rasterisePattern(config, mapStyleId, patternRegistry, pixelRatio)
     if (result) {
-      map.addImage(result.imageId, result.imageData, { pixelRatio: 2 })
+      map.addImage(result.imageId, result.imageData, { pixelRatio: effectiveRatio })
     }
   }))
 }

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

@@ -45,19 +45,6 @@ describe('registerPatterns — registration', () => {
     expect(map.addImage).not.toHaveBeenCalled()
   })
 
-  it('calls addImage with pixelRatio 2 for a named pattern', async () => {
-    const map = makeMap()
-    const registry = makePatternRegistry()
-    const config = { fillPattern: 'stripes' }
-    await registerPatterns(map, [config], OUTDOOR, registry)
-    expect(map.addImage).toHaveBeenCalledTimes(1)
-    expect(map.addImage).toHaveBeenCalledWith(
-      expect.stringMatching(/^pattern-[a-z0-9]+$/),
-      expect.any(Object),
-      { pixelRatio: 2 }
-    )
-  })
-
   it('calls addImage for an inline fillPatternSvgContent config', async () => {
     const map = makeMap()
     const registry = makePatternRegistry()
@@ -69,10 +56,11 @@ describe('registerPatterns — registration', () => {
   it('skips addImage when image is already registered', async () => {
     const registry = makePatternRegistry()
     const config = { fillPattern: 'stripes' }
+    const pixelRatio = 2
     const { getPatternImageId } = await import('../../../../src/utils/patternUtils.js')
-    const existingId = getPatternImageId(config, OUTDOOR, registry)
+    const existingId = getPatternImageId(config, OUTDOOR, registry, pixelRatio)
     const map = makeMap([existingId])
-    await registerPatterns(map, [config], OUTDOOR, registry)
+    await registerPatterns(map, [config], OUTDOOR, registry, pixelRatio)
     expect(map.addImage).not.toHaveBeenCalled()
   })
 
@@ -104,6 +92,48 @@ describe('registerPatterns — registration', () => {
   })
 })
 
+describe('registerPatterns — pixel ratio', () => {
+  it('encodes effectiveRatio in the image ID and passes it to addImage', async () => {
+    const map = makeMap()
+    const registry = makePatternRegistry()
+    const config = { fillPattern: 'stripes' }
+    await registerPatterns(map, [config], OUTDOOR, registry, 2)
+    expect(map.addImage).toHaveBeenCalledTimes(1)
+    expect(map.addImage).toHaveBeenCalledWith(
+      expect.stringMatching(/^pattern-[a-z0-9]+-2x$/),
+      expect.any(Object),
+      { pixelRatio: 2 }
+    )
+  })
+
+  it('floors effectiveRatio at 2 so low-DPI patterns stay crisp', async () => {
+    const map = makeMap()
+    const registry = makePatternRegistry()
+    const config = { fillPattern: 'stripes' }
+    await registerPatterns(map, [config], OUTDOOR, registry, 1)
+    expect(map.addImage).toHaveBeenCalledWith(
+      expect.stringMatching(/-2x$/),
+      expect.any(Object),
+      { pixelRatio: 2 }
+    )
+  })
+
+  it('produces different image IDs for ratios above the floor', async () => {
+    const map1 = makeMap()
+    const map2 = makeMap()
+    const registry = makePatternRegistry()
+    const config = { fillPattern: 'stripes' }
+    const hiDpi = 3
+    await registerPatterns(map1, [config], OUTDOOR, registry, 2)
+    await registerPatterns(map2, [config], OUTDOOR, registry, hiDpi)
+    const [id2x] = map1.addImage.mock.calls[0]
+    const [id3x] = map2.addImage.mock.calls[0]
+    expect(id2x).not.toBe(id3x)
+    expect(id2x).toMatch(/-2x$/)
+    expect(id3x).toMatch(/-3x$/)
+  })
+})
+
 describe('registerPatterns — color resolution and caching', () => {
   it('applies foreground and background colors when resolving the SVG', async () => {
     const map = makeMap()
@@ -137,12 +167,13 @@ describe('registerPatterns — color resolution and caching', () => {
   it('uses cached ImageData on second call with identical config', async () => {
     const map = makeMap()
     const registry = makePatternRegistry()
-    const config = { fillPattern: 'stripes', fillPatternForegroundColor: '#unique1' }
-    await registerPatterns(map, [config], OUTDOOR, registry)
+    const config = { fillPattern: 'stripes', fillPatternForegroundColor: '#unique2' }
+    const pixelRatio = 2
+    await registerPatterns(map, [config], OUTDOOR, registry, pixelRatio)
     const { getPatternImageId } = await import('../../../../src/utils/patternUtils.js')
-    const imageId = getPatternImageId(config, OUTDOOR, registry)
+    const imageId = getPatternImageId(config, OUTDOOR, registry, pixelRatio)
     const map2 = makeMap([imageId])
-    await registerPatterns(map2, [config], OUTDOOR, registry)
+    await registerPatterns(map2, [config], OUTDOOR, registry, pixelRatio)
     expect(map2.addImage).not.toHaveBeenCalled()
   })
 })

package/rollup.esm.mjs

@@ -255,6 +255,15 @@ const ALL_BUILDS = [
     outDir: 'plugins/beta/datasets/dist/esm',
     manualChunks: (id) => { if (id.includes('/manifest')) return 'im-datasets-plugin' }
   },
+  {
+    entryPath: './plugins/beta/datasets/src/adapters/maplibre/index.js',
+    outDir: 'plugins/beta/datasets/adapters/maplibre/dist/esm',
+    manualChunks: (id) => {
+      if (id.includes('maplibreLayerAdapter')) {
+        return 'im-datasets-ml-adapter'
+      }
+    }
+  },
   {
     entryPath: './plugins/beta/map-styles/src/index.js',
     outDir: 'plugins/beta/map-styles/dist/esm',

package/src/utils/patternUtils.js

@@ -52,21 +52,26 @@ export const getPatternInnerContent = (dataset, patternRegistry) => {
 }
 
 /**
- * Returns a deterministic image ID for a pattern + resolved colour combination.
+ * Returns a deterministic image ID for a pattern + resolved colour + pixel ratio combination.
  *
  * @param {Object} dataset
  * @param {string} mapStyleId
  * @param {Object} patternRegistry
+ * @param {number} [pixelRatio=1]
  * @returns {string|null}
  */
-export const getPatternImageId = (dataset, mapStyleId, patternRegistry) => {
+// Minimum oversampling — keeps 16×16 physical pixels as the floor so patterns remain crisp.
+export const PATTERN_MIN_PIXEL_RATIO = 2
+
+export const getPatternImageId = (dataset, mapStyleId, patternRegistry, pixelRatio = 1) => {
   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)}`
+  const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio)
+  return `pattern-${hashString(innerContent + fg + bg)}-${effectiveRatio}x`
 }
 
 /**

package/src/utils/patternUtils.test.js

@@ -103,6 +103,23 @@ describe('getPatternImageId', () => {
     expect(idA).not.toBe(idB)
   })
 
+  test('floors effective ratio at PATTERN_MIN_PIXEL_RATIO so low-DPI ids match 2x', () => {
+    const dataset = { fillPattern: 'dot' }
+    const id1x = getPatternImageId(dataset, 'style-a', mockRegistry, 1)
+    const id2x = getPatternImageId(dataset, 'style-a', mockRegistry, 2)
+    expect(id1x).toBe(id2x)
+    expect(id1x).toMatch(/-2x$/)
+  })
+
+  test('produces different ids for pixelRatios above the floor', () => {
+    const dataset = { fillPattern: 'dot' }
+    const id2x = getPatternImageId(dataset, 'style-a', mockRegistry, 2)
+    const id3x = getPatternImageId(dataset, 'style-a', mockRegistry, 3)
+    expect(id2x).not.toBe(id3x)
+    expect(id2x).toMatch(/-2x$/)
+    expect(id3x).toMatch(/-3x$/)
+  })
+
   test('falls back to "black" foreground and "transparent" background when colours are absent', () => {
     const id = getPatternImageId({ fillPattern: 'dot' }, 'style-a', mockRegistry)
     const idExplicit = getPatternImageId(

package/webpack.umd.mjs

@@ -140,6 +140,7 @@ const ALL_BUILDS = [
   { entryPath: './plugins/search/src/index.js', libraryPath: 'searchPlugin', outDir: 'plugins/search/dist/umd' },
   { entryPath: './plugins/interact/src/index.js', libraryPath: 'interactPlugin', outDir: 'plugins/interact/dist/umd' },
   { entryPath: './plugins/beta/datasets/src/index.js', libraryPath: 'datasetsPlugin', outDir: 'plugins/beta/datasets/dist/umd' },
+  { entryPath: './plugins/beta/datasets/src/adapters/maplibre/index.js', libraryPath: 'datasetsMaplibreAdapter', outDir: 'plugins/beta/datasets/adapters/maplibre/dist/umd' },
   { entryPath: './plugins/beta/map-styles/src/index.js', libraryPath: 'mapStylesPlugin', outDir: 'plugins/beta/map-styles/dist/umd' },
   { entryPath: './plugins/beta/draw-ml/src/index.js', libraryPath: 'drawMLPlugin', outDir: 'plugins/beta/draw-ml/dist/umd' },
   { entryPath: './plugins/beta/frame/src/index.js', libraryPath: 'framePlugin', outDir: 'plugins/beta/frame/dist/umd' }