Deck.gl Heatmap values don't add up

I'm using deck.gl for the first time to show heatmaps of prices. However the circles don't add up, and it looks like they are cutting each other off. What am I doing wrong here?



Code:

type DataType = {
value: number;
centroid: [longitude: number, latitude: number];
};

this.deckOverlay = new MapboxOverlay({
interleaved: true,
layers: [],
onClick: (info, event) => {
if (info.object) {
this.lastSelected = info.object;
}
},
});

map.addControl(this.deckOverlay);
map.addControl(new maplibregl.NavigationControl(), 'bottom-right');

const values = convertedData.map((d) => d.value);
const min = Math.min(...values);
const max = Math.max(...values);

console.log(min, max);
// 1240 12183.32

const heatmapLayer = new HeatmapLayer<DataType>({
id: 'HeatmapLayer',
data: convertedData,
aggregation: 'SUM',
getPosition: (d) => d.centroid,
getWeight: (d) => d.value,
radiusPixels: 50,
colorDomain: [min, max],
});

this.deckOverlay.setProps({ layers: [heatmapLayer] });

Continue reading...