Toggle interactions

Replicates the MapLibre example Toggle interactions. YAML sets each interaction handler’s initial state (config.scrollZoom: false and friends — see Disable scroll zoom). Switching one while the map runs is page JavaScript: each checkbox is named after a handler, and one delegated listener calls its enable() or disable().

Untick a handler and that gesture stops working

The YAML half

# 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/toggle-interactions/
# The YAML half: the map, every interaction handler at its default. YAML
# sets a handler's INITIAL state (`config.scrollZoom: false`, …);
# switching one at runtime is page JavaScript — see toggle-interactions.js.
type: map
id: toggle-interactions
config:
  center: [-77.04, 38.907]
  zoom: 3
  mapStyle: "https://demotiles.maplibre.org/style.json"

The page half

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

<fieldset slot="top-right" class="gallery-panel" data-interactions>
  <label><input type="checkbox" name="scrollZoom" checked /> Scroll zoom</label>
  <label><input type="checkbox" name="boxZoom" checked /> Box zoom</label>
  <label><input type="checkbox" name="dragRotate" checked /> Drag rotate</label>
  <label><input type="checkbox" name="dragPan" checked /> Drag pan</label>
  <label><input type="checkbox" name="keyboard" checked /> Keyboard</label>
  <label><input type="checkbox" name="doubleClickZoom" checked /> Double click zoom</label>
  <label><input type="checkbox" name="touchZoomRotate" checked /> Touch zoom rotate</label>
</fieldset>

The JavaScript half

// The JavaScript half: the map's interaction handlers, switched at runtime.
// Each checkbox is named after a handler (map.scrollZoom, map.dragPan, …)
// and one delegated listener enables or disables it.
const mapEl = document.querySelector("ml-map");

document.querySelector("[data-interactions]").addEventListener("change", async (e) => {
  const map = await mapEl.mapReady();
  const handler = map[e.target.name];
  if (e.target.checked) handler.enable();
  else handler.disable();
});

What to notice

The checkbox name is the handler’s property on the map (map.scrollZoom, map.dragPan, …), which keeps the JS to one listener.
The panel is <fieldset slot="top-right"> — any element can be a slot child.