mapboxmapbox-gl-jsmaplibre-gl

Map{box,libre} expression syntax for dynamic property value


I am stuck trying to write an expression that evaluates to a number for my paint.circle-radius property.

If I set something like this, to use the radius feature property, it works fine:

"circle-radius": {
  property: "radius",
  type: "exponential",
  stops: [
    [{ zoom: 9, value: 1 }, 10],
    [{ zoom: 9, value: 10 }, 80]
  ]
},

Trying to use an expression to calculate the value does not work:

"circle-radius": [
  "literal",
  {
    property: ["case", ["has", "other"], "other", "radius"],
    type: "exponential",
    stops: [
      [{ zoom: 9, value: 1 }, 10],
      [{ zoom: 9, value: 10 }, 80]
    ]
  }
]

The full example is here: https://codesandbox.io/s/laughing-mclean-zftnpr?file=/index.html

I would expect a yellow circle on the top with a radius of 10. Instead, the layer does not render, and all you see are the tomato circles.

Error in console:

circle-radius: Expected number but found object instead


Solution

  • You are using property syntax that was deprecated years ago, and attempting to combine it with current expression syntax in a way that won't work.

    You want something like this:

    "circle-radius": 
      ["interpolate", 
          ["case", ["has", "other"], ["get", "other"], ["get", "radius"]],
          1, 10, 
          10, 80
      ]