Espresso
Espresso

Reputation: 930

How to set Mapbox heatmap color by data value?

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

Upvotes: 4

Views: 2031

Answers (1)

user2998034
user2998034

Reputation: 65

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.

Upvotes: 0

Related Questions