Support global state expression for layer visibility

[hiddewie]

User Story

I would like to create a layer that is "togglable" to be visible/invisible with a global-state expression.

For example:

{
  id: 'historical-stations',
  layout: {
    visible: ['global-state', 'feature-enabled'],
  }
}

The visibility attribute of the layout properties of a layer is handled specifically, and does not seem to support any expressions.

See https://maplibre.org/maplibre-style-spec/layers/#visibility and

maplibre-gl-js/src/style/style_layer.ts

Line 90 in 5e0f8f7

visibility: 'visible' | 'none' | void;

and

maplibre-gl-js/src/style/style_layer.ts

Lines 230 to 233 in 5e0f8f7

	if (name === 'visibility') {
	this.visibility = value;
	return;
	}

It does not make sense for the visibility to support expressions related to the properties of a feature, but it does makes sense to support expressions related to global-state.

Rationale

Currently, making layers dynamically visible requires dynamically adding or deleting layers, or alternatively attaching metadata to every layer and dynamically reading the metadata to toggle the layer visibility.

The MapLibre style specification is made to be statically defined, instead of dynamic. After the addition of the global map state through the proposal in maplibre/maplibre-style-spec#886 (https://maplibre.org/maplibre-style-spec/expressions/#global-state), we can now define map features with defaults. Such features can be used to make the map dynamic using a static style, in most properties except for visibility.

Impact

Make it easier for map developers to create MapLibre-powered maps that behave more dynamically based on the user preferences. Such styles will also be more reusable because the map style itself documents the global state parameters, instead of depending on client-side scripting to make manipulate the map layers.

The code must be updated to allow expressions for the visibility layer property.

The code must be updated to evaluate the expression (if any) to determine the resolved layer visibility.

At the least, the implementation in

maplibre-gl-js/src/style/style_layer.ts

Line 179 in 5e0f8f7

getLayoutAffectingGlobalStateRefs(): Set<string> {

needs to recognise that visibility can contain an expression and impact the rendering of a layer.

[HarelM]

Doesn't filter solves this exact same problem?

[hiddewie]

I assume that filtering on the expression false would still render the layer, load the source, and evaluate the filter for every feature on the map. If my assumption is correct, then that would cause a performance penalty for having a layer with a filter that evaluates to false for every feature on the map. Especially if there are many such "disabled" layers.

[HarelM]

I would recommend starting and seeing if it solves the issue or not.
Another way, since your are changing global state you can change the relevant layers.
I don't think visibility is even data driven now, so supporting global state is even more complex.
But you are welcome to try and hack it and open a PR 😀

[hiddewie]

Yes it works with filter, as expected. But as expected, the behaviour is different. For example with visibility: 'none', attribution for non-loaded sources is not shown. And with a filter evaluating to false, the attribution is shown even if no data can be shown on the map for that source.

[melitele]

@hiddewie you are absolutely right, visibility is used to optimize not loading tiles while filters are applied after tiles are loaded. Evaluating global-state doesn't require loading tiles, so it won't interfere with this optimization. I'll do the PR unless you beat me to it.

[hiddewie]

@melitele if you can make a PR, great, much appreciated. I did not create one yet.

[hiddewie]

@melitele did you get around to making a pull request?

[melitele]

working on it