how to maintain data driven styling defined heatmap radius size with zoom level in Mapbox gl js

Question

Mapbox gl js error message says: "expressions are not allowed in function stops".

I am trying make heatmap radius, whose size is defined by data driven styling. At the same time, the size of radius need follow the zoom level.

Any workaround available to achieve the goal? Thanks.

I tested:

'heatmap-radius': ['number', ['get', 'radius']],

So heatmap radius is drawn based on the 'radius' value; and

'heatmap-radius': {
     base': 2,
     'stops': [
     [17, 20 * 1],
     [20, 20 * 8]
   },

A radius size of 20 would appear the same size when zoom level changes.

However, an error message says "expressions are not allowed in function stops" when I tried to combine the two. E.g.,

'heatmap-radius': {
           'base': 2,
           'stops': [
                [17, ['number', ['get', 'radius']]],
                [20, ['number', ['get', 'radius']]]
           ]
       },

Answer 1

You need to use modern expression syntax: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#data-expressions

Answer 2

Thanks, Steve. I read the referred document and realized the non-working code mixed old and modern styles.

The working code is as follows in case someone is interested:

'heatmap-radius': [
    "interpolate", ["exponential", 2], ["zoom"],
    17, ['get', 'radius'],
    20, ['*', ['get', 'radius'], 8]
], // 8 = 2 ^ (20 - 17)