Mapbox-gl-js: Aggregate function for the property heatmap-color

[fifiDesPlaines]

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 ?

[mourner]

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.

[jda-tid]

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:

Possible result:

[fifiDesPlaines]

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.

@mourner , 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.