Search code examples
mapboxmapbox-gl-jsmaplibre-gl

Expression to get value from nested objects


I am struggling to write a style expression in Mapbox/Maplibre GL JS to set a circle-radius based on a value in my geojson. I have many features, whose properties look something like this:

"properties": {
  "name": "Site A",
  "type": "Bucket Trap",
  "data": [
    {
      "date": "2019-08-26",
      "catch": 21,
    },
    {
      "date: "2019-08-27",
      "catch": 15
    }
}

Upon the user selecting a date from a form control, I want to set the circle-radius to equal the catch value for that particular date.

I thought maybe I could use index-of to find the object with the requested date, then get the catch value from that object.

I’ve tried the following:

let selectedDate = '2019-08-26';
map.setPaintProperty(
  'traps',
  'circle-radius',
  [
    'get',
    'catch',
    [
      'at',
      [
        'index-of',
        selectedDate,
        [
          'get',
          'date',
          [
            'get',
            'avgdata'
          ]
        ]
      ],
      [
        'get',
        'avgdata'
      ]
    ]
  ]
);

and receive this error on the console:

Expected value to be of type object, but found array<object, 26> instead.

If it’s easier for you to read the expression on one line, here’s what I’ve been trying:

['get', 'catch', ['at', ['index-of', selectedDate, ['get', 'date', ['get', 'avgdata']]], ['get', 'avgdata']]]

Thanks in advance for any suggestions!


Solution

  • Nested objects can be done by nesting the expression and using the 'properties' object:-

    {
      "description" : {"title" : "foo"}
    }
    
    ['get', 'title', ['get','description', ['properties']]]