Controls

Tailwind-styled zoom and geolocate buttons overlaid on the map.

Usage

Drop <Controls> inside <Map>. Buttons are built on the shadcn Button, so they match your theme out of the box.

import { Controls } from "@/components/ui/controls";
import { Map } from "@/components/ui/map";

export function ControlsExample() {
  return (
    <div className="h-[420px] w-full">
      <Map center={[-97.7431, 30.2672]} zoom={11}>
        <Controls position="top-right" />
      </Map>
    </div>
  );
}

Props

Prop	Type	Default	Description
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"top-right"`	Corner to anchor the controls to.
`geolocate`	`boolean`	`true`	Show the geolocate button.
`className`	`string`	`—`	Classes for the controls container.

Popup