Search code examples
javascriptopenlayersopenlayers-6

OpenLayers - Heatmap | Override default overlap weight calculation


I am trying to implement an OpenLayers Heatmap to visualize some data on a map. My goal is to display heatmap points with given weights. Currently my poc code looks like this:

const features = [
  { lat: 46.934942, lon: 17.891804, id: 10, value: 6.5 },
  { lat: 46.93489, lon: 17.892713, id: 11, value: 5.2 },
  { lat: 46.934662, lon: 17.892331, id: 12, value: 5.9 },
].map((item) => {
  const feature = createFeature({
    lon: item.lon,
    lat: item.lat,
    id: `${item.id}`,
    customStyle: new olStyle.Style({
      image: new olStyle.Circle({
        radius: 5,
        fill: new olStyle.Fill({
          color: "#AB1F58",
        }),
      }),
    }),
  });

  feature.setProperties({ value: item.value });

  return feature;
});

const newLayer = new olLayer.Heatmap({
  source: new olSource.Vector({
    features,
  }),
  blur: 0,
  radius: 50,
  weight(feature) {
    return feature.getProperties().value / 10;
  },
});

map.addLayer(newLayer)

Example image

My problem is that OpenLayers sums the values when the features overlap but I would like the overlap area to have the average value.

Is this possible or should I look for another solution?


Solution

  • One way that I can think of is by using a Cluster source. Write your own createCluster function to return a new feature with an average value and display this.