opened
fifiDesPlaines
username_0
<!--
Hello! Thanks for contributing.

The answers to many "how do I...?" questions can be found in our [help documentation](https://mapbox.com/help). If you can't find the answer there, the best place to ask is either [Stack Overflow](https://stackoverflow.com/questions/tagged/mapbox-gl-js) or [Mapbox support](https://mapbox.com/contact/).

However, if you have a question that isn't addressed in the documentation but should be, please do let us know by filling out the template below!  As a general rule, if a question is about _how Mapbox GL JS works_ rather than your specific use case, we will try to address it here or by improving the documentation.  Otherwise, we might close the issue here and instead recommend asking on Stack Overflow or contacting support.

-->
Hi, 

**mapbox-gl-js version**: 1.10.1

### Question

I would like to construct a kind of temperature-like map. I would like to fill the map depending on the value of my dots and not their densities. The closest kind of layer that I can use is the Heatmap...  Is there a way to display a heatmap whose color depends on an aggregation of the point's properties composing it instead of their densities? 

Something like that : https://github.com/optimisme/javascript-temperatureMap 
where dots will be kind of cluster's centers of other points.

### Links to related documentation

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#heatmap
The doc says : "Defines the color of each pixel based on its density value in a heatmap. Should be an expression that uses ["heatmap-density"] as input."

https://docs.mapbox.com/help/tutorials/make-a-heatmap-with-mapbox-gl-js/
Here, you've constructed the heatmap from the density, Is it possible to construct an expression based on an average of property of the geojson ?

<!-- Include links to the specific section(s) of the documentation where you would have expected to find an answer to this question. -->
Aggregate function for the property heatmap-color
issue
created
mourner
username_1
Currently this is not possible with the heatmap layer — the way it is technically implemented makes the rendering dependent on the density of points. We might want to explore adding an option for an alternative rendering. For now, you could try e.g. using blurred circles to represent the temperatures, kind of like a scatterplot.
comment
created
jda-tid
username_2
It would be perfect to show temperature or internet speed from user doesn't matter the amount or density of users that we have.

Using the explained heatmap it doesn't make any sense as "temperature" can't be added depending on the amount of dots.

From the docs: 

It is even mentioned the second kind of heatmap, in which the value is the average of the points, instead of the density. However, only one is explained.

https://docs.mapbox.com/help/tutorials/make-a-heatmap-with-mapbox-gl-js/#what-is-the-purpose-of-a-heatmap

`Among maps you'll find on the web, there are two common categories of heatmaps: those that encourage the user to explore dense point data, and those that interpolate discrete values over a continuous surface, creating a smooth gradient between those points. The latter is less common and most often used in scientific publications or when a phenomenon is distributed over an area in a predictable way. For example, your town may only have a few weather stations, but your favorite weather app displays a smooth gradient of temperatures across the entire area of your town. For your local weather service, it is reasonable to assume that, if two adjacent stations report different temperatures, the temperature between them will transition gradually from one to the next.`

More info about these kind of maps:

https://mgimond.github.io/Spatial/spatial-interpolation.html

Sample:

![image](https://user-images.githubusercontent.com/36664452/83972622-7444df00-a8e1-11ea-94fb-b7798149caa8.png)

Possible result: 
![image](https://user-images.githubusercontent.com/36664452/83972625-7c048380-a8e1-11ea-85dd-2fb7a501234f.png)
comment
created
fifiDesPlaines
username_0
@username_1 , I tried this approach, but the result is not satisfying for the moment. I'm trying to cut the map in tiles with their size depending on the zoom, and to calculate the fill color from an aggregation function.
comment
created
Rylern
username_3
Hi, if anyone still needs this feature I used a custom Mapbox layer to create what you're describing, take a look here:
https://github.com/username_3/InterpolateHeatmapLayer
comment
created
royyeah
username_4
@username_3 We tried your approach, but the rendering is not fast / pixel-perfect enough for our use case. We currently went for the approach suggested by @username_1 (blurred circles to represent the temperatures), but we keep our eyes open for something better in the future!
comment
created
dson
username_5
Any update on this? The heatmap layer looks amazing! It's a shame we can't use it for this other common use case as well. :)
comment
created
Rylern
username_3
Actually you can customize the colors, take a look at the `valueToColor` parameter. It allows you to define the function that maps a value to a color. Tell me the color scale you want, and I can help you define this parameter.
When you say it's not rendering fast enough, what do you mean exactly? Is it when you first load the map, or after when you change the map location?
comment
created
royyeah
username_4
@username_3 Oh, you’re right, my bad. I confused it with another approach we tried. I think your solution works pretty well for visualizing value distribution on a global scale. For our use case however we ran into some issues we couldn’t solve:

* It covers the entire map. There is an option to limit it to a specific area, but we would prefer something more like the Mapbox heatmap, where the effect only applies where the points are.
* The points have to be passed at layer creation, which means we’ll have to recreate the layer every time we want to update the values. It would be nice if we could use a datasource for the points.

<img width="714" alt="Screenshot 2022-03-25 at 13 30 46" src="https://user-images.githubusercontent.com/4243242/160147013-6712b1fa-b966-42cd-9c23-6826ef2661f1.png">
comment