Controls

Map controls are interactive buttons positioned over the map — zoom, compass, locate, and fullscreen.

Usage

{
  "controls": {
    "zoom": true,
    "compass": true,
    "fullscreen": false,
    "locate": false,
    "position": "top-right"
  }
}

Properties

Property	Type	Default	Description
`zoom`	`boolean`	`true`	Show zoom in/out buttons
`compass`	`boolean`	`true`	Show compass / reset north button
`fullscreen`	`boolean`	`false`	Show fullscreen toggle
`locate`	`boolean`	`false`	Show locate-me button (uses browser geolocation)
`basemapSwitcher`	`boolean`	`false`	Show light/dark/streets basemap toggle (bottom-left)
`search`	`boolean`	`false`	Show geocoding search bar (top-left)
`layerSwitcher`	`boolean \| object`	`false`	Show layer visibility toggle panel. Pass `true` to use controls position, or `{ "position": "bottom-left" }` for independent placement. Panel opens downward from top corners, upward from bottom corners.
`position`	`ControlPosition`	`"top-right"`	Corner to place controls

Positioning

Controls are rendered as React components with absolute positioning over the map container:

"top-left"
"top-right" (default)
"bottom-left"
"bottom-right"

Defaults

When controls is set in the spec, zoom and compass are enabled by default. If controls is omitted entirely, no controls are shown.

{ "controls": {} }

This shows zoom + compass at top-right.

Example

Full controls at bottom-right:

{
  "basemap": "streets",
  "center": [-73.98, 40.75],
  "zoom": 13,
  "controls": {
    "zoom": true,
    "compass": true,
    "fullscreen": true,
    "locate": true,
    "basemapSwitcher": true,
    "search": true,
    "layerSwitcher": { "position": "top-left" },
    "position": "bottom-right"
  }
}