Controls

Add interactive controls to your map for zoom, compass, location, and fullscreen.

The MapControls component provides a set of interactive controls that can be positioned on any corner of the map.

Basic Controls

Show zoom, compass, geolocation, and fullscreen buttons using the showZoom, showCompass, showLocate, and showFullscreen props.

import { Map, MapControls } from "@/components/ui/map";

export function MapControlsExample() {
  return (
    <div className="h-[400px] w-full">
      <Map center={[121.4737, 31.2304]} zoom={11}>
        <MapControls
          position="bottom-right"
          showZoom
          showCompass
          showLocate
          showFullscreen
        />
      </Map>
    </div>
  );
}

Scale Bar

Add a real-world scale indicator with showScale. The scale bar updates as you zoom in and out and is always rendered at the bottom-left of the map.

"use client";

import { Map, MapControls } from "@/components/ui/map";

export function ScaleControlExample() {
  return (
    <div className="h-[400px] w-full">
      <Map center={[121.4737, 31.2304]} zoom={12}>
        <MapControls
          position="bottom-right"
          showZoom
          showCompass
          showScale
        />
      </Map>
    </div>
  );
}

PreviousMap NextMarkers