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

package/plugins/datasets/src/adapters/maplibre/maplibreLayerAdapter.js

@@ -1,7 +1,7 @@
-import { LayerAdapter } from '../layerAdapter.js'
 import { addDatasetLayers } from './layerBuilders.js'
 import { MapLibreDataset } from './registry/mapLibreDataset.js'
 import { datasetRegistry } from '../../registry/datasetRegistry.js'
+import { MapboxStyleLayerAdapter } from '../mapboxStyleLayerAdapter.js'
 
 /**
  * MapLibre GL JS implementation of the LayerAdapter interface for the datasets plugin.
@@ -15,18 +15,14 @@ import { datasetRegistry } from '../../registry/datasetRegistry.js'
  * Symbol image rasterisation is delegated to the map provider via
  * `mapProvider.addSymbolsToMap()`, keeping this adapter free of provider internals.
  */
-export default class MaplibreLayerAdapter extends LayerAdapter {
+export default class MaplibreLayerAdapter extends MapboxStyleLayerAdapter {
   /**
    * @param {Object} mapProvider - Map provider instance (e.g. MapLibreProvider)
    * @param {Object} symbolRegistry
    * @param {Object} patternRegistry
    */
   constructor (mapProvider, symbolRegistry, patternRegistry) {
-    super()
-    this._mapProvider = mapProvider
-    this._map = mapProvider.map
-    this._symbolRegistry = symbolRegistry
-    this._patternRegistry = patternRegistry
+    super(mapProvider, symbolRegistry, patternRegistry)
     // datasetId → sourceId, used by setData to update the correct source
     this._datasetSourceMap = new Map()
     window._datasetSourceMap = this._datasetSourceMap // Expose for debugging
@@ -137,14 +133,10 @@ export default class MaplibreLayerAdapter extends LayerAdapter {
 
   // ─── Dataset operations ─────────────────────────────────────────────────────
 
-  /**
-   * Add a single dataset's source and layers to the map.
-   * @param {string} datasetId
-   */
-  async addDataset (datasetId) {
-    const registryDataset = datasetRegistry.getDataset(datasetId)
-    await this.addPatternsAndSymbolsToMap(registryDataset.patternConfigs, registryDataset.symbolConfigs)
-    this._addLayers(registryDataset)
+  // addDataset is inherited from MapboxStyleLayerAdapter, which now guards an unknown
+  // datasetId (previously this threw here, matching OpenLayersLayerAdapter's behaviour).
+  _registerPatternsAndSymbols (registryDataset) {
+    return this.addPatternsAndSymbolsToMap(registryDataset.patternConfigs, registryDataset.symbolConfigs)
   }
 
   /**
@@ -196,38 +188,11 @@ export default class MaplibreLayerAdapter extends LayerAdapter {
   async applyStyle (datasetId) {
     const registryDataset = datasetRegistry.getDataset(datasetId)
     registryDataset.layerIds.forEach(layerId => this.removeLayer(layerId))
-    await this.addPatternsAndSymbolsToMap(registryDataset.patternConfigs, registryDataset.symbolConfigs)
+    await this._registerPatternsAndSymbols(registryDataset)
     this._addLayers(registryDataset)
   }
 
-  /**
-   * Apply opacity for all layers with datasetId
-   * @param {string} datasetId
-   */
-  applyDatasetOpacity (datasetId) {
-    const registryDataset = datasetRegistry.getDataset(datasetId)
-    if (registryDataset) {
-      this._applyRegistryDatasetOpacity(registryDataset)
-    }
-  }
-
-  /**
-   * Apply opacity for all layers belonging to a registryDataset.
-   * Uses setPaintProperty directly — safe to call on every slider tick.
-   * @param {Object} registryDataset
-   */
-  _applyRegistryDatasetOpacity (registryDataset) {
-    registryDataset.getLayersWithOpacity().forEach(({ layerIds, opacity }) => {
-      layerIds.forEach(layerId => this._setPaintOpacity(layerId, opacity))
-    })
-  }
-
-  /**
-   * Apply opacity for all layers
-   */
-  applyGlobalOpacity () {
-    datasetRegistry.forEachDataset(registryDataset => this._applyRegistryDatasetOpacity(registryDataset))
-  }
+  // Opacity/visibility methods are inherited from MapboxStyleLayerAdapter.
 
   /**
    * Update the GeoJSON data for a dataset's source.
@@ -247,10 +212,6 @@ export default class MaplibreLayerAdapter extends LayerAdapter {
 
   // ─── Private ─────────────────────────────────────────────────────────────────
 
-  get _pixelRatio () {
-    return this._mapProvider.map.getPixelRatio()
-  }
-
   _addLayers (registryDataset) {
     const { mapStyle } = datasetRegistry
     const sourceId = addDatasetLayers(this._map, registryDataset, mapStyle, this._symbolRegistry, this._patternRegistry, this._pixelRatio)
@@ -263,7 +224,7 @@ export default class MaplibreLayerAdapter extends LayerAdapter {
     if (!style?.layers) {
       return null
     }
-    const layer = style.layers.find(l => this._symbolLayerIds.has(l.id))
+    const layer = style.layers.find(styleLayer => this._symbolLayerIds.has(styleLayer.id))
     return layer?.id ?? null
   }
 
@@ -288,38 +249,12 @@ export default class MaplibreLayerAdapter extends LayerAdapter {
     })
   }
 
-  /**
-   * Apply visibility for all layers with datasetId
-   * @param {string} datasetId
-   */
-  applyDatasetVisibility (datasetId) {
-    const registryDataset = datasetRegistry.getDataset(datasetId)
-    if (registryDataset) {
-      this._applyRegistryDatasetVisibility(registryDataset)
+  _setLayerVisibility (layerId, visibility) {
+    if (this._map.getLayer(layerId)) {
+      this._map.setLayoutProperty(layerId, 'visibility', visibility)
     }
   }
 
-  /**
-   * Apply visibility for all layers belonging to a registryDataset.
-   * @param {Object} registryDataset
-   */
-  _applyRegistryDatasetVisibility (registryDataset) {
-    registryDataset.getLayersWithVisibility().forEach(({ layerIds, visibility }) => {
-      layerIds.forEach(layerId => {
-        if (this._map.getLayer(layerId)) {
-          this._map.setLayoutProperty(layerId, 'visibility', visibility)
-        }
-      })
-    })
-  }
-
-  /**
-   * Apply visibility for all layers
-   */
-  applyGlobalVisibility () {
-    datasetRegistry.forEachDataset(registryDataset => this._applyRegistryDatasetVisibility(registryDataset))
-  }
-
   _applyFeatureFilter (registryDataset) {
     const layersWithFilters = registryDataset.getLayersWithFilters()
     layersWithFilters.forEach(({ layerIds, filter }) => {
@@ -331,7 +266,7 @@ export default class MaplibreLayerAdapter extends LayerAdapter {
     })
   }
 
-  _setPaintOpacity (layerId, opacity) {
+  _setLayerOpacity (layerId, opacity) {
     const layer = this._map.getLayer(layerId)
     if (!layer) {
       return

package/plugins/datasets/src/adapters/maplibre/maplibreLayerAdapter.test.js

@@ -214,6 +214,10 @@ describe('addDataset', () => {
     await adapter.addDataset('existing-fields')
     expect(map.moveLayer).not.toHaveBeenCalled()
   })
+
+  it('is a no-op for an unknown dataset id (inherited from MapboxStyleLayerAdapter)', async () => {
+    await expect(adapter.addDataset('does-not-exist')).resolves.toBeUndefined()
+  })
 })
 
 // ─── removeDataset ────────────────────────────────────────────────────────────

package/plugins/datasets/src/adapters/maplibre/registry/mapLibreDataset.js

@@ -1,10 +1,9 @@
-import { Dataset } from '../../../registry/dataset.js'
-import { hashString } from '../../../../../../src/utils/patternUtils.js'
+import { MapboxStyleDataset } from '../../../registry/mapboxStyleDataset.js'
 import { anchorToMaplibre } from '../../../../../../providers/maplibre/src/utils/symbolImages.js'
 import { logger } from '../../../../../../src/services/logger.js'
 const MAX_TILE_ZOOM = 22
 
-export class MapLibreDataset extends Dataset {
+export class MapLibreDataset extends MapboxStyleDataset {
   get fillLayerId () {
     if (this.hasSublayers) {
       return null
@@ -41,59 +40,10 @@ export class MapLibreDataset extends Dataset {
     return null
   }
 
-  get layerIds () {
-    if (this.hasSublayers) {
-      return this.sublayers.flatMap(sublayer => sublayer.layerIds).filter(Boolean)
-    }
+  get leafLayerIds () {
     return [this.symbolLayerId, this.fillLayerId, this.strokeLayerId].filter(Boolean)
   }
 
-  getLayersWithValue (valueName, condition = false) {
-    const response = []
-    if (condition === false || this[condition]) {
-      const layerIds = [this.symbolLayerId, this.fillLayerId, this.strokeLayerId].filter(Boolean)
-      if (layerIds.length) {
-        const value = this[valueName]
-        response.push({ layerIds, [valueName]: value })
-      }
-    }
-
-    if (this.hasSublayers) {
-      this.sublayers.forEach((sublayer) => {
-        if (condition === false || sublayer[condition]) {
-          response.push(sublayer.getLayersWithValue(valueName)[0])
-        }
-      })
-    }
-    return response
-  }
-
-  getLayersWithVisibility () {
-    return this.getLayersWithValue('visibility')
-  }
-
-  getLayersWithOpacity () {
-    return this.getLayersWithValue('opacity')
-  }
-
-  getLayersWithFilters () {
-    return this.getLayersWithValue('filter', 'hasHiddenFeatures')
-  }
-
-  get sourceId () {
-    if (this.isSublayer) { return this.parent.sourceId }
-    if (this.hasDynamicGeoJSON) { return this.dynamicGeoJSON.sourceId }
-    if (this.tiles) {
-      const tilesKey = Array.isArray(this.tiles) ? this.tiles.join(',') : this.tiles
-      return `tiles-${hashString(tilesKey)}`
-    }
-    if (this.geojson) {
-      if (typeof this.geojson === 'string') { return `geojson-${hashString(this.geojson)}` }
-      return `geojson-${this.id}`
-    }
-    return `source-${this.id}`
-  }
-
   _geojsonIdStrategy () {
     if (this.idProperty) { return { promoteId: this.idProperty } }
     if (this.generateIds) { return { generateId: true } }
@@ -168,40 +118,4 @@ export class MapLibreDataset extends Dataset {
       ...(this.filter ? { filter: this.filter } : {})
     }
   }
-
-  get _hiddenFeaturesIdExpression () {
-    if (this.hasDynamicGeoJSON) {
-      return this.dynamicGeoJSON.hiddenFeaturesIdExpression
-    }
-    if (this.idProperty) {
-      return ['to-string', ['get', this.idProperty]]
-    }
-    return ['to-string', ['id']]
-  }
-
-  get _hiddenFeaturesFilter () {
-    const hiddenFeatures = this.hiddenFeatures?.filter(id => id !== -1)
-    if (!hiddenFeatures?.length) {
-      return null
-    }
-    return ['!', ['in', this._hiddenFeaturesIdExpression, ['literal', hiddenFeatures.map(String)]]]
-  }
-
-  get filter () {
-    const filter = ['all']
-    if (this.parent?.filter) {
-      filter.push(this.parent.filter)
-    }
-    if (this._datasetDefinition.filter) {
-      filter.push(this._datasetDefinition.filter)
-    }
-    const hiddenFeaturesFilter = this._hiddenFeaturesFilter
-    if (hiddenFeaturesFilter) {
-      filter.push(hiddenFeaturesFilter)
-    }
-    if (filter.length === 1) {
-      return null
-    }
-    return filter.length > 2 ? filter : filter[1]
-  }
 }

package/plugins/datasets/src/adapters/openlayers/canvasPatternStyle.js

@@ -0,0 +1,111 @@
+import Style from 'ol/style/Style.js'
+import Fill from 'ol/style/Fill.js'
+import Stroke from 'ol/style/Stroke.js'
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+import { buildFilterEvaluator } from '../../../../../providers/beta/openlayers/src/utils/filterEvaluator.js'
+
+const DEFAULT_STROKE_WIDTH = 1
+
+/**
+ * The Canvas-only escape hatch for genuinely crisp fill patterns, at any pixelRatio.
+ *
+ * ol/style/flat's declarative fill-pattern-src/fill-pattern-size crops a pattern to its display
+ * size rather than scaling it, so it can't hold more source detail than it shows on screen. But
+ * ol/style/Fill also accepts a raw CanvasPattern as its colour, built directly from a
+ * pixelRatio-scaled source image with no further transform — genuinely resolution-independent,
+ * since OL's pattern coordinate space is physical-pixel-equivalent (confirmed empirically).
+ *
+ * Building actual ol/style/Style objects only works on Canvas — WebGLVector requires flat-style
+ * JSON (compiled to GLSL ahead of time), so this module is Canvas-only. See layerBuilders.js's
+ * resolveLayerStyle for where this is picked over the shared flatStyle path.
+ */
+
+const crispPatternCache = new Map() // imageId (already pixelRatio-scoped, see patternRegistry) → Fill
+
+const cacheKey = (imageId) => imageId
+
+export const getCachedCrispPatternFill = (imageId) => crispPatternCache.get(cacheKey(imageId))
+
+const buildPatternFill = (imageData) => {
+  const source = document.createElement('canvas')
+  source.width = imageData.width
+  source.height = imageData.height
+  source.getContext('2d').putImageData(imageData, 0, 0)
+  const scratch = document.createElement('canvas')
+  const pattern = scratch.getContext('2d').createPattern(source, 'repeat')
+  return new Fill({ color: pattern })
+}
+
+/**
+ * Rasterise-once-cache-forever — a synchronous cache lookup at style-build time needs this
+ * already resolved.
+ * @param {Object} style - Dataset style with fillPattern* properties
+ * @param {string} mapStyleId
+ * @param {Object} patternRegistry
+ * @param {number} pixelRatio - the map's current pixelRatio; re-called on resize
+ * @returns {Promise<void>}
+ */
+export const registerCrispCanvasPattern = async (style, mapStyleId, patternRegistry, pixelRatio) => {
+  const imageId = patternRegistry.getPatternImageId(style, mapStyleId, pixelRatio)
+  if (!imageId || crispPatternCache.has(cacheKey(imageId))) {
+    return
+  }
+  const result = await patternRegistry.rasterisePatternImage(style, mapStyleId, pixelRatio)
+  if (!result) {
+    return
+  }
+  const key = cacheKey(result.imageId)
+  if (!crispPatternCache.has(key)) {
+    crispPatternCache.set(key, buildPatternFill(result.imageData))
+  }
+}
+
+/** Register every pattern style in the given array, in parallel. */
+export const registerCrispCanvasPatterns = async (styleArray, mapStyleId, patternRegistry, pixelRatio) => {
+  if (!styleArray.length) {
+    return
+  }
+  await Promise.all(styleArray.map(style => registerCrispCanvasPattern(style, mapStyleId, patternRegistry, pixelRatio)))
+}
+
+/** Mainly for testing — clears every cached Fill. */
+export const clearCrispPatternCache = () => {
+  crispPatternCache.clear()
+}
+
+const buildStroke = (registryDataset, mapStyleId) => {
+  if (!registryDataset.hasStroke) {
+    return undefined
+  }
+  return new Stroke({
+    color: getValueForStyle(registryDataset.style.stroke, mapStyleId),
+    width: registryDataset.style.strokeWidth || DEFAULT_STROKE_WIDTH,
+    lineDash: registryDataset.style.strokeDashArray
+  })
+}
+
+/**
+ * Builds an OL style function for a Canvas-rendered, pattern-bearing dataset/sublayer — uses a
+ * real CanvasPattern (see module doc), bypassing OpenLayersDataset.flatStyle for this one case.
+ * @param {Object} registryDataset - an OpenLayersDataset with hasPattern true
+ * @param {string} mapStyleId
+ * @param {number} pixelRatio - must match what registerCrispCanvasPattern was last called with
+ * @param {Object} patternRegistry
+ * @returns {import('ol/style/Style.js').StyleFunction}
+ */
+export const buildCanvasPatternStyle = (registryDataset, mapStyleId, pixelRatio, patternRegistry) => {
+  const imageId = patternRegistry.getPatternImageId(registryDataset.style, mapStyleId, pixelRatio)
+  const fill = imageId && getCachedCrispPatternFill(imageId)
+  const style = fill ? new Style({ fill, stroke: buildStroke(registryDataset, mapStyleId) }) : undefined
+  const matchesFilter = buildFilterEvaluator(registryDataset.filter)
+
+  return (feature) => {
+    if (!style) {
+      return undefined
+    }
+    if (matchesFilter && !matchesFilter(feature)) {
+      return undefined
+    }
+    return style
+  }
+}

package/plugins/datasets/src/adapters/openlayers/canvasPatternStyle.test.js

@@ -0,0 +1,198 @@
+import Style from 'ol/style/Style.js'
+import Feature from 'ol/Feature.js'
+import Point from 'ol/geom/Point.js'
+import {
+  registerCrispCanvasPattern,
+  registerCrispCanvasPatterns,
+  getCachedCrispPatternFill,
+  clearCrispPatternCache,
+  buildCanvasPatternStyle
+} from './canvasPatternStyle.js'
+
+const OUTDOOR = 'outdoor'
+
+const makePatternRegistry = () => ({
+  getPatternImageId: jest.fn((style, mapStyleId, pixelRatio) => `pattern-${style.fillPattern}-${mapStyleId}-${pixelRatio}`),
+  rasterisePatternImage: jest.fn(async (style, mapStyleId, pixelRatio) => ({
+    imageId: `pattern-${style.fillPattern}-${mapStyleId}-${pixelRatio}`,
+    imageData: { width: 16 * pixelRatio, height: 16 * pixelRatio }
+  }))
+})
+
+let createPatternCalls
+beforeEach(() => {
+  clearCrispPatternCache()
+  createPatternCalls = []
+  HTMLCanvasElement.prototype.getContext = jest.fn(function () {
+    this._ctx ??= {
+      putImageData: jest.fn(),
+      createPattern: jest.fn((source, repetition) => {
+        const pattern = { source, repetition }
+        createPatternCalls.push(pattern)
+        return pattern
+      })
+    }
+    return this._ctx
+  })
+})
+
+describe('registerCrispCanvasPattern', () => {
+  it('caches a Fill built from a real CanvasPattern for a valid pattern config', async () => {
+    const patternRegistry = makePatternRegistry()
+    const style = { fillPattern: 'dot' }
+    await registerCrispCanvasPattern(style, OUTDOOR, patternRegistry, 2)
+    const imageId = patternRegistry.getPatternImageId(style, OUTDOOR, 2)
+    const fill = getCachedCrispPatternFill(imageId)
+    expect(fill.getColor()).toEqual(expect.objectContaining({ repetition: 'repeat' }))
+  })
+
+  it('rasterises at the given pixelRatio, not a fixed constant', async () => {
+    const patternRegistry = makePatternRegistry()
+    await registerCrispCanvasPattern({ fillPattern: 'dot' }, OUTDOOR, patternRegistry, 3)
+    expect(patternRegistry.rasterisePatternImage).toHaveBeenCalledWith({ fillPattern: 'dot' }, OUTDOOR, 3)
+  })
+
+  it('does nothing when getPatternImageId returns null', async () => {
+    const patternRegistry = makePatternRegistry()
+    patternRegistry.getPatternImageId.mockReturnValue(null)
+    await registerCrispCanvasPattern({ fillPattern: 'unknown' }, OUTDOOR, patternRegistry, 1)
+    expect(patternRegistry.rasterisePatternImage).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when rasterisePatternImage returns null', async () => {
+    const patternRegistry = makePatternRegistry()
+    patternRegistry.rasterisePatternImage.mockResolvedValue(null)
+    const style = { fillPattern: 'dot' }
+    await registerCrispCanvasPattern(style, OUTDOOR, patternRegistry, 1)
+    const imageId = patternRegistry.getPatternImageId(style, OUTDOOR, 1)
+    expect(getCachedCrispPatternFill(imageId)).toBeUndefined()
+  })
+
+  it('skips rasterising again once cached for the same imageId', async () => {
+    const patternRegistry = makePatternRegistry()
+    const style = { fillPattern: 'dot' }
+    await registerCrispCanvasPattern(style, OUTDOOR, patternRegistry, 1)
+    await registerCrispCanvasPattern(style, OUTDOOR, patternRegistry, 1)
+    expect(patternRegistry.rasterisePatternImage).toHaveBeenCalledTimes(1)
+  })
+
+  it('building the same pattern config twice concurrently still leaves exactly one cached Fill', async () => {
+    // registerCrispCanvasPatterns (plural) can be handed two different dataset styles that
+    // happen to resolve to the same imageId (identical pattern/colours) — both start rasterising
+    // before either has cached its result, so the second one back must skip re-caching rather
+    // than clobbering the first.
+    const patternRegistry = makePatternRegistry()
+    const style = { fillPattern: 'dot' }
+    await registerCrispCanvasPatterns([style, { ...style }], OUTDOOR, patternRegistry, 1)
+    const imageId = patternRegistry.getPatternImageId(style, OUTDOOR, 1)
+    expect(getCachedCrispPatternFill(imageId)).toBeDefined()
+  })
+
+  it('caches separately per pixelRatio, since imageId is pixelRatio-scoped', async () => {
+    const patternRegistry = makePatternRegistry()
+    const style = { fillPattern: 'dot' }
+    await registerCrispCanvasPattern(style, OUTDOOR, patternRegistry, 1)
+    await registerCrispCanvasPattern(style, OUTDOOR, patternRegistry, 4)
+    expect(patternRegistry.rasterisePatternImage).toHaveBeenCalledTimes(2)
+    expect(getCachedCrispPatternFill(patternRegistry.getPatternImageId(style, OUTDOOR, 1))).toBeDefined()
+    expect(getCachedCrispPatternFill(patternRegistry.getPatternImageId(style, OUTDOOR, 4))).toBeDefined()
+  })
+})
+
+describe('registerCrispCanvasPatterns', () => {
+  it('registers every config in parallel', async () => {
+    const patternRegistry = makePatternRegistry()
+    await registerCrispCanvasPatterns([{ fillPattern: 'dot' }, { fillPattern: 'stripes' }], OUTDOOR, patternRegistry, 1)
+    expect(patternRegistry.rasterisePatternImage).toHaveBeenCalledTimes(2)
+  })
+
+  it('is a no-op for an empty array', async () => {
+    const patternRegistry = makePatternRegistry()
+    await registerCrispCanvasPatterns([], OUTDOOR, patternRegistry, 1)
+    expect(patternRegistry.rasterisePatternImage).not.toHaveBeenCalled()
+  })
+})
+
+describe('buildCanvasPatternStyle', () => {
+  const feature = (props) => new Feature({ geometry: new Point([0, 0]), ...props })
+
+  it('returns undefined when the pattern has not been registered yet', () => {
+    const patternRegistry = makePatternRegistry()
+    const registryDataset = { style: { fillPattern: 'dot' }, filter: null }
+    const styleFn = buildCanvasPatternStyle(registryDataset, OUTDOOR, 1, patternRegistry)
+    expect(styleFn(feature())).toBeUndefined()
+  })
+
+  it('returns a Style with the cached pattern Fill once registered, for an unfiltered dataset', async () => {
+    const patternRegistry = makePatternRegistry()
+    await registerCrispCanvasPattern({ fillPattern: 'dot' }, OUTDOOR, patternRegistry, 1)
+    const registryDataset = { style: { fillPattern: 'dot' }, filter: null, hasStroke: false }
+    const styleFn = buildCanvasPatternStyle(registryDataset, OUTDOOR, 1, patternRegistry)
+    const style = styleFn(feature())
+    expect(style).toBeInstanceOf(Style)
+    expect(style.getFill().getColor()).toEqual(expect.objectContaining({ repetition: 'repeat' }))
+  })
+
+  it('includes a Stroke when the dataset has one', async () => {
+    const patternRegistry = makePatternRegistry()
+    await registerCrispCanvasPattern({ fillPattern: 'dot' }, OUTDOOR, patternRegistry, 1)
+    const registryDataset = {
+      style: { fillPattern: 'dot', stroke: '#ff0000', strokeWidth: 3 },
+      filter: null,
+      hasStroke: true
+    }
+    const styleFn = buildCanvasPatternStyle(registryDataset, OUTDOOR, 1, patternRegistry)
+    const style = styleFn(feature())
+    expect(style.getStroke().getColor()).toBe('#ff0000')
+    expect(style.getStroke().getWidth()).toBe(3)
+  })
+
+  it('defaults the Stroke width to 1 when strokeWidth is not set', async () => {
+    const patternRegistry = makePatternRegistry()
+    await registerCrispCanvasPattern({ fillPattern: 'dot' }, OUTDOOR, patternRegistry, 1)
+    const registryDataset = {
+      style: { fillPattern: 'dot', stroke: '#ff0000' },
+      filter: null,
+      hasStroke: true
+    }
+    const styleFn = buildCanvasPatternStyle(registryDataset, OUTDOOR, 1, patternRegistry)
+    expect(styleFn(feature()).getStroke().getWidth()).toBe(1)
+  })
+
+  it('evaluates a filter correctly for a feature with no geometry', async () => {
+    const patternRegistry = makePatternRegistry()
+    await registerCrispCanvasPattern({ fillPattern: 'dot' }, OUTDOOR, patternRegistry, 1)
+    const registryDataset = {
+      style: { fillPattern: 'dot' },
+      filter: ['==', ['get', 'category'], 'a'],
+      hasStroke: false
+    }
+    const styleFn = buildCanvasPatternStyle(registryDataset, OUTDOOR, 1, patternRegistry)
+    const featureWithNoGeometry = new Feature({ category: 'a' })
+    expect(styleFn(featureWithNoGeometry)).toBeInstanceOf(Style)
+  })
+
+  it('hides a feature that does not match the dataset filter', async () => {
+    const patternRegistry = makePatternRegistry()
+    await registerCrispCanvasPattern({ fillPattern: 'dot' }, OUTDOOR, patternRegistry, 1)
+    const registryDataset = {
+      style: { fillPattern: 'dot' },
+      filter: ['==', ['get', 'category'], 'a'],
+      hasStroke: false
+    }
+    const styleFn = buildCanvasPatternStyle(registryDataset, OUTDOOR, 1, patternRegistry)
+    expect(styleFn(feature({ category: 'b' }))).toBeUndefined()
+  })
+
+  it('shows a feature that matches the dataset filter', async () => {
+    const patternRegistry = makePatternRegistry()
+    await registerCrispCanvasPattern({ fillPattern: 'dot' }, OUTDOOR, patternRegistry, 1)
+    const registryDataset = {
+      style: { fillPattern: 'dot' },
+      filter: ['==', ['get', 'category'], 'a'],
+      hasStroke: false
+    }
+    const styleFn = buildCanvasPatternStyle(registryDataset, OUTDOOR, 1, patternRegistry)
+    expect(styleFn(feature({ category: 'a' }))).toBeInstanceOf(Style)
+  })
+})