How to set Mapbox heatmap color by data value?

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]
            ]
          },
        }
      });

user2998034 user2998034 · Accepted Answer · 2019-06-25T22:03:24

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.

How to set Mapbox heatmap color by data value?

1 Answers