deck.gl icon indicating copy to clipboard operation
deck.gl copied to clipboard

Heatmap: Max radiusPixels or expression in other units

Open janhartmann opened this issue 4 years ago • 1 comments

Target Use case

I am currently in a situation, where I want to control the radiusPixels to be as accurate as possible to a meter value in real-world terms.

Currently the maximum pixel value is 100 as seen here:

https://github.com/visgl/deck.gl/blob/60e9334b3e4705b30b650cfb5445fb2d88851b6e/modules/aggregation-layers/src/heatmap-layer/heatmap-layer.js#L62

Before seeing this limitation, my idea was to increase/decrease the radiusPixels based on zoom level:

const getMetersPerPixel = (latitude: number, zoomLevel: number) => {
  const earthCircumference = 40075017;
  const latitudeRadians = latitude * (Math.PI / 180);
  return (
    (earthCircumference * Math.cos(latitudeRadians)) /
    Math.pow(2, zoomLevel + 9)
  );
};

const getMetersInPixelValue = (
  latitude: number,
  meters: number,
  zoomLevel: number
) => {
  return meters / getMetersPerPixel(latitude, zoomLevel);
};

Proposed feature

Being able to control the value as either meter, kilometer or pixel where pixel would be the default value, where the heat-map would automatically adjust for zoom. Alternatively, it could stay as pixels but being able to handle values above 100.

To Do List

  • [ ] Add label and assign to milestone
  • [ ] Coding
  • [ ] Doc update
  • [ ] What’s new update
  • [ ] Test

janhartmann avatar Sep 29 '21 10:09 janhartmann

I would like to bump this ticket if possible. Would be really great to have for a project I'm working on. Additionally I can't seem to make the heatmap have a radiusPixels > 100 which makes it not very useful at high zoom levels when i have more than 100 pixels between points I'm trying to paint a heatmap across

ClassicSours avatar Feb 25 '22 14:02 ClassicSours