How to filter points in MapBox heatmap based on a property value?

Say I have a basic mapbox heatmap. the geojson that makes the vector tile that this heatmap is built from looks soemething like this:

{"type":"FeatureCollection",
    "features":[
         {"type":"Feature","properties":{"dbh":0, "icon-type": "bike"},"geometry":{"type":"Point","coordinates":[-79.91746,40.44356]}},
         {"type":"Feature","properties":{"dbh":12, "icon-type": "bike"},"geometry":{"type":"Point","coordinates":[-79.94606,40.44961]}},
         {"type":"Feature","properties":{"dbh":6, "icon-type": "cat"},"geometry":{"type":"Point","coordinates":[-79.96474,40.46283]}},
         {"type":"Feature","properties":{"dbh":2, "icon-type": "dog"},"geometry":{"type":"Point","coordinates":[-80.00949,40.42532]}}
     ]
}

I understand how to display a heatmap as per the tutorial here:

https://docs.mapbox.com/help/tutorials/make-a-heatmap-with-mapbox-gl-js/

Notice though that each of the Features in the geojson have an icon-type property. I want to dynamically tell my heatmap to only display points from the data with a certain icon-type value such as "bike" or "cat".

How can i achieve this?

Solution

You can achieve this using a filter in the layer config, as used in this exmple.

In your case, it would be something like:

map.addLayer({
  id: 'heatmap-layer',
  type: 'heatmap',
  source: 'your-source',
  paint: { ... },
  filter: ['==', ['get', 'icon-type'], 'cat']
});

'==' only allows features for which the next two parameters are equal.

'get' is used to access feature properties, so ['get', 'icon-type'] resolves to the icon-type property of the feature.

'cat' is a string litteral.