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

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

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']]]
           ]
       },

Solution