How to set Mapbox heatmap color by data value? - mapbox

Question

I would like to display a heatmap of Bluetooth scans such that scans with strong signals appear green and scans with weak signal strength appear red. I have tried playing with all of the Mapbox heatmap properties (weight, intensity, radius, color, opacity) and have not been able to achieve this effect. Is there any advice on how to do this?
GeoJSON data format ("rssi" is the signal strength)
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-79.92068447220412,
43.259061411756505
]
},
"properties": {
"name": "heatmap",
"rssi": "55"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-79.92068446786702,
43.25906141184957
]
},
"properties": {
"name": "heatmap",
"rssi": "59"
}
},
...
]
}
Heatmap layer so far
map.addLayer({
id: 'heatmap_heatmap_layer_id',
type: 'heatmap',
source: 'heatmap_source_id',
maxzoom: 24,
paint: {
'heatmap-weight': {
property: 'rssi',
type: 'exponential',
stops: [
[0, 1],
[120, 10]
]
},
'heatmap-intensity': {
stops: [
[currentZoom, 1],
[24, 2]
]
},
'heatmap-color': [
'interpolate',
['linear'],
['heatmap-density'],
0, 'rgba(240,29,29,0)',
0.2, 'rgba(198,0,12,1)',
0.4, 'rgba(32,43,222,1)',
0.7, 'rgba(1,1,1,1)',
1.0, 'rgba(200,144,153,1)'
],
'heatmap-radius': {
stops: [
[currentZoom, 20],
[middleZoom, 30]
]
},
'heatmap-opacity': {
default: 1,
stops: [
[currentZoom, 1],
[24, 1]
]
},
}
});

Answer 1

This one's a bit tricky, as heatmaps automatically blend and add points in close proximity with one another. This means that a single point of strong signal will appear the same color, as many points of weak signal close together.
You may be better off visualizing the points as discrete circles, colored by RSSI.