Heatmap example

[fourdasheyes]

I am having trouble implementing the Heatmap layer...
I have this data

[{"longitude":-122.03172,"latitude":37.33216,"count":20},{"longitude":-122.03223,"latitude":37.33236,"count":20},{"longitude":-122.03124,"latitude":37.33243,"count":21},{"longitude":-122.03175,"latitude":37.33262,"count":20},{"longitude":-122.0317,"latitude":37.33171,"count":20},{"longitude":-122.03221,"latitude":37.3319,"count":20},{"longitude":-122.03121,"latitude":37.33197,"count":20},{"longitude":-122.03172,"latitude":37.33216,"count":19},{"longitude":-122.03223,"latitude":37.33236,"count":19},{"longitude":-122.03124,"latitude":37.33243,"count":19},{"longitude":-122.03175,"latitude":37.33262,"count":19},{"longitude":-122.0317,"latitude":37.33171,"count":19},{"longitude":-122.03221,"latitude":37.3319,"count":19},{"longitude":-122.03121,"latitude":37.33197,"count":19},{"longitude":-122.03277,"latitude":37.33301,"count":19},{"longitude":-122.03328,"latitude":37.3332,"count":19},{"longitude":-122.03228,"latitude":37.33327,"count":19},{"longitude":-122.0328,"latitude":37.33346,"count":19},{"longitude":-122.03275,"latitude":37.33255,"count":19},{"longitude":-122.03326,"latitude":37.33274,"count":19},{"longitude":-122.03226,"latitude":37.33281,"count":19},{"longitude":-122.03024,"latitude":37.3325,"count":19},{"longitude":-122.03075,"latitude":37.33269,"count":19},{"longitude":-122.02975,"latitude":37.33276,"count":19},{"longitude":-122.03026,"latitude":37.33296,"count":19},{"longitude":-122.03021,"latitude":37.33204,"count":19},{"longitude":-122.03073,"latitude":37.33224,"count":19},{"longitude":-122.02973,"latitude":37.33231,"count":19},{"longitude":-122.03129,"latitude":37.33334,"count":19},{"longitude":-122.0318,"latitude":37.33354,"count":19},{"longitude":-122.0308,"latitude":37.33361,"count":19},{"longitude":-122.03131,"latitude":37.3338,"count":19},{"longitude":-122.03126,"latitude":37.33289,"count":19},{"longitude":-122.03177,"latitude":37.33308,"count":19},{"longitude":-122.03078,"latitude":37.33315,"count":19},{"longitude":-122.03216,"latitude":37.33098,"count":19},{"longitude":-122.03267,"latitude":37.33118,"count":19},{"longitude":-122.03167,"latitude":37.33125,"count":19},{"longitude":-122.03218,"latitude":37.33144,"count":19},{"longitude":-122.03213,"latitude":37.33053,"count":19},{"longitude":-122.03264,"latitude":37.33072,"count":19},{"longitude":-122.03165,"latitude":37.33079,"count":19},{"longitude":-122.03321,"latitude":37.33183,"count":19},{"longitude":-122.03372,"latitude":37.33202,"count":19},{"longitude":-122.03272,"latitude":37.33209,"count":19},{"longitude":-122.03323,"latitude":37.33228,"count":19},{"longitude":-122.03318,"latitude":37.33137,"count":19},{"longitude":-122.03369,"latitude":37.33156,"count":19},{"longitude":-122.0327,"latitude":37.33163,"count":19}]

which I want to display in form of a heatmap. Hoewever, I am not sure how to add the data to the heatmap. There is a sourceID. and a sourceLayerID prop, but I do not know how to use them. Can anyone poiunt me into the right direction? That would be very nice!

[mfazekas]

We do have a heat map example:
https://github.com/rnmapbox/maps/blob/main/example/src/examples/Annotations/Heatmap.js
You'll need to convert your data to geoJSON and use wrap your HeatmapLayer in <ShapeSource shape={myGeoJSONData} ...

[fourdasheyes]

Ah, I did not expect in the annotations folder. Thanks!

[fourdasheyes]

@mfazekas Sorry, I have another question which does not get answered through the example provided.

How would I color the heatmap not based on point density only, but on values associated with each point? I tried

style={
    heatmapWeight: {
              property: 'count',
              type: 'exponential',
              stops: [
                [1, 0],
                [62, 1],
              ],
            }
}

But this gives me

Mapbox error mglStyleValueNumber: Cannot parse ["property": "count", "stops": [[1, 0], [62, 1]], "type": "exponential"] as expression {"level": "error", "message": "mglStyleValueNumber: Cannot parse ["property": "count", "stops": [[1, 0], [62, 1]], "type": "exponential"] as expression"}

Why?