Custom Control Position

Use CSS to customize the position of map controls.

import {
    Map,
    MapLocateControl,
    MapTileLayer,
    MapZoomControl,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithCustomControlPosition() {
    const TORONTO_COORDINATES = [43.6532, -79.3832] satisfies LatLngExpression

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <MapZoomControl position="right-1 bottom-1" />
            <MapLocateControl position="top-1 left-1" />
        </Map>
    )
}

Flexible Control Layout

By default, all map control components have predefined positions. You can pass an optional position prop to the control to override these defaults. This allows you to use CSS to place the controls anywhere on the map.

import {
    Map,
    MapDrawCircle,
    MapDrawControl,
    MapDrawEdit,
    MapDrawUndo,
    MapLocateControl,
    MapTileLayer,
    MapZoomControl,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithComplexCustomControlPosition() {
    const TORONTO_COORDINATES = [43.6532, -79.3832] satisfies LatLngExpression

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <div className="absolute top-1 left-1 z-1000 grid gap-1">
                <MapZoomControl className="static" />
                <MapLocateControl className="static" />
            </div>
            <MapDrawControl position="top-20 right-1">
                <MapDrawCircle />
                <MapDrawEdit />
                <MapDrawUndo />
            </MapDrawControl>
        </Map>
    )
}

Draw Control Custom Control Container

On This Page

Flexible Control Layout