CODEWITHSUNDEEP
heatmapmapbox-gl-jsradiusdata-driven
mindsc
mindsc

Reputation: 3

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

Upvotes: 0

Views: 71

Answers (2)

mindsc
mindsc

Reputation: 3

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)

Upvotes: 0

Steve Bennett
Steve Bennett

Reputation: 126517

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

Upvotes: 0

Related Questions