From 558b24d2d2d3709eadd1892a39a9906566270442 Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Fri, 1 May 2026 15:47:52 +0100 Subject: [PATCH 01/11] IM-247 use patterns with a double scaleFactor --- .../datasets/src/adapters/maplibre/maplibreLayerAdapter.js | 4 +++- plugins/beta/datasets/src/panels/Key.jsx | 1 + plugins/beta/map-styles/src/MapStyles.jsx | 4 +++- providers/maplibre/src/appEvents.js | 1 + providers/maplibre/src/maplibreProvider.js | 6 ++++-- providers/maplibre/src/utils/patternImages.js | 7 ++++--- src/services/patternRegistry.js | 2 +- 7 files changed, 17 insertions(+), 8 deletions(-) diff --git a/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js b/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js index 769db79d..eb29df9b 100644 --- a/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js +++ b/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js @@ -364,7 +364,9 @@ export default class MaplibreLayerAdapter { // ─── Private ───────────────────────────────────────────────────────────────── get _pixelRatio () { - return this._mapProvider.map.getPixelRatio() * (scaleFactor[this._mapProvider.mapSize] || 1) + return this._mapProvider.map.getPixelRatio() + // const pixelRatio = this._mapProvider.map.getPixelRatio() * (scaleFactor[this._mapProvider.mapSize] || 1) + // return pixelRatio } _addLayers (dataset, mapStyle, pixelRatio) { diff --git a/plugins/beta/datasets/src/panels/Key.jsx b/plugins/beta/datasets/src/panels/Key.jsx index 5e9a1080..8eb7de27 100755 --- a/plugins/beta/datasets/src/panels/Key.jsx +++ b/plugins/beta/datasets/src/panels/Key.jsx @@ -10,6 +10,7 @@ export const Key = ({ pluginConfig, mapState, pluginState, services }) => { } const { mapStyle } = mapState const { symbolRegistry, patternRegistry } = services + console.log('symbolRegistry.list()', symbolRegistry.list()) const renderEntry = (key, config) => (
diff --git a/plugins/beta/map-styles/src/MapStyles.jsx b/plugins/beta/map-styles/src/MapStyles.jsx index d78e2b73..f6ee9039 100755 --- a/plugins/beta/map-styles/src/MapStyles.jsx +++ b/plugins/beta/map-styles/src/MapStyles.jsx @@ -15,7 +15,9 @@ export const MapStyles = ({ mapState, pluginConfig, services, mapProvider }) => const handleMapSizeClick = (newMapSize) => { eventBus.emit(EVENTS.MAP_SET_SIZE, newMapSize) - eventBus.emit(EVENTS.MAP_SET_PIXEL_RATIO, window.devicePixelRatio * scaleFactor[newMapSize]) + const newPixelRatio = window.devicePixelRatio * scaleFactor[newMapSize] + console.log('handleMapSizeClick newPixelRatio', newPixelRatio) + eventBus.emit(EVENTS.MAP_SET_PIXEL_RATIO, newPixelRatio) } return ( diff --git a/providers/maplibre/src/appEvents.js b/providers/maplibre/src/appEvents.js index f17bb585..02f70758 100755 --- a/providers/maplibre/src/appEvents.js +++ b/providers/maplibre/src/appEvents.js @@ -14,6 +14,7 @@ export function attachAppEvents ({ } const handleSetPixelRatio = (pixelRatio) => { + console.log('Setting pixel ratio to', pixelRatio) map.setPixelRatio(pixelRatio) } diff --git a/providers/maplibre/src/maplibreProvider.js b/providers/maplibre/src/maplibreProvider.js index db4a96a6..8ae69bd6 100755 --- a/providers/maplibre/src/maplibreProvider.js +++ b/providers/maplibre/src/maplibreProvider.js @@ -325,7 +325,8 @@ export default class MapLibreProvider { * @returns {Promise} */ async addSymbolsToMap (symbolConfigs, mapStyle, symbolRegistry) { - const pixelRatio = (this.map.getPixelRatio() || 1) * (scaleFactor[this.mapSize] || 1) + // const pixelRatio = (this.map.getPixelRatio() || 1) * (scaleFactor[this.mapSize] || 1) + const pixelRatio = this.map.getPixelRatio() return addSymbolsToMap(this.map, symbolConfigs, mapStyle, symbolRegistry, pixelRatio) } @@ -341,7 +342,8 @@ export default class MapLibreProvider { * @returns {Promise} */ async addPatternsToMap (patternConfigs, mapStyleId, patternRegistry) { - const pixelRatio = (this.map.getPixelRatio() || 1) * (scaleFactor[this.mapSize] || 1) + // const pixelRatio = (this.map.getPixelRatio() || 1) * (scaleFactor[this.mapSize] || 1) + const pixelRatio = this.map.getPixelRatio() return addPatternsToMap(this.map, patternConfigs, mapStyleId, patternRegistry, pixelRatio) } diff --git a/providers/maplibre/src/utils/patternImages.js b/providers/maplibre/src/utils/patternImages.js index 686dfbb7..2bcfd560 100644 --- a/providers/maplibre/src/utils/patternImages.js +++ b/providers/maplibre/src/utils/patternImages.js @@ -1,4 +1,4 @@ -import { injectColors, PATTERN_MIN_PIXEL_RATIO } from '../../../../src/utils/patternUtils.js' +import { injectColors } from '../../../../src/utils/patternUtils.js' import { getValueForStyle } from '../../../../src/utils/getValueForStyle.js' import { rasteriseToImageData } from './rasteriseToImageData.js' @@ -34,7 +34,7 @@ const rasterisePattern = async (dataset, mapStyleId, patternRegistry, pixelRatio const bgRect = `` // 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 effectiveRatio = pixelRatio * 2 // Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) const physicalSize = Math.round(8 * effectiveRatio) const svgString = `${bgRect}${colored}` imageData = await rasteriseToImageData(svgString, physicalSize, physicalSize) @@ -62,7 +62,7 @@ export const addPatternsToMap = async (map, styleArray, mapStyleId, patternRegis return } - const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) + const effectiveRatio = pixelRatio * 2 // Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) await Promise.all(styleArray.map(async (config) => { const imageId = patternRegistry.getPatternImageId(config, mapStyleId, pixelRatio) if (!imageId || map.hasImage(imageId)) { @@ -70,6 +70,7 @@ export const addPatternsToMap = async (map, styleArray, mapStyleId, patternRegis } const result = await rasterisePattern(config, mapStyleId, patternRegistry, pixelRatio) if (result) { + console.log('Adding pattern to map', result.imageId, result.imageData, effectiveRatio) map.addImage(result.imageId, result.imageData, { pixelRatio: effectiveRatio }) } })) diff --git a/src/services/patternRegistry.js b/src/services/patternRegistry.js index c90d4a99..e81b4ae0 100644 --- a/src/services/patternRegistry.js +++ b/src/services/patternRegistry.js @@ -97,7 +97,7 @@ export const patternRegistry = { } const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black' const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent' - const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) + const effectiveRatio = pixelRatio * 2 // Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) return `pattern-${hashString(innerContent + fg + bg)}-${effectiveRatio}x` } } From 81ba7f85f08d50188b44b0f68621a4468cf1efaf Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Fri, 1 May 2026 16:16:32 +0100 Subject: [PATCH 02/11] IM-247 attempt with effectivePixelRatio of 2* --- providers/maplibre/src/utils/patternImages.js | 4 +++- src/services/patternRegistry.js | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/providers/maplibre/src/utils/patternImages.js b/providers/maplibre/src/utils/patternImages.js index 2bcfd560..810ef970 100644 --- a/providers/maplibre/src/utils/patternImages.js +++ b/providers/maplibre/src/utils/patternImages.js @@ -1,4 +1,4 @@ -import { injectColors } from '../../../../src/utils/patternUtils.js' +import { injectColors, PATTERN_MIN_PIXEL_RATIO } from '../../../../src/utils/patternUtils.js' import { getValueForStyle } from '../../../../src/utils/getValueForStyle.js' import { rasteriseToImageData } from './rasteriseToImageData.js' @@ -35,6 +35,7 @@ const rasterisePattern = async (dataset, mapStyleId, patternRegistry, pixelRatio // 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 = pixelRatio * 2 // Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) + // const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) const physicalSize = Math.round(8 * effectiveRatio) const svgString = `${bgRect}${colored}` imageData = await rasteriseToImageData(svgString, physicalSize, physicalSize) @@ -63,6 +64,7 @@ export const addPatternsToMap = async (map, styleArray, mapStyleId, patternRegis } const effectiveRatio = pixelRatio * 2 // Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) + // const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) await Promise.all(styleArray.map(async (config) => { const imageId = patternRegistry.getPatternImageId(config, mapStyleId, pixelRatio) if (!imageId || map.hasImage(imageId)) { diff --git a/src/services/patternRegistry.js b/src/services/patternRegistry.js index e81b4ae0..0056a1cd 100644 --- a/src/services/patternRegistry.js +++ b/src/services/patternRegistry.js @@ -98,6 +98,7 @@ export const patternRegistry = { const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black' const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent' const effectiveRatio = pixelRatio * 2 // Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) + // const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) return `pattern-${hashString(innerContent + fg + bg)}-${effectiveRatio}x` } } From 5b2ee6cf30812b019843cf81f1f8401c3d07728a Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Tue, 5 May 2026 11:11:58 +0100 Subject: [PATCH 03/11] IM-247 removed some passing of pixelRatio in maplibreLayerAdapter.js --- .../adapters/maplibre/maplibreLayerAdapter.js | 26 +++++++------------ 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js b/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js index eb29df9b..8ee3e64b 100644 --- a/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js +++ b/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js @@ -45,13 +45,12 @@ export default class MaplibreLayerAdapter { */ async init (datasets, mapStyle) { const mapStyleId = mapStyle.id - const pixelRatio = this._pixelRatio await Promise.all([ this._mapProvider.addPatternsToMap(getPatternConfigs(datasets, this._patternRegistry), mapStyleId, this._patternRegistry), this._mapProvider.addSymbolsToMap(getSymbolConfigs(datasets), mapStyle, this._symbolRegistry) ]) this._symbolLayerIds.clear() - datasets.forEach(dataset => this._addLayers(dataset, mapStyle, pixelRatio)) + datasets.forEach(dataset => this._addLayers(dataset, mapStyle)) await new Promise(resolve => this._map.once('idle', resolve)) } @@ -90,13 +89,12 @@ export default class MaplibreLayerAdapter { await new Promise(resolve => this._map.once('idle', resolve)) const newStyleId = newMapStyle.id - const pixelRatio = this._pixelRatio await Promise.all([ this._mapProvider.addPatternsToMap(getPatternConfigs(datasets, this._patternRegistry), newStyleId, this._patternRegistry), this._mapProvider.addSymbolsToMap(getSymbolConfigs(datasets), newMapStyle, this._symbolRegistry) ]) this._symbolLayerIds.clear() - datasets.forEach(dataset => this._addLayers(dataset, newMapStyle, pixelRatio)) + datasets.forEach(dataset => this._addLayers(dataset, newMapStyle)) // Re-push cached data for dynamic sources dynamicSources.forEach(source => source.reapply()) @@ -119,7 +117,6 @@ export default class MaplibreLayerAdapter { * @returns {Promise} */ async onSizeChange (datasets, mapStyle) { - const pixelRatio = this._pixelRatio await Promise.all([ this._mapProvider.addSymbolsToMap(getSymbolConfigs(datasets), mapStyle, this._symbolRegistry), this._mapProvider.addPatternsToMap(getPatternConfigs(datasets, this._patternRegistry), mapStyle.id, this._patternRegistry) @@ -127,7 +124,7 @@ export default class MaplibreLayerAdapter { datasets.forEach(dataset => { getAllLayerIds(dataset).forEach(layerId => { if (!this._symbolLayerIds.has(layerId) || !this._map.getLayer(layerId)) { return } - const imageId = this._symbolRegistry.getSymbolImageId(dataset, mapStyle, false, pixelRatio) + const imageId = this._symbolRegistry.getSymbolImageId(dataset, mapStyle, false, this._pixelRatio) if (imageId) { this._map.setLayoutProperty(layerId, 'icon-image', imageId) } @@ -135,7 +132,7 @@ export default class MaplibreLayerAdapter { if (hasPattern(dataset)) { const { fillLayerId } = getLayerIds(dataset) if (this._map.getLayer(fillLayerId)) { - const imageId = this._patternRegistry.getPatternImageId(dataset, mapStyle.id, pixelRatio) + const imageId = this._patternRegistry.getPatternImageId(dataset, mapStyle.id, this._pixelRatio) if (imageId) { this._map.setPaintProperty(fillLayerId, 'fill-pattern', imageId) } @@ -145,13 +142,13 @@ export default class MaplibreLayerAdapter { const merged = mergeSublayer(dataset, sublayer) const { symbolLayerId, fillLayerId } = getSublayerLayerIds(dataset.id, sublayer.id) if (this._map.getLayer(symbolLayerId)) { - const imageId = this._symbolRegistry.getSymbolImageId(merged, mapStyle, false, pixelRatio) + const imageId = this._symbolRegistry.getSymbolImageId(merged, mapStyle, false, this._pixelRatio) if (imageId) { this._map.setLayoutProperty(symbolLayerId, 'icon-image', imageId) } } if (hasPattern(merged) && this._map.getLayer(fillLayerId)) { - const imageId = this._patternRegistry.getPatternImageId(merged, mapStyle.id, pixelRatio) + const imageId = this._patternRegistry.getPatternImageId(merged, mapStyle.id, this._pixelRatio) if (imageId) { this._map.setPaintProperty(fillLayerId, 'fill-pattern', imageId) } @@ -168,7 +165,7 @@ export default class MaplibreLayerAdapter { * @param {Object} mapStyle */ addDataset (dataset, mapStyle) { - this._addLayers(dataset, mapStyle, this._pixelRatio) + this._addLayers(dataset, mapStyle) } /** @@ -271,7 +268,6 @@ export default class MaplibreLayerAdapter { */ async setStyle (dataset, mapStyle) { const mapStyleId = mapStyle.id - const pixelRatio = this._pixelRatio getAllLayerIds(dataset).forEach(layerId => { if (this._map.getLayer(layerId)) { this._map.removeLayer(layerId) @@ -282,7 +278,7 @@ export default class MaplibreLayerAdapter { this._mapProvider.addPatternsToMap(getPatternConfigs([dataset], this._patternRegistry), mapStyleId, this._patternRegistry), this._mapProvider.addSymbolsToMap(getSymbolConfigs([dataset]), mapStyle, this._symbolRegistry) ]) - this._addLayers(dataset, mapStyle, pixelRatio) + this._addLayers(dataset, mapStyle) } /** @@ -365,12 +361,10 @@ export default class MaplibreLayerAdapter { get _pixelRatio () { return this._mapProvider.map.getPixelRatio() - // const pixelRatio = this._mapProvider.map.getPixelRatio() * (scaleFactor[this._mapProvider.mapSize] || 1) - // return pixelRatio } - _addLayers (dataset, mapStyle, pixelRatio) { - const sourceId = addDatasetLayers(this._map, dataset, mapStyle, this._symbolRegistry, this._patternRegistry, pixelRatio) + _addLayers (dataset, mapStyle) { + const sourceId = addDatasetLayers(this._map, dataset, mapStyle, this._symbolRegistry, this._patternRegistry, this._pixelRatio) this._datasetSourceMap.set(dataset.id, sourceId) this._maintainSymbolOrdering(dataset) } From 13bf250f65d1a21668f2bf401c8a4240e71f8012 Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Tue, 5 May 2026 11:21:33 +0100 Subject: [PATCH 04/11] IM-247 added a getEffectivePixelRatio method to patternRegistry --- plugins/beta/datasets/src/panels/Key.jsx | 1 - providers/maplibre/src/utils/patternImages.js | 10 +++------- src/utils/patternUtils.js | 2 +- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/plugins/beta/datasets/src/panels/Key.jsx b/plugins/beta/datasets/src/panels/Key.jsx index 8eb7de27..5e9a1080 100755 --- a/plugins/beta/datasets/src/panels/Key.jsx +++ b/plugins/beta/datasets/src/panels/Key.jsx @@ -10,7 +10,6 @@ export const Key = ({ pluginConfig, mapState, pluginState, services }) => { } const { mapStyle } = mapState const { symbolRegistry, patternRegistry } = services - console.log('symbolRegistry.list()', symbolRegistry.list()) const renderEntry = (key, config) => (
diff --git a/providers/maplibre/src/utils/patternImages.js b/providers/maplibre/src/utils/patternImages.js index 810ef970..0382c83f 100644 --- a/providers/maplibre/src/utils/patternImages.js +++ b/providers/maplibre/src/utils/patternImages.js @@ -1,4 +1,4 @@ -import { injectColors, PATTERN_MIN_PIXEL_RATIO } from '../../../../src/utils/patternUtils.js' +import { injectColors, getEffectivePixelRatio } from '../../../../src/utils/patternUtils.js' import { getValueForStyle } from '../../../../src/utils/getValueForStyle.js' import { rasteriseToImageData } from './rasteriseToImageData.js' @@ -32,10 +32,7 @@ const rasterisePattern = async (dataset, mapStyleId, patternRegistry, pixelRatio const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent' const colored = injectColors(innerContent, fg, bg) const bgRect = `` - // 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 = pixelRatio * 2 // Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) - // const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) + const effectiveRatio = getEffectivePixelRatio(pixelRatio) const physicalSize = Math.round(8 * effectiveRatio) const svgString = `${bgRect}${colored}` imageData = await rasteriseToImageData(svgString, physicalSize, physicalSize) @@ -63,8 +60,7 @@ export const addPatternsToMap = async (map, styleArray, mapStyleId, patternRegis return } - const effectiveRatio = pixelRatio * 2 // Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) - // const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) + const effectiveRatio = getEffectivePixelRatio(pixelRatio) await Promise.all(styleArray.map(async (config) => { const imageId = patternRegistry.getPatternImageId(config, mapStyleId, pixelRatio) if (!imageId || map.hasImage(imageId)) { diff --git a/src/utils/patternUtils.js b/src/utils/patternUtils.js index 055ca1c4..3110f492 100644 --- a/src/utils/patternUtils.js +++ b/src/utils/patternUtils.js @@ -1,8 +1,8 @@ // Border path rendered behind the pattern content in Key panel symbols (20×20 coordinate space). export const KEY_BORDER_PATH = '' // Minimum oversampling — keeps 16×16 physical pixels as the floor so patterns remain crisp. -export const PATTERN_MIN_PIXEL_RATIO = 2 +export const getEffectivePixelRatio = (pixelRatio) => pixelRatio * 2 export const hashString = (str) => { let hash = 0 for (const ch of str) { From 3ddada3dafbbfa42ca5e85a485d45e6ef5afecfa Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Tue, 5 May 2026 11:30:56 +0100 Subject: [PATCH 05/11] IM-247 patternImages.test.js fixed to use EffectivePixelRatio --- providers/maplibre/src/utils/patternImages.test.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/providers/maplibre/src/utils/patternImages.test.js b/providers/maplibre/src/utils/patternImages.test.js index 534ef6d4..e10ce915 100644 --- a/providers/maplibre/src/utils/patternImages.test.js +++ b/providers/maplibre/src/utils/patternImages.test.js @@ -55,7 +55,7 @@ describe('addPatternsToMap', () => { it('skips addImage when image is already registered', async () => { const style = { fillPattern: 'stripes' } - const pixelRatio = 2 + const pixelRatio = 1 const map = makeMap(['pattern-mpxwil-2x']) await addPatternsToMap(map, [style], OUTDOOR, patternRegistry, pixelRatio) expect(map.addImage).not.toHaveBeenCalled() @@ -89,9 +89,9 @@ describe('addPatternsToMap', () => { await addPatternsToMap(map, [config], OUTDOOR, patternRegistry, 2) expect(map.addImage).toHaveBeenCalledTimes(1) expect(map.addImage).toHaveBeenCalledWith( - expect.stringMatching(/^pattern-[a-z0-9]+-2x$/), + expect.stringMatching(/^pattern-[a-z0-9]+-4x$/), expect.any(Object), - { pixelRatio: 2 } + { pixelRatio: 4 } ) }) @@ -116,8 +116,8 @@ describe('addPatternsToMap', () => { 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$/) + expect(id2x).toMatch(/-4x$/) + expect(id3x).toMatch(/-6x$/) }) }) From e871eb3f6be66e9b09056bcb105155993f1e1037 Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Tue, 5 May 2026 13:12:05 +0100 Subject: [PATCH 06/11] IM-247 unit tests passing --- providers/maplibre/src/maplibreProvider.js | 3 +-- .../maplibre/src/maplibreProvider.test.js | 21 +++++-------------- src/services/patternRegistry.test.js | 8 +++---- src/utils/patternUtils.js | 4 +++- 4 files changed, 12 insertions(+), 24 deletions(-) diff --git a/providers/maplibre/src/maplibreProvider.js b/providers/maplibre/src/maplibreProvider.js index 8ae69bd6..fa9a7167 100755 --- a/providers/maplibre/src/maplibreProvider.js +++ b/providers/maplibre/src/maplibreProvider.js @@ -325,8 +325,7 @@ export default class MapLibreProvider { * @returns {Promise} */ async addSymbolsToMap (symbolConfigs, mapStyle, symbolRegistry) { - // const pixelRatio = (this.map.getPixelRatio() || 1) * (scaleFactor[this.mapSize] || 1) - const pixelRatio = this.map.getPixelRatio() + const pixelRatio = this.map.getPixelRatio() || 1 return addSymbolsToMap(this.map, symbolConfigs, mapStyle, symbolRegistry, pixelRatio) } diff --git a/providers/maplibre/src/maplibreProvider.test.js b/providers/maplibre/src/maplibreProvider.test.js index 683dadd7..b249383c 100644 --- a/providers/maplibre/src/maplibreProvider.test.js +++ b/providers/maplibre/src/maplibreProvider.test.js @@ -8,7 +8,6 @@ import { addSymbolsToMap } from './utils/symbolImages.js' import { addPatternsToMap } from './utils/patternImages.js' import { getAreaDimensions, getCardinalMove, getResolution, getPaddedBounds, isGeometryObscured } from './utils/spatial.js' import { symbolRegistry } from '../../../src/services/symbolRegistry.js' -// const addSymbolsToMapSpy = jest.spyOn(symbolRegistry, 'addSymbolsToMap').mockImplementation(() => Promise.resolve()) jest.mock('./defaults.js', () => ({ DEFAULTS: { animationDuration: 400, coordinatePrecision: 7 }, @@ -283,9 +282,9 @@ describe('MapLibreProvider', () => { const p = makeProvider() await doInitMap(p) map.getPixelRatio.mockReturnValue(2) - p.mapSize = 'medium' // scaleFactor['medium'] = 1.5 + p.mapSize = 'medium' await p.addSymbolsToMap([], { id: 'test' }, symbolRegistry) - expect(addSymbolsToMap).toHaveBeenCalledWith(map, [], { id: 'test' }, symbolRegistry, 3) + expect(addSymbolsToMap).toHaveBeenCalledWith(map, [], { id: 'test' }, symbolRegistry, 2) }) test('addSymbolsToMap falls back to pixelRatio 1 when getPixelRatio returns 0', async () => { @@ -306,24 +305,14 @@ describe('MapLibreProvider', () => { expect(addPatternsToMap).toHaveBeenCalledWith(map, configs, 'test', registry, 1) // getPixelRatio()=1, mapSize unset → 1*1 }) - test('addPatternsToMap computes pixelRatio from getPixelRatio and mapSize scale factor', async () => { + test('addPatternsToMap is called with pixelRatio from getPixelRatio', async () => { const p = makeProvider() await doInitMap(p) map.getPixelRatio.mockReturnValue(2) - p.mapSize = 'medium' // scaleFactor['medium'] = 1.5 + p.mapSize = 'medium' const registry = {} await p.addPatternsToMap([], 'test', registry) - expect(addPatternsToMap).toHaveBeenCalledWith(map, [], 'test', registry, 3) // 2 * 1.5 - }) - - test('addPatternsToMap falls back to pixelRatio 1 when getPixelRatio returns 0', async () => { - const p = makeProvider() - await doInitMap(p) - map.getPixelRatio.mockReturnValue(0) - p.mapSize = 'small' // scaleFactor['small'] = 1 - const registry = {} - await p.addPatternsToMap([], 'test', registry) - expect(addPatternsToMap).toHaveBeenCalledWith(map, [], 'test', registry, 1) // (0 || 1) * 1 + expect(addPatternsToMap).toHaveBeenCalledWith(map, [], 'test', registry, 2) }) describe('setHoverCursor', () => { diff --git a/src/services/patternRegistry.test.js b/src/services/patternRegistry.test.js index 6a00fcdc..c9810e1a 100644 --- a/src/services/patternRegistry.test.js +++ b/src/services/patternRegistry.test.js @@ -132,11 +132,9 @@ describe('patternRegistry', () => { expect(idA).not.toBe(idB) }) - test('floors effective ratio at PATTERN_MIN_PIXEL_RATIO so low-DPI ids match 2x', () => { + test('floors effective ratio at 2 * so low-DPI ids match 2x', () => { const dataset = { fillPattern: 'dot' } const id1x = patternRegistry.getPatternImageId(dataset, 'style-a', 1) - const id2x = patternRegistry.getPatternImageId(dataset, 'style-a', 2) - expect(id1x).toBe(id2x) expect(id1x).toMatch(/-2x$/) }) @@ -145,8 +143,8 @@ describe('patternRegistry', () => { const id2x = patternRegistry.getPatternImageId(dataset, 'style-a', 2) const id3x = patternRegistry.getPatternImageId(dataset, 'style-a', 3) expect(id2x).not.toBe(id3x) - expect(id2x).toMatch(/-2x$/) - expect(id3x).toMatch(/-3x$/) + expect(id2x).toMatch(/-4x$/) + expect(id3x).toMatch(/-6x$/) }) test('falls back to "black" foreground and "transparent" background when colours are absent', () => { diff --git a/src/utils/patternUtils.js b/src/utils/patternUtils.js index 3110f492..9b50d8e1 100644 --- a/src/utils/patternUtils.js +++ b/src/utils/patternUtils.js @@ -1,8 +1,10 @@ // Border path rendered behind the pattern content in Key panel symbols (20×20 coordinate space). export const KEY_BORDER_PATH = '' // Minimum oversampling — keeps 16×16 physical pixels as the floor so patterns remain crisp. +const PATTERN_MIN_PIXEL_RATIO = 2 + +export const getEffectivePixelRatio = (pixelRatio) => Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio * 2) -export const getEffectivePixelRatio = (pixelRatio) => pixelRatio * 2 export const hashString = (str) => { let hash = 0 for (const ch of str) { From 2e9db55e1c6bd3f13789457be1381cf0308c127d Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Tue, 5 May 2026 13:16:16 +0100 Subject: [PATCH 07/11] IM-247 removed console.logs --- plugins/beta/map-styles/src/MapStyles.jsx | 4 +--- providers/maplibre/src/appEvents.js | 1 - providers/maplibre/src/maplibreProvider.js | 3 +-- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/plugins/beta/map-styles/src/MapStyles.jsx b/plugins/beta/map-styles/src/MapStyles.jsx index f6ee9039..d78e2b73 100755 --- a/plugins/beta/map-styles/src/MapStyles.jsx +++ b/plugins/beta/map-styles/src/MapStyles.jsx @@ -15,9 +15,7 @@ export const MapStyles = ({ mapState, pluginConfig, services, mapProvider }) => const handleMapSizeClick = (newMapSize) => { eventBus.emit(EVENTS.MAP_SET_SIZE, newMapSize) - const newPixelRatio = window.devicePixelRatio * scaleFactor[newMapSize] - console.log('handleMapSizeClick newPixelRatio', newPixelRatio) - eventBus.emit(EVENTS.MAP_SET_PIXEL_RATIO, newPixelRatio) + eventBus.emit(EVENTS.MAP_SET_PIXEL_RATIO, window.devicePixelRatio * scaleFactor[newMapSize]) } return ( diff --git a/providers/maplibre/src/appEvents.js b/providers/maplibre/src/appEvents.js index 02f70758..f17bb585 100755 --- a/providers/maplibre/src/appEvents.js +++ b/providers/maplibre/src/appEvents.js @@ -14,7 +14,6 @@ export function attachAppEvents ({ } const handleSetPixelRatio = (pixelRatio) => { - console.log('Setting pixel ratio to', pixelRatio) map.setPixelRatio(pixelRatio) } diff --git a/providers/maplibre/src/maplibreProvider.js b/providers/maplibre/src/maplibreProvider.js index fa9a7167..06dc2a2c 100755 --- a/providers/maplibre/src/maplibreProvider.js +++ b/providers/maplibre/src/maplibreProvider.js @@ -341,8 +341,7 @@ export default class MapLibreProvider { * @returns {Promise} */ async addPatternsToMap (patternConfigs, mapStyleId, patternRegistry) { - // const pixelRatio = (this.map.getPixelRatio() || 1) * (scaleFactor[this.mapSize] || 1) - const pixelRatio = this.map.getPixelRatio() + const pixelRatio = this.map.getPixelRatio() || 1 return addPatternsToMap(this.map, patternConfigs, mapStyleId, patternRegistry, pixelRatio) } From 5ec07223389ad11f3bdf5a475f085f131b36c2e5 Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Tue, 5 May 2026 13:17:45 +0100 Subject: [PATCH 08/11] IM-247 lint fixes --- .../datasets/src/adapters/maplibre/maplibreLayerAdapter.js | 1 - src/services/patternRegistry.js | 5 ++--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js b/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js index 8ee3e64b..342fd0df 100644 --- a/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js +++ b/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js @@ -4,7 +4,6 @@ import { addDatasetLayers, addSublayerLayers } from './layerBuilders.js' import { getPatternConfigs, hasPattern } from './patternImages.js' import { getSymbolConfigs } from './symbolImages.js' import { mergeSublayer } from '../../utils/mergeSublayer.js' -import { scaleFactor } from '../../../../../../src/config/appConfig.js' /** * MapLibre GL JS implementation of the LayerAdapter interface for the datasets plugin. diff --git a/src/services/patternRegistry.js b/src/services/patternRegistry.js index 0056a1cd..d628f402 100644 --- a/src/services/patternRegistry.js +++ b/src/services/patternRegistry.js @@ -1,6 +1,6 @@ import { BUILT_IN_PATTERNS } from '../config/patternConfig.js' import { getValueForStyle } from '../utils/getValueForStyle.js' -import { KEY_BORDER_PATH, PATTERN_MIN_PIXEL_RATIO, injectColors, hashString } from '../utils/patternUtils.js' +import { KEY_BORDER_PATH, getEffectivePixelRatio, injectColors, hashString } from '../utils/patternUtils.js' const patterns = new Map() export const patternRegistry = { @@ -97,8 +97,7 @@ export const patternRegistry = { } const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black' const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent' - const effectiveRatio = pixelRatio * 2 // Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) - // const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio) + const effectiveRatio = getEffectivePixelRatio(pixelRatio) return `pattern-${hashString(innerContent + fg + bg)}-${effectiveRatio}x` } } From 8fe8897faa268ff4ccdb39f6f5a6d50a0fc3bd81 Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Tue, 5 May 2026 13:20:39 +0100 Subject: [PATCH 09/11] IM-247 covered extra line --- providers/maplibre/src/maplibreProvider.test.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/providers/maplibre/src/maplibreProvider.test.js b/providers/maplibre/src/maplibreProvider.test.js index b249383c..0da73629 100644 --- a/providers/maplibre/src/maplibreProvider.test.js +++ b/providers/maplibre/src/maplibreProvider.test.js @@ -296,13 +296,14 @@ describe('MapLibreProvider', () => { expect(addSymbolsToMap).toHaveBeenCalledWith(map, [], { id: 'test' }, symbolRegistry, 1) }) - test('addPatternsToMap delegates to utility with map instance and pixelRatio', async () => { + test('addPatternsToMap falls back to pixelRatio 1 when getPixelRatio returns 0', async () => { const p = makeProvider() await doInitMap(p) + map.getPixelRatio.mockReturnValue(0) const configs = [{ fillPattern: 'dot' }] const registry = {} await p.addPatternsToMap(configs, 'test', registry) - expect(addPatternsToMap).toHaveBeenCalledWith(map, configs, 'test', registry, 1) // getPixelRatio()=1, mapSize unset → 1*1 + expect(addPatternsToMap).toHaveBeenCalledWith(map, configs, 'test', registry, 1) }) test('addPatternsToMap is called with pixelRatio from getPixelRatio', async () => { From 8387c0f1299b7e3d5bcae643a0cafd5a1a5ae8a5 Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Tue, 5 May 2026 13:21:17 +0100 Subject: [PATCH 10/11] IM-247 further lint fixes --- providers/maplibre/src/maplibreProvider.js | 1 - 1 file changed, 1 deletion(-) diff --git a/providers/maplibre/src/maplibreProvider.js b/providers/maplibre/src/maplibreProvider.js index 06dc2a2c..f1d5dcf6 100755 --- a/providers/maplibre/src/maplibreProvider.js +++ b/providers/maplibre/src/maplibreProvider.js @@ -4,7 +4,6 @@ */ import { DEFAULTS, supportedShortcuts } from './defaults.js' -import { scaleFactor } from '../../../src/config/appConfig.js' import { cleanCanvas, applyPreventDefaultFix } from './utils/maplibreFixes.js' import { attachMapEvents } from './mapEvents.js' import { attachAppEvents } from './appEvents.js' From 82dad9a8b47c74513c558969dd1d08feb7e35187 Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Tue, 5 May 2026 13:26:11 +0100 Subject: [PATCH 11/11] IM-247 removed console.log --- providers/maplibre/src/utils/patternImages.js | 1 - 1 file changed, 1 deletion(-) diff --git a/providers/maplibre/src/utils/patternImages.js b/providers/maplibre/src/utils/patternImages.js index 0382c83f..88279beb 100644 --- a/providers/maplibre/src/utils/patternImages.js +++ b/providers/maplibre/src/utils/patternImages.js @@ -68,7 +68,6 @@ export const addPatternsToMap = async (map, styleArray, mapStyleId, patternRegis } const result = await rasterisePattern(config, mapStyleId, patternRegistry, pixelRatio) if (result) { - console.log('Adding pattern to map', result.imageId, result.imageData, effectiveRatio) map.addImage(result.imageId, result.imageData, { pixelRatio: effectiveRatio }) } }))