How to use Mapbox expressions to toggle layer class styles

Question

I have a Mapbox map with a visible layer that shows multiple circles representing different types of locations. These cycles are stored within a single Mapbox layer. There is some functionality within my react app that allows me to change the opacity these circles to 0 or 0.5 with the result effect being a toggle on or off.

I've made some very crude code that allows me to toggle the styles of each of these circles, but having to create an if statement for every permutation isn't feasible.

Here's what I have so far, implementing 2 circle classes only (C and R) where the final version will include 9 different classes and so many if statements I don't want to work it out.

map.current.on('idle', () => {
  if (filters.C.visible && filters.R.visible) {
    map.current.setLayoutProperty('type', 'visibility', 'visible');
    map.current.setPaintProperty('type', 'circle-opacity', 0.1);
  } else if (filters.C.visible) {
    map.current.setLayoutProperty('type', 'visibility', 'visible');
    map.current.setPaintProperty('type', 'circle-opacity', [
      'match',
      ['get', 'class'],
      'C', 0.5,
      'R', 0,
      0, // everything else
    ]);
  } else if (filters.R.visible) {
    map.current.setLayoutProperty('type', 'visibility', 'visible');
    map.current.setPaintProperty('type', 'circle-opacity', [
      'match',
      ['get', 'class'],
      'C', 0,
      'R', 0.5,
      0, // everything else
    ]);
  } else {
    map.current.setLayoutProperty('type', 'visibility', 'none');
  }
});

Ideally I want to change the style of one class without affecting any other classes so I could create a switch and keep the code clean, however the match expression requires that 4th 0, // everything else line which is what is causing my issue.

Does anyone have any smart ideas how I might be able to achieve this please? The only thing I can think of is split the single layer into multiple layers and toggle the layer instead, but I'm unsure what else this might affect.

Steve Bennett Steve Bennett · Accepted Answer · 2019-12-04T22:24:38

A simple way to refactor it would be as follows:

const opacities = {
    C: filters.C.visible ? 0.5 : 0,
    R: filters.R.visible ? 0.5 : 0,
    // ...
}
map.current.setPaintProperty('type', 'circle-opacity', [
    'match',
    ['get', 'class'],
    'C', opacities.C,
    'R', opacities.R,
    // ...
    0, // everything else
  ]);

If you want to further refactor to minimise repetition and handle a very large number of classes:

const classes = ['C', 'R'];
const expression = ['match', ['get', 'class']];
classes.forEach(c => expression.push(c, filters[c].visible ? 0.5 : 0));
expression.push(0); // "default" case

map.current.setPaintProperty('type', 'circle-opacity', expression);

How to use Mapbox expressions to toggle layer class styles

1 Answers