Filter within a layer

Replicates the MapLibre example Filter within a layer. The layer and its initial filter are YAML; the slider re-filters at runtime through getMap().setFilter.

Minimum magnitude 2.0

Drag the slider — smaller quakes drop out

The YAML half

filter-within-a-layer.yaml

# 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-within-a-layer/
# The YAML half: layer + data + an initial filter. The slider drives
# setFilter through getMap() — see filter-within-a-layer.js.
type: map
id: filter-within-a-layer
config:
  center: [-118.25, 34.05]
  zoom: 7
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: quakes
    type: circle
    filter: [">=", ["get", "mag"], 2]
    source:
      type: geojson
      data:
        type: FeatureCollection
        features:
          - { type: Feature, geometry: { type: Point, coordinates: [-118.2, 34.1] }, properties: { mag: 4.4 } }
          - { type: Feature, geometry: { type: Point, coordinates: [-118.3, 34.0] }, properties: { mag: 2.9 } }
          - { type: Feature, geometry: { type: Point, coordinates: [-118.25, 34.05] }, properties: { mag: 3.6 } }
          - { type: Feature, geometry: { type: Point, coordinates: [-118.1, 34.2] }, properties: { mag: 5.1 } }
          - { type: Feature, geometry: { type: Point, coordinates: [-118.4, 33.9] }, properties: { mag: 2.2 } }
          - { type: Feature, geometry: { type: Point, coordinates: [-118.15, 34.0] }, properties: { mag: 3.9 } }
          - { type: Feature, geometry: { type: Point, coordinates: [-118.35, 34.15] }, properties: { mag: 4.7 } }
          - { type: Feature, geometry: { type: Point, coordinates: [-118.28, 34.08] }, properties: { mag: 3.2 } }
    paint:
      circle-radius: ["interpolate", ["linear"], ["get", "mag"], 2, 5, 6, 18]
      circle-color: "#e63946"
      circle-opacity: 0.75

The page half

This markup goes inside <ml-map>; children with a slot ride its corner system.

filter-within-a-layer.html

<div slot="top-left" class="gallery-panel">
  <label>Minimum magnitude <strong data-filter-readout>2.0</strong></label>
  <input type="range" data-filter-mag min="2" max="5" step="0.1" value="2" />
</div>

The JavaScript half

filter-within-a-layer.js

// The JavaScript half: setFilter through mapReady(). The YAML declares the
// layer's initial filter; user input re-filters at runtime — awaiting
// mapReady() means an early interaction waits for the map instead of
// silently doing nothing. (A declarative alternative — global-state
// expressions driven by setGlobalStateProperty — exists in the format but
// needs maplibre-gl >= 5.6 at runtime.)
const mapEl = document.querySelector("ml-map");
const slider = document.querySelector("[data-filter-mag]");
const readout = document.querySelector("[data-filter-readout]");

slider.addEventListener("input", async () => {
  const min = Number(slider.value);
  readout.textContent = min.toFixed(1);
  const map = await mapEl.mapReady();
  map.setFilter("quakes", [">=", ["get", "mag"], min]);
});

What to notice

• The YAML filter: is the authored default; setFilter takes the same expression syntax at runtime.
• The declarative alternative — a global-state expression driven by setGlobalStateProperty — exists in the format but needs maplibre-gl ≥ 5.6 at runtime (tracked; see the gallery index).
• The slider is an <ml-map> slot child, so it sits on the map in the corner the params panel would use. (For a no-JS version of this control, see Create a time slider: a range parameter driving a global-state filter.)