question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Heatmap - How to scale weight, threshold and radius from zoom?

See original GitHub issue

Hello, I tried to update the weight of my heat map when the zoom level changes. But it seems to be to much and all is freezing. My data is a around 3000 positions. Here is my layer’s code :

new HeatmapLayer({
    data,
    id: 'heatmap-layer',
    visible: true,
    pickable: false,
    colorRange: [
      [185, 16, 224, 0],
      [185, 16, 224, 25],
      [185, 16, 224, 38],
      [185, 16, 224, 64],
      [185, 16, 224, 102],
      [185, 16, 224, 127]
    ],
    getPosition: d => [d.lng, d.lat],
    getWeight: d => (zoom === 0 ? 0 : (zoom * 1) / 22),
    radiusPixels: 40,
    intensity: 1,
    threshold: 0.2,
    updateTriggers: {
      getWeight: [zoom]
    }
  })

Is there an efficient way to update the weight, threshold and radius property when the zoom level changes?

Thanks a lot for your help!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
Pessimistresscommented, Oct 12, 2020

Looks like the update is not denounced if you change radiusPixels during zoom. I will investigate.

0reactions
rgazelotcommented, Oct 13, 2020

@Pessimistress Perfect! The debounce works perfectly. Thanks a lot for your help and the job you do. Congrats to all the team!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Heat map symbology—ArcGIS Pro | Documentation
The radius is a set distance specified in screen unit points. Optionally, choose an attribute field with numeric data for Weight field to...
Read more >
Heatmap weight change on zoom-out event? - Stack Overflow
I worked this out as follows: function getHeatMapRadius(latitudeCoordinate) { var distanceInMeter = 3; /* meter distance in real world */ var meterPerPixel ...
Read more >
Add a heat map layer to a map - Azure - Microsoft Learn
Use a zoom expression to scale the radius for each zoom level, such that each data point covers the same physical area of...
Read more >
Heatmap Layer | Maps JavaScript API - Google Developers
dissipating : Specifies whether heatmaps dissipate on zoom. · gradient : The color gradient of the heatmap, specified as an array of CSS...
Read more >
Introducing heatmaps in Mapbox GL JS | by Vladimir Agafonkin
This property allows you to adjust the intensity of the heatmap appearance globally. The higher the value, the more “weight” each point will ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found