Update from Open Layers 6 to 8 causes AnimatedCluster animation glitch

[nerdess]

Update from Open Layers 6 to 8 causes AnimatedCluster animation glitch

[nerdess]

The fix introduced here #1013 was also fixing my issue. Hope there will be a release soon to add it to the official codebase :)

[Viglino]

It's seems there is a scale factor on the icons...
Do you have an online example?

[nerdess]

Hm...building an online example would take a while...

I didn't change the code though, I just bumped Open Layers from 6.x to 8.x.

This is the style of the black circle features:

(The ICONS are svg's)

const getScale = (resolution) => {
	const result = 1 / Math.pow(resolution, 1);
	return result > 0.4 ? 0.4 : result;
};

return [
	new olStyle.Style({
		image: new olStyle.Circle({
			radius: 30,
			scale: getScale(resolution) * 1.5,
			fill: new olStyle.Fill({
				color: hover || selected ? '#1F54A0' : 'rgba(51, 51, 51, 0.8)',
			}),
		}),
	}),
	new olStyle.Style({
		image: new olStyle.Icon({
			src: ICONS[category_tag || 'uncategorized'].src,
			scale: getScale(resolution),
		}),
	}),
];

[mike-000]

Possibly due to repeatedly reloading images (which is asynchronous) if the total number of icon sources exceeds the built in cache. You could define your own style caches outside the style function

const circleCache = {};
const iconCache = {};

Then in the style function simply look up the color or src, only creating a new style and adding to the cache if it does not exist, then you only need set the scale used to render it

const color = hover || selected ? '#1F54A0' : 'rgba(51, 51, 51, 0.8)';
let circle = circleCache[color];
if (!circle) {
	circle = new olStyle.Circle({
		radius: 30 * 1.5;,
		fill: new olStyle.Fill({
			color: color,
		}),
	});
	circleCache[color] = circle;
}

const src = ICONS[category_tag || 'uncategorized'].src;
let icon = iconCache[src];
if (!icon) {
	icon = new olStyle.Style({
		image: new olStyle.Icon({
			src: src,
		}),
	}),
	iconCache[src] = icon;
}

const scale = Math.min(0.4, 1 / resolution);
circle.getImage().setScale(scale);
icon.getImage().setScale(scale);

return [circle, icon];

[Viglino]

May be related to #1013