clustering is too slow, 7000 points take 2 min to load - cluster-analysis

Question

We faced a problem with too slow loading of clusters on HERE map. We have just 7000 points. In the example at HERE's tutorial clusting of more than 10.000 airport points works smoothly. It looks like the most time takes getNoisePresentation method (see below).
We are really struggling and will appreaicte your tips and help of how to overcome this problem. Thank you in advance.
Here is a clustering code:
const clusterOrigin = new H.clustering.Provider(this[typeFreights].originPoints, {
clusteringOptions: clusteringOptions,
theme: {
getClusterPresentation(cluster) {
let counts = 0
cluster.forEachDataPoint(point => counts += point.getData().counts)
const weight = cluster.getWeight()
const size = countScale(weight) * pixelRatio
const viewBox = [-size, -size, size * 2, size * 2]
const marker = svg
.replace(/\{counts\}/g, counts)
.replace(/\{viewBox\}/g, viewBox)
.replace(/\{size\}/g, size)
.replace(/\{fill\}/g, "#1d6eb6")
const clusterMarker = new H.map.Marker(cluster.getPosition(), {
icon: new H.map.Icon(marker, {
size: { w: size, h: size },
}),
min: cluster.getMinZoom(),
max: cluster.getMaxZoom(),
})
return clusterMarker
},
getNoisePresentation(noisePoint) {
const data = noisePoint.getData()
const weight = noisePoint.getWeight()
const size = countScale(weight) * pixelRatio
const viewBox = [-size, -size, size * 2, size * 2]
const marker = svg
.replace(/\{counts\}/g, data.counts)
.replace(/\{viewBox\}/g, viewBox)
.replace(/\{size\}/g, 30)
.replace(/\{fill\}/g, "#1d6eb6")
const noiseMarker = new H.map.Marker(noisePoint.getPosition(), {
min: noisePoint.getMinZoom(),
icon: new H.map.Icon(marker),
})
return noiseMarker
},
},
})
const clusterDestination = new H.clustering.Provider(this[typeFreights].destionationPoints, {
clusteringOptions: clusteringOptions,
theme: {
getClusterPresentation(cluster) {
let counts = 0
cluster.forEachDataPoint(point => counts += point.getData().counts)
const weight = cluster.getWeight()
const size = countScale(weight) * pixelRatio
const viewBox = [-size, -size, size * 2, size * 2]
const marker = svg
.replace(/\{counts\}/g, counts)
.replace(/\{viewBox\}/g, viewBox)
.replace(/\{size\}/g, size)
.replace(/\{fill\}/g, "#fe910c")
const clusterMarker = new H.map.Marker(cluster.getPosition(), {
icon: new H.map.Icon(marker, {
size: { w: size, h: size },
}),
min: cluster.getMinZoom(),
max: cluster.getMaxZoom(),
})
return clusterMarker
},
getNoisePresentation(noisePoint) {
const data = noisePoint.getData()
const weight = noisePoint.getWeight()
const size = countScale(weight) * pixelRatio
const viewBox = [-size, -size, size * 2, size * 2]
const marker = svg
.replace(/\{counts\}/g, data.counts)
.replace(/\{viewBox\}/g, viewBox)
.replace(/\{size\}/g, 30)
.replace(/\{fill\}/g, "#fe910c")
const noiseMarker = new H.map.Marker(noisePoint.getPosition(), {
min: noisePoint.getMinZoom(),
icon: new H.map.Icon(marker),
})
return noiseMarker
},
},
})

Answer 1

It looks like the major problem is that you do not cache icons and thus creating is an unnecessary burden on memory and CPU.
In methods "getClusterPresentation" and "getNoisePresentation" there are calls to H.new.Icon and there is no no caching and reuse of the already created Icons.
Which means in the worst case scenario it will create 7000 icons even if these icons look the same - see
Best Practices -> Icon Reuse in the Developer's Guide (https://developer.here.com/documentation/maps/topics/best-practices.html)
Hope this helps.