Custom Control Positon

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 className="top-auto right-1 bottom-1 left-auto" />
            <MapLocateControl className="top-1" />
        </Map>
    )
}

Flexible Control Layout

By default, all map control components have predefined positions. You can override these defaults using CSS to place the controls anywhere on the map.

import {
    Map,
    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>
            <MapLocateControl className="bottom-20" />
        </Map>
    )
}

Draw Control

On This Page

Flexible Control Layout