Map Controls¶

The mapControls block in your project's settings.json adds MapLibre's built-in controls to the map's corners: zoom buttons, a "locate me" button, fullscreen, a scale bar, a globe toggle and a terrain toggle. They're separate from the kit's floating widgets, though both can share the same corners.

Include a control's key to add it, and leave the key out to skip it. Without a mapControls block there are no built-in controls.

"mapControls": {
  "navigation": { "position": "top-left" },
  "geolocate": { "position": "top-right", "trackUserLocation": true },
  "globe": { "position": "top-right" }
}

Controls¶

All seven take an optional position: "top-left" | "top-right" | "bottom-left" | "bottom-right", and an optional order (default 0) that sets their place in the corner: lower comes first. Controls with the same order keep the kit's own order (navigation, geolocate, fullscreen, globe, scale, zoom level, terrain). See Ordering a corner.

Per-control options¶

navigation¶

geolocate¶

scale¶

fullscreen and globe¶

Both take only position.

zoomLevel¶

A small read-only readout of the current zoom (z 12.4), updating as the map zooms. Handy when picking a layer's minZoom / maxZoom. It follows the theme and never takes clicks from the map. In the bottom-left corner it stacks above the scale bar.

"mapControls": {
  "zoomLevel": { "position": "bottom-left", "precision": 1 }
}

terrain¶

Leave out source to use AWS's public Terrain Tiles (terrarium encoding).

Attribution¶

The map's credits button is always shown, since the data and tile licenses require it; you can't add or remove it, only move it. It starts expanded and collapses once the user pans the map; the "ⓘ" button expands it again.

"mapControls": {
  "attribution": { "position": "bottom-left", "order": 1000 }
}

Ordering a corner¶

The built-in controls and the kit's floating widgets share the four map corners, and both take an order on one scale: lower stacks first, from the top in a top corner and from the top of the stack in a bottom one. Everything defaults to 0 except the credits button (1000), and ties keep the controls first, then the floating widgets. Give a floating widget a negative order to lift it above the controls (the demo's search widget does this; see Building a Custom Widget), or give a control a higher one to push it below a widget.

"mapControls": {
  "navigation": { "position": "top-right", "order": 2 },
  "globe": { "position": "top-right", "order": 1 }
}