map-with-draw-control

PreviousNext
Docs
shadcn-mapexample

Preview

Loading preview…
registry/new-york-v4/examples/map-with-draw-control.tsx
import {
    Map,
    MapDrawCircle,
    MapDrawControl,
    MapDrawDelete,
    MapDrawEdit,
    MapDrawMarker,
    MapDrawPolygon,
    MapDrawPolyline,
    MapDrawRectangle,
    MapDrawUndo,
    MapTileLayer,
} from "@/registry/new-york-v4/ui/map"
import type { LatLngExpression } from "leaflet"

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

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <MapDrawControl>
                <MapDrawMarker />
                <MapDrawPolyline />
                <MapDrawCircle />
                <MapDrawRectangle />
                <MapDrawPolygon />
                <MapDrawEdit />
                <MapDrawDelete />
                <MapDrawUndo />
            </MapDrawControl>
        </Map>
    )
}

Installation

npx shadcn@latest add @shadcn-map/map-with-draw-control

Usage

import { MapWithDrawControl } from "@/components/map-with-draw-control"
<MapWithDrawControl />