Filter layer symbols using global state
Replicates the MapLibre example Filter layer symbols using global state. The upstream checkboxes and their listeners become two toggle parameters; the categories show and hide as the filter reads global-state.
The complete document
Section titled “The complete document”# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/filter-layer-symbols-using-global-state/# Toggle parameters drive a global-state filter; the layer's authored label# also puts a visibility checkbox on the panel (`toggleable:` consuming).type: mapid: filter-layer-symbols-using-global-stateconfig: center: [-77.03, 38.9] zoom: 11 mapStyle: "https://demotiles.maplibre.org/style.json"state: showParks: default: true showMuseums: default: trueparameters: showParks: label: Parks type: toggle showMuseums: label: Museums type: togglelayers: - id: pois label: Points of interest type: circle source: type: geojson data: type: FeatureCollection features: - { type: Feature, geometry: { type: Point, coordinates: [-77.045, 38.905] }, properties: { kind: park } } - { type: Feature, geometry: { type: Point, coordinates: [-77.02, 38.89] }, properties: { kind: park } } - { type: Feature, geometry: { type: Point, coordinates: [-77.03, 38.9] }, properties: { kind: museum } } - { type: Feature, geometry: { type: Point, coordinates: [-77.01, 38.91] }, properties: { kind: museum } } filter: - any - ["all", ["==", ["get", "kind"], "park"], ["global-state", "showParks"]] - ["all", ["==", ["get", "kind"], "museum"], ["global-state", "showMuseums"]] paint: circle-radius: 8 circle-color: ["match", ["get", "kind"], "park", "#2a9d8f", "#e9c46a"] circle-stroke-width: 1.5 circle-stroke-color: "#ffffff"What to notice
Section titled “What to notice”- Two
toggleparameters drive two state keys; the one filter combines them withany/all. - The layer’s authored
label:also puts a whole-layer visibility checkbox on the panel — that istoggleable:being consumed (settoggleable: falseto opt a labeled layer out). - Requires maplibre-gl ≥ 5.6 for the state-driven controls; the layer checkbox is plain visibility and works everywhere.