Shadcn Map

https://shadcn-map.vercel.app/docs
Admin
A map component built for shadcn/ui, following the same design patterns and styles, providing...
Tokens:16,642
Snippets:90
Trust Score:7.8
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install shadcn-map with npm, yarn, or pnpm

Source: https://shadcn-map.vercel.app/docs/index

Instructions for installing the shadcn-map package using different package managers. This command adds the necessary components to your project.

```bash
pnpm dlx shadcn@latest add @shadcn-map/map
```

--------------------------------

### Display Popups and Tooltips on Map Markers and Shapes (React/TypeScript)

Source: https://shadcn-map.vercel.app/docs/examples/popup-and-tooltip

This code snippet shows how to attach popups to markers and polygons, and tooltips to markers, using React components from '@/components/ui/map'. It requires 'leaflet' for type definitions. The example includes city data for popups and tooltips, and defines boundaries for a polygon, rendering interactive map elements.

```jsx
import {
    Map,
    MapMarker,
    MapPolygon,
    MapPopup,
    MapTileLayer,
    MapTooltip,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithPopupAndTooltip() {
    const POPUP_CITIES = [
        {
            name: "Toronto",
            coordinates: [43.6532, -79.3832] satisfies LatLngExpression,
        },
        {
            name: "Port Elizabeth",
            coordinates: [-33.9137, 25.5827] satisfies LatLngExpression,
        },
    ]
    const TOOLTIP_CITIES = [
        {
            name: "Hong Kong",
            coordinates: [22.3193, 114.1694] satisfies LatLngExpression,
        },
        {
            name: "Pattaya",
            coordinates: [12.9236, 100.8825] satisfies LatLngExpression,
        },
    ]
    const SOUTH_AMERICA_BOUNDS = [
        [12.5, -81.7],
        [12.5, -34.8],
        [-55.0, -34.8],
        [-55.0, -81.7],
    ] satisfies LatLngExpression[]

    return (
        <Map center={POPUP_CITIES[1].coordinates} zoom={1}>
            <MapTileLayer />
            {POPUP_CITIES.map((city) => (
                <MapMarker key={city.name} position={city.coordinates}>
                    <MapPopup className="w-56">Say hi to {city.name}!</MapPopup>
                </MapMarker>
            ))}
            {TOOLTIP_CITIES.map((city) => (
                <MapMarker key={city.name} position={city.coordinates}>
                    <MapTooltip side="bottom">
                        Say hi to {city.name}!
                    </MapTooltip>
                </MapMarker>
            ))}
            <MapPolygon positions={SOUTH_AMERICA_BOUNDS}>
                <MapPopup className="w-56">Say hi to South America!</MapPopup>
            </MapPolygon>
        </Map>
    )
}

```

--------------------------------

### Install @types/node for TypeScript Projects

Source: https://shadcn-map.vercel.app/docs/usage-without-nextjs

This command installs the `@types/node` package as a development dependency, which is necessary to resolve TypeScript errors related to Node.js types in non-Next.js React projects using shadcn Map.

```bash
pnpm add -D @types/node
```

--------------------------------

### Basic Marker Cluster Group with shadcn-map

Source: https://shadcn-map.vercel.app/docs/examples/marker-cluster-group

Demonstrates how to implement a basic marker cluster group using the shadcn-map library. It includes importing necessary components and rendering multiple markers that are automatically grouped at different zoom levels. This example requires the shadcn-ui map components and Leaflet's LatLngExpression type.

```typescript
import {
    Map,
    MapMarker,
    MapMarkerClusterGroup,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithMarkerClusterGroup() {
    const TORONTO_COORDINATES = [43.6532, -79.3832] satisfies LatLngExpression
    const CLUSTER_POINTS = [
        { position: [43.6632, -79.3832] },
        { position: [43.6642, -79.3842] },
        { position: [43.6622, -79.3852] },
        { position: [43.6652, -79.3822] },
        { position: [43.6612, -79.3812] },
        { position: [43.6432, -79.3932] },
        { position: [43.6442, -79.3942] },
        { position: [43.6422, -79.3952] },
    ] satisfies { position: LatLngExpression }[]

    return (
        <Map center={TORONTO_COORDINATES} zoom={12}>
            <MapTileLayer />
            <MapMarkerClusterGroup>
                {CLUSTER_POINTS.map((point, i) => (
                    <MapMarker key={i} position={point.position} />
                ))}
            </MapMarkerClusterGroup>
        </Map>
    )
}

```

--------------------------------

### Implement Map Layers Control with TypeScript

Source: https://shadcn-map.vercel.app/docs/examples/layers-control

This example demonstrates how to set up a map with a layers control using shadcn-map components. It defines various places categorized into groups (Water, Mountains, Safari), each with specific coordinates and icons. The MapLayers component is used to manage these groups, and MapLayersControl allows users to toggle their visibility. It also includes a base MapTileLayer and an alternative 'No Labels' tile layer.

```typescript
import {
    Map,
    MapLayerGroup,
    MapLayers,
    MapLayersControl,
    MapMarker,
    MapPopup,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"
import { DropletIcon, MountainIcon, PawPrintIcon } from "lucide-react"

export function MapWithLayersControl() {
    const PLACES = [
        {
            name: "Water",
            places: [
                {
                    name: "Victoria Falls",
                    coordinates: [-17.9243, 25.856] satisfies LatLngExpression,
                    icon: <DropletIcon />,
                },
                {
                    name: "Lake Malawi",
                    coordinates: [-12.1333, 34.5667] satisfies LatLngExpression,
                    icon: <DropletIcon />,
                },
                {
                    name: "Orange River",
                    coordinates: [-28.6327, 16.4522] satisfies LatLngExpression,
                    icon: <DropletIcon />,
                },
            ],
        },
        {
            name: "Mountains",
            places: [
                {
                    name: "Table Mountain",
                    coordinates: [-33.9628, 18.4098] satisfies LatLngExpression,
                    icon: <MountainIcon />,
                },
                {
                    name: "Mount Kenya",
                    coordinates: [-0.1521, 37.3084] satisfies LatLngExpression,
                    icon: <MountainIcon />,
                },
                {
                    name: "Kilimanjaro",
                    coordinates: [-3.0674, 37.3556] satisfies LatLngExpression,
                    icon: <MountainIcon />,
                },
            ],
        },
        {
            name: "Safari",
            places: [
                {
                    name: "Etosha National Park",
                    coordinates: [-18.7852, 16.2638] satisfies LatLngExpression,
                    icon: <PawPrintIcon />,
                },
                {
                    name: "Serengeti",
                    coordinates: [-2.3333, 34.8333] satisfies LatLngExpression,
                    icon: <PawPrintIcon />,
                },
                {
                    name: "Kruger National Park",
                    coordinates: [-23.9884, 31.5547] satisfies LatLngExpression,
                    icon: <PawPrintIcon />,
                },
            ],
        },
    ]

    return (
        <Map center={PLACES[0].places[0].coordinates} zoom={3}>
            <MapLayers defaultLayerGroups={PLACES.map((place) => place.name)}>
                <MapLayersControl />
                <MapTileLayer />
                <MapTileLayer
                    name="No Labels"
                    url="https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png"
                    darkUrl="https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png"
                />
                {PLACES.map((placesGroup) => (
                    <MapLayerGroup
                        key={placesGroup.name}
                        name={placesGroup.name}>
                        {placesGroup.places.map((place) => (
                            <MapMarker
                                key={place.name}
                                position={place.coordinates}
                                icon={place.icon}>
                                <MapPopup className="w-44">
                                    {place.name}
                                </MapPopup>
                            </MapMarker>
                        ))}
                    </MapLayerGroup>
                ))}
            </MapLayers>
        </Map>
    )
}

```

--------------------------------

### Load Custom Map Tiles with React

Source: https://shadcn-map.vercel.app/docs/examples/custom-tile

This React component utilizes the shadcn-map library to display a map with custom tile layers. It specifies the tile server URL and attribution information. This is useful for integrating with providers like Esri or your own tile infrastructure.

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

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

    return (
        <Map center={TORONTO_COORDINATES} zoom={2}>
            <MapTileLayer
                url="https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}"
                attribution="Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC"
            />
        </Map>
    )
}

```

--------------------------------

### Display Custom Markers with React Nodes using shadcn-map

Source: https://shadcn-map.vercel.app/docs/examples/custom-marker

This code snippet demonstrates how to create and display custom markers on a map using shadcn-map. It defines an array of places, each with coordinates and an optional custom icon (React node or Image). The MapMarker component is then used to render these custom markers at their respective positions. Dependencies include shadcn-ui map components and lucide-react for icons.

```typescript
import { Map, MapMarker, MapTileLayer } from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"
import { BrushIcon } from "lucide-react"
import Image from "next/image"

export function MapWithCustomMarkers() {
    const PLACES = [
        {
            name: "Matterhorn",
            coordinates: [45.9763, 7.6586] satisfies LatLngExpression,
            icon: <span className="text-sm">🏔️</span>,
        },
        {
            name: "Piazzale Michelangelo",
            coordinates: [43.7629, 11.2658] satisfies LatLngExpression,
            icon: <BrushIcon />,
        },
        {
            name: "Eiffel Tower",
            coordinates: [48.8584, 2.2945] satisfies LatLngExpression,
        },
        {
            name: "Colosseum",
            coordinates: [41.8902, 12.4922] satisfies LatLngExpression,
            icon: <Image alt="cat" src="/cat.png" width={16} height={16} />,
        },
    ]

    return (
        <Map center={PLACES[0].coordinates} zoom={5}>
            <MapTileLayer />
            {PLACES.map((place) => (
                <MapMarker
                    key={place.name}
                    position={place.coordinates}
                    icon={place.icon}
                />
            ))}
        </Map>
    )
}

```

--------------------------------

### Add a Polygon to a Map with shadcn-map

Source: https://shadcn-map.vercel.app/docs/examples/shapes

Demonstrates how to draw a polygon on a map using the MapPolygon component. It takes an array of LatLngExpression points to define the polygon's vertices. The MapTileLayer is included for context.

```typescript
import { Map, MapPolygon, MapTileLayer } from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithPolygon() {
    const BOUNDS = [
        [43.65, -79.387],
        [43.657, -79.38],
        [43.649, -79.379],
    ] satisfies LatLngExpression[]

    return (
        <Map center={BOUNDS[0]} zoom={14}>
            <MapTileLayer />
            <MapPolygon positions={BOUNDS} />
        </Map>
    )
}
```

--------------------------------

### Map Search Control with Place Selection Handling

Source: https://shadcn-map.vercel.app/docs/examples/search-control

Illustrates how to use the `onPlaceSelect` callback to handle user place selections. This example shows panning the map to the selected location and adding a marker, requiring a client-side wrapper component due to `useMap`.

```tsx
"use client"

import {
    Map,
    MapMarker,
    MapSearchControl,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"
import { MapPinIcon } from "lucide-react"
import React from "react"
import { useMap } from "react-leaflet"

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

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <MapSearchControlWrapper />
        </Map>
    )
}

function MapSearchControlWrapper() {
    const map = useMap()
    const [selectedPosition, setSelectedPosition] =
        React.useState<LatLngExpression | null>(null)

    React.useEffect(() => {
        if (!selectedPosition) return
        map.panTo(selectedPosition)
    }, [selectedPosition])

    return (
        <>
            <MapSearchControl
                onPlaceSelect={(feature) =>
                    setSelectedPosition(
                        feature.geometry.coordinates.toReversed() as LatLngExpression
                    )
                }
            />
            {selectedPosition && (
                <MapMarker position={selectedPosition} icon={<MapPinIcon />} />
            )}
        </>
    )
}
```

--------------------------------

### Render Basic Map with shadcn-map

Source: https://shadcn-map.vercel.app/docs/examples

This code snippet illustrates how to initialize a basic map component using shadcn-map. It requires the Map and MapTileLayer components from '@/components/ui/map' and depends on the Leaflet library for type definitions. The map is centered on Toronto coordinates.

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

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

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
        </Map>
    )
}
```

--------------------------------

### Map Search Control with Search Results Handling

Source: https://shadcn-map.vercel.app/docs/examples/search-control

Shows how to utilize the `onResultsChange` callback to access search results. This example displays markers on the map for each search result returned.

```tsx
"use client"

import {
    Map,
    MapMarker,
    MapSearchControl,
    MapTileLayer,
} from "@/components/ui/map"
import type { PlaceFeature } from "@/components/ui/place-autocomplete"
import type { LatLngExpression } from "leaflet"
import { MapPinIcon } from "lucide-react"
import React from "react"

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

    const [searchResults, setSearchResults] = React.useState<PlaceFeature[]>([])

    return (
        <Map center={TORONTO_COORDINATES} zoom={2}>
            <MapTileLayer />
            <MapSearchControl
                onResultsChange={(results) => setSearchResults(results)}
            />
            {searchResults.map((result) => (
                <MapMarker
                    key={result.properties.osm_id}
                    position={
                        result.geometry.coordinates.toReversed() as LatLngExpression
                    }
                    icon={<MapPinIcon />} 
                />
            ))}
        </Map>
    )
}
```

--------------------------------

### Add a Circle Marker to a Map with shadcn-map

Source: https://shadcn-map.vercel.app/docs/examples/shapes

Shows how to implement a circle marker on a map using the MapCircleMarker component. This component takes center coordinates and a radius, similar to MapCircle, but renders a distinct marker type. Requires Leaflet's LatLngExpression.

```typescript
import {
    Map,
    MapCircleMarker,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

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

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <MapCircleMarker center={TORONTO_COORDINATES} radius={60} />
        </Map>
    )
}
```

--------------------------------

### Complex Custom Control Layout with CSS

Source: https://shadcn-map.vercel.app/docs/examples/custom-control-position

This example demonstrates a more complex layout for map controls, including drawing tools. It shows how to group controls within a `div` and use absolute positioning along with predefined control positions to create a custom arrangement on the map.

```jsx
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 className="top-20 right-1 left-auto">
                <MapDrawCircle />
                <MapDrawEdit />
                <MapDrawUndo />
            </MapDrawControl>
        </Map>
    )
}
```

--------------------------------

### Control Feature Groups with MapFeatureGroup in React

Source: https://shadcn-map.vercel.app/docs/examples/layers-control

This React component demonstrates the usage of MapFeatureGroup for organizing and controlling map features. It utilizes components from '@/components/ui/map' and 'lucide-react' for icons. The example shows how to create a map with multiple feature groups, each containing markers, and allows for interaction through click event handlers.

```jsx
"use client"

import {
    Map,
    MapFeatureGroup,
    MapLayers,
    MapLayersControl,
    MapMarker,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"
import { PawPrintIcon } from "lucide-react"

export function MapWithFeatureGroupsControl() {
    const PLACES = [
        {
            name: "Etosha National Park",
            coordinates: [-18.7852, 16.2638] satisfies LatLngExpression,
            icon: <PawPrintIcon />,
        },
        {
            name: "Serengeti",
            coordinates: [-2.3333, 34.8333] satisfies LatLngExpression,
            icon: <PawPrintIcon />,
        },
        {
            name: "Kruger National Park",
            coordinates: [-23.9884, 31.5547] satisfies LatLngExpression,
            icon: <PawPrintIcon />,
        },
    ]

    return (
        <Map center={PLACES[0].coordinates} zoom={3}>
            <MapTileLayer />
            <MapLayers defaultLayerGroups={PLACES.map((place) => place.name)}>
                <MapLayersControl layerGroupsLabel="Safari" />
                {PLACES.map((place) => (
                    <MapFeatureGroup
                        key={place.name}
                        name={place.name}
                        eventHandlers={{
                            click: () =>
                                console.log("One handler rule them all!"),
                        }}>
                        <MapMarker
                            key={place.name}
                            position={place.coordinates}
                            icon={place.icon}
                        />
                    </MapFeatureGroup>
                ))}
            </MapLayers>
        </Map>
    )
}


```

--------------------------------

### Map with Locate Control and Callbacks (React)

Source: https://shadcn-map.vercel.app/docs/examples/locate-control

This example shows how to implement optional callbacks for the Locate Control component in a React application. It utilizes `useState` to store the user's found coordinates and `sonner` for displaying error messages. The `onLocationFound` callback updates the state with the new coordinates, and `onLocationError` shows a toast notification. The `watch` prop is enabled to continuously track the user's location.

```jsx
"use client"

import {
    Map,
    MapLocateControl,
    MapPopup,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"
import { useState } from "react"
import { toast } from "sonner"

export function MapWithLocateControlCallbacks() {
    const TORONTO_COORDINATES = [43.6532, -79.3832] satisfies LatLngExpression
    const [myCoordinates, setMyCoordinates] = useState<LatLngExpression | null>(
        null
    )

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <MapLocateControl
                onLocationFound={(location) =>
                    setMyCoordinates(location.latlng)
                }
                onLocationError={(error) => toast.error(error.message)}
                watch
            />
            {myCoordinates && (
                <MapPopup
                    position={myCoordinates}
                    offset={[0, -5]}
                    className="w-56">
                    {myCoordinates.toString()}
                </MapPopup>
            )}
        </Map>
    )
}
```

--------------------------------

### Add a Polyline to a Map with shadcn-map

Source: https://shadcn-map.vercel.app/docs/examples/shapes

Illustrates adding a polyline to a map using the MapPolyline component. This requires an array of LatLngExpression points to define the line's path. The MapTileLayer is essential for map visualization.

```typescript
import { Map, MapPolyline, MapTileLayer } from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithPolyline() {
    const POINTS = [
        [43.6532, -79.3832],
        [43.6545, -79.38],
    ] satisfies LatLngExpression[]

    return (
        <Map center={POINTS[0]}>
            <MapTileLayer />
            <MapPolyline positions={POINTS} />
        </Map>
    )
}
```

--------------------------------

### Style Map Shapes with shadcn-map

Source: https://shadcn-map.vercel.app/docs/examples/shapes

Demonstrates custom styling for map shapes like rectangles and circles using the 'className' prop. This allows for direct Tailwind CSS integration to control fill, stroke, and stroke width of the shapes. Includes MapTileLayer for context.

```typescript
import {
    Map,
    MapCircle,
    MapRectangle,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngBoundsExpression, LatLngExpression } from "leaflet"

export function MapWithStyledShapes() {
    const BOUNDS = [
        [43.65, -79.387],
        [43.6565, -79.379],
    ] satisfies LatLngBoundsExpression
    const CIRCLE_COORDINATES = [43.658, -79.388] satisfies LatLngExpression

    return (
        <Map center={BOUNDS[0]} zoom={14}>
            <MapTileLayer />
            <MapRectangle
                bounds={BOUNDS}
                className="fill-destructive stroke-destructive stroke-1"
            />
            <MapCircle
                center={CIRCLE_COORDINATES}
                radius={300}
                className="fill-yellow-600 stroke-yellow-600 stroke-1"
            />
        </Map>
    )
}
```

--------------------------------

### Add a Circle to a Map with shadcn-map

Source: https://shadcn-map.vercel.app/docs/examples/shapes

Demonstrates how to add a circular shape to a map using the MapCircle component. It requires center coordinates and a radius, utilizing Leaflet's LatLngExpression type. The MapTileLayer is included for map background.

```typescript
import { Map, MapCircle, MapTileLayer } from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

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

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <MapCircle center={TORONTO_COORDINATES} radius={200} />
        </Map>
    )
}
```

--------------------------------

### Add a Rectangle to a Map with shadcn-map

Source: https://shadcn-map.vercel.app/docs/examples/shapes

Shows how to add a rectangular shape to a map using the MapRectangle component. This requires bounds defined by two corner points, using Leaflet's LatLngBoundsExpression. MapTileLayer provides the map background.

```typescript
import { Map, MapRectangle, MapTileLayer } from "@/components/ui/map"
import type { LatLngBoundsExpression } from "leaflet"

export function MapWithRectangle() {
    const BOUNDS = [
        [43.65, -79.387],
        [43.6565, -79.379],
    ] satisfies LatLngBoundsExpression

    return (
        <Map center={BOUNDS[0]} zoom={14}>
            <MapTileLayer />
            <MapRectangle bounds={BOUNDS} />
        </Map>
    )
}
```

--------------------------------

### Control Tile Layers in a Map

Source: https://shadcn-map.vercel.app/docs/examples/layers-control

Allows switching between multiple tile layers by wrapping MapTileLayer components within a MapLayers container and using MapLayersControl for UI. A default tile layer can be set using a simple MapTileLayer without props.

```typescript
import {
    Map,
    MapLayers,
    MapLayersControl,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

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

    return (
        <Map center={TORONTO_COORDINATES} zoom={3}>
            <MapLayers defaultTileLayer="National Geographic">
                <MapLayersControl />
                <MapTileLayer />
                <MapTileLayer
                    name="National Geographic"
                    url="https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}"
                    attribution="Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC"
                />
                <MapTileLayer
                    name="Satellite"
                    url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
                    attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
                />
            </MapLayers>
        </Map>
    )
}
```

--------------------------------

### Custom Cluster Icon with shadcn-map Marker Cluster Group

Source: https://shadcn-map.vercel.app/docs/examples/marker-cluster-group

Shows how to customize the appearance of marker clusters by providing a custom icon component to the `MapMarkerClusterGroup`'s `icon` prop. This requires the component to be a client component and uses a function to render the cluster's marker count within a styled div.

```typescript
"use client"

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

export function MapWithCustomMarkerClusterGroup() {
    const TORONTO_COORDINATES = [43.6532, -79.3832] satisfies LatLngExpression
    const CLUSTER_POINTS = [
        { position: [43.6632, -79.3732] },
        { position: [43.6652, -79.3752] },
        { position: [43.6612, -79.3712] },
        { position: [43.6432, -79.3932] },
        { position: [43.6412, -79.3952] },
        { position: [43.6452, -79.3912] },
        { position: [43.6732, -79.4032] },
        { position: [43.6752, -79.4052] },
        { position: [43.6712, -79.4012] },
        { position: [43.6772, -79.4072] },
        { position: [43.6332, -79.3632] },
        { position: [43.6312, -79.3612] },
        { position: [43.6532, -79.3832] },
        { position: [43.6582, -79.3882] },
        { position: [43.6482, -79.3782] },
    ] satisfies { position: LatLngExpression }[]

    return (
        <Map center={TORONTO_COORDINATES} zoom={12}>
            <MapTileLayer />
            <MapMarkerClusterGroup
                showCoverageOnHover={false}
                icon={(markerCount) => (
                    <div className="bg-popover text-popover-foreground flex size-10 items-center justify-center rounded-full border font-semibold">
                        {markerCount}
                    </div>
                )}>
                {CLUSTER_POINTS.map((point, i) => (
                    <MapMarker key={i} position={point.position} />
                ))}
            </MapMarkerClusterGroup>
        </Map>
    )
}

```

--------------------------------

### Customize Map Control Positions with CSS

Source: https://shadcn-map.vercel.app/docs/examples/custom-control-position

This example shows how to use Tailwind CSS classes to reposition standard map controls such as zoom and locate. It utilizes the `className` prop on `MapZoomControl` and `MapLocateControl` to set their positions relative to the map container.

```jsx
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 bottom-auto" />
        </Map>
    )
}
```

--------------------------------

### Access Drawn Shapes Using onLayersChange Callback

Source: https://shadcn-map.vercel.app/docs/examples/draw-control

This example shows how to use the `onLayersChange` callback within `MapDrawControl` to retrieve and process drawn shapes. It logs the type and coordinates of each drawn layer (markers, polylines, circles, rectangles, polygons) and updates a `Badge` component with the current number of shapes. This requires the 'use client' directive and imports from 'leaflet' and '@components/ui/map'.

```typescript
"use client"

import { Badge } from "@/components/ui/badge"
import {
    Map,
    MapDrawCircle,
    MapDrawControl,
    MapDrawDelete,
    MapDrawEdit,
    MapDrawMarker,
    MapDrawPolygon,
    MapDrawPolyline,
    MapDrawRectangle,
    MapDrawUndo,
    MapTileLayer,
    useLeaflet,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"
import { useState } from "react"

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

    const { L } = useLeaflet()
    const [numberOfShapes, setNumberOfShapes] = useState(0)

    return L ? (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <MapDrawControl
                onLayersChange={(layers) => {
                    setNumberOfShapes(layers.getLayers().length)
                    layers.eachLayer((layer) => {
                        if (layer instanceof L.Marker) {
                            console.log("Marker:", layer.getLatLng())
                        } else if (
                            layer instanceof L.Polyline &&
                            !(layer instanceof L.Polygon)
                        ) {
                            console.log("Polyline:", layer.getLatLngs())
                        } else if (layer instanceof L.Circle) {
                            console.log(
                                "Circle center:",
                                layer.getLatLng(),
                                "radius:",
                                layer.getRadius()
                            )
                        } else if (layer instanceof L.Rectangle) {
                            console.log("Rectangle bounds:", layer.getBounds())
                        } else if (layer instanceof L.Polygon) {
                            console.log("Polygon:", layer.getLatLngs())
                        }
                    })
                }}>
                <MapDrawMarker />
                <MapDrawPolyline />
                <MapDrawCircle />
                <MapDrawRectangle />
                <MapDrawPolygon />
                <MapDrawEdit />
                <MapDrawDelete />
                <MapDrawUndo />
            </MapDrawControl>
            <Badge className="absolute right-1 bottom-1 z-1000">
                Shapes: {numberOfShapes}
            </Badge>
        </Map>
    ) : null
}

```

--------------------------------

### Basic Map Usage with shadcn-map

Source: https://shadcn-map.vercel.app/docs/index

Demonstrates the basic usage of the Map component from shadcn-map. It includes importing necessary components and rendering a map with a tile layer, zoom control, and a marker with a popup.

```jsx
import {
    Map,
    MapMarker,
    MapPopup,
    MapTileLayer,
    MapZoomControl,
} from "@/components/ui/map"

<Map center={[43.6532, -79.3832]}>
    <MapTileLayer />
    <MapZoomControl />
    <MapMarker position={[43.6532, -79.3832]}>
        <MapPopup>A map component for shadcn/ui.</MapPopup>
    </MapMarker>
</Map>
```

--------------------------------

### MapTooltip Component API

Source: https://shadcn-map.vercel.app/docs/api

Renders a tooltip with default styling and animations matching the shadcn/ui design system.

```APIDOC
## MapTooltip

### Description
The `MapTooltip` component renders a tooltip. It provides default styling and animations that match the shadcn/ui design system.

### Method
Not applicable (Component)

### Endpoint
Not applicable (Component)

### Parameters
#### Props
- **side** ("top" | "right" | "bottom" | "left") - Optional - Controls the position of the tooltip relative to the target element. Defaults to `"top"`.
- **sideOffset** (number) - Optional - The distance between the tooltip and the target element. Defaults to `15`.
- **...props** (TooltipProps) - All props from React Leaflet Tooltip.

### Request Example
```jsx
<MapTooltip side="bottom" sideOffset={10}>
  <div>Tooltip Content</div>
</MapTooltip>
```

### Response
#### Success Response (200)
Component renders a map tooltip.

#### Response Example
Not applicable (Component render)
```

--------------------------------

### Map Container and Core Components

Source: https://shadcn-map.vercel.app/docs/api

Documentation for the core map components: Map, MapTileLayer, MapLayerGroup, MapFeatureGroup, MapLayers, and MapLayersControl.

```APIDOC
## Map

### Description
The `Map` component is the main map container. It wraps `react-leaflet`’s `MapContainer` and provides default styles.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **center** (LatLngExpression) - Required - The initial center of the map `[lat, lng]`.
- **other props** (Omit<MapContainerProps, "zoomControl">) - All other props from React Leaflet MapContainer, except `zoomControl`.

### Request Example
```jsx
<Map center={[51.505, -0.09]}>
  {/* Map content */}
</Map>
```

### Response
#### Success Response (200)
N/A (Component renders UI)

#### Response Example
N/A (Component renders UI)

---

## MapTileLayer

### Description
The `MapTileLayer` component adds a tile layer to the map. It is required for the map to be rendered. It automatically switches between light and dark map styles based on the current theme from `next-themes`. You can provide custom URLs and attributions for both light and dark modes.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **url** (string) - Optional - URL of the tile server for light mode. Defaults to Carto’s light tiles.
- **attribution** (string) - Optional - HTML string for map attribution in light mode. Defaults to OpenStreetMap and CARTO attribution.
- **darkUrl** (string) - Optional - URL of the tile server for dark mode. Defaults to Carto’s dark tiles.
- **darkAttribution** (string) - Optional - HTML string for map attribution in dark mode. Defaults to OpenStreetMap and CARTO attribution.
- **name** (string) - Optional - Name of the layer, only required when using multiple tile layers with `MapLayers`. Defaults to `Default`.
- **other props** (TileLayerProps) - All other props from React Leaflet TileLayer.

### Request Example
```jsx
<MapTileLayer
  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  attribution="&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
/>
```

### Response
#### Success Response (200)
N/A (Component renders UI)

#### Response Example
N/A (Component renders UI)

---

## MapLayerGroup

### Description
The `MapLayerGroup` component is for grouping multiple map layers, which is useful when you want to control their visibility by group. It has little effect if you only have one layer group or don’t need to toggle visibility.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **name** (string) - Required - A unique name for the layer group.
- **disabled** (boolean) - Optional - If `true`, the layer group’s checkbox in the layer control will be disabled, preventing users from toggling it.
- **other props** (LayerGroupProps) - All other props from React Leaflet LayerGroup.

### Request Example
```jsx
<MapLayerGroup name="My Group">
  {/* Layers to group */}
</MapLayerGroup>
```

### Response
#### Success Response (200)
N/A (Component renders UI)

#### Response Example
N/A (Component renders UI)

---

## MapFeatureGroup

### Description
The `MapFeatureGroup` component is similar to `MapLayerGroup`, but with a few extra capabilities. You can bind popups or tooltips to all child layers at once, and events on the group will automatically propagate to its child layers.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **name** (string) - Required - A unique name for the layer group.
- **disabled** (boolean) - Optional - If `true`, the layer group’s checkbox in the layer control will be disabled, preventing users from toggling it.
- **other props** (FeatureGroupProps) - All other props from React Leaflet FeatureGroup.

### Request Example
```jsx
<MapFeatureGroup name="Features">
  {/* Features to group */}
</MapFeatureGroup>
```

### Response
#### Success Response (200)
N/A (Component renders UI)

#### Response Example
N/A (Component renders UI)

---

## MapLayers

### Description
The `MapLayers` component provides a context for managing multiple tile layers and layer groups on the map. It is required when you want to use multiple tile layers or multiple layer groups together. Tile layers and layer groups can still be used on their own, but `MapLayers` is needed if you want to control visibility via the `MapLayersControl` component.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **defaultTileLayer** (string) - Optional - The name of the tile layer to select by default. Must match the `name` prop of a `MapTileLayer`.
- **defaultLayerGroups** (string[]) - Optional - Names of the layer groups to activate by default. Must match the `name` prop of a `MapLayerGroup`.
- **other props** (Omit<ProviderProps, "value">) - All props from the context provider, except `value`.

### Request Example
```jsx
<MapLayers defaultTileLayer="Dark Mode">
  <MapTileLayer name="Light Mode" url="..." />
  <MapTileLayer name="Dark Mode" darkUrl="..." />
  <MapLayerGroup name="Group 1">
    {/* Layers */}
  </MapLayerGroup>
</MapLayers>
```

### Response
#### Success Response (200)
N/A (Component renders UI)

#### Response Example
N/A (Component renders UI)

---

## MapLayersControl

### Description
The `MapLayersControl` component renders a UI for selecting the active tile layer and toggling layer groups. It must be used inside a `MapLayers` component and is only visible if there are multiple tile layers or layer groups registered.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **tileLayersLabel** (string) - Optional - Custom label for the tile layers section in the dropdown menu. Defaults to `Map Type`.
- **layerGroupsLabel** (string) - Optional - Custom label for the layer groups section in the dropdown menu. Defaults to `Layers`.
- **other props** (React.ComponentProps<"button">) - All props for the control button element.

### Request Example
```jsx
<MapLayers>
  {/* TileLayers and LayerGroups */}
  <MapLayersControl />
</MapLayers>
```

### Response
#### Success Response (200)
N/A (Component renders UI)

#### Response Example
N/A (Component renders UI)

```

--------------------------------

### Control Layer Groups in a Map

Source: https://shadcn-map.vercel.app/docs/examples/layers-control

Enables showing or hiding related markers or features by grouping them in MapLayerGroup components within a MapLayers container. The MapLayersControl provides UI for toggling visibility, and defaultLayerGroups prop specifies initially visible groups.

```typescript
import {
    Map,
    MapLayerGroup,
    MapLayers,
    MapLayersControl,
    MapMarker,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"
import { PawPrintIcon } from "lucide-react"

export function MapWithLayerGroupsControl() {
    const PLACES = [
        {
            name: "Etosha National Park",
            coordinates: [-18.7852, 16.2638] satisfies LatLngExpression,
            icon: <PawPrintIcon />,
        },
        {
            name: "Serengeti",
            coordinates: [-2.3333, 34.8333] satisfies LatLngExpression,
            icon: <PawPrintIcon />,
        },
        {
            name: "Kruger National Park",
            coordinates: [-23.9884, 31.5547] satisfies LatLngExpression,
            icon: <PawPrintIcon />,
        },
    ]

    return (
        <Map center={PLACES[0].coordinates} zoom={3}>
            <MapTileLayer />
            <MapLayers defaultLayerGroups={PLACES.map((place) => place.name)}>
                <MapLayersControl layerGroupsLabel="Safari" />
                {PLACES.map((place) => (
                    <MapLayerGroup key={place.name} name={place.name}>
                        <MapMarker
                            key={place.name}
                            position={place.coordinates}
                            icon={place.icon}
                        />
                    </MapLayerGroup>
                ))}
            </MapLayers>
        </Map>
    )
}
```

--------------------------------

### Configuring Map Search Control Properties

Source: https://shadcn-map.vercel.app/docs/examples/search-control

Demonstrates how to configure the MapSearchControl using props inherited from Shadcn Place Autocomplete, such as setting the result limit and preferred language.

```tsx
import {
    Map,
    MapSearchControl,
    MapTileLayer,
} from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

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

    return (
        <Map center={TORONTO_COORDINATES} zoom={2}>
            <MapTileLayer />
            <MapSearchControl limit={10} lang="en" />
        </Map>
    )
}
```

--------------------------------

### Basic Map with Locate Control (React)

Source: https://shadcn-map.vercel.app/docs/examples/locate-control

This snippet demonstrates how to add a basic locate control to a map component using React. It imports necessary components from '@/components/ui/map' and sets a default center for the map. The locate control, when clicked, will attempt to find and center the map on the user's current location.

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

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

    return (
        <Map center={TORONTO_COORDINATES}>
            <MapTileLayer />
            <MapLocateControl />
        </Map>
    )
}
```

--------------------------------

### MapPopup Component API

Source: https://shadcn-map.vercel.app/docs/api

Renders a popup with default styling and animations matching the shadcn/ui design system.

```APIDOC
## MapPopup

### Description
The `MapPopup` component renders a popup. It provides default styling and animations that match the shadcn/ui design system.

### Method
Not applicable (Component)

### Endpoint
Not applicable (Component)

### Parameters
#### Props
- **...props** (Omit<PopupProps, "content">) - All props from React Leaflet Popup, except `content`.

### Request Example
```jsx
<MapPopup>
  <div>Popup Content</div>
</MapPopup>
```

### Response
#### Success Response (200)
Component renders a map popup.

#### Response Example
Not applicable (Component render)
```

--------------------------------

### MapPolyline Component API

Source: https://shadcn-map.vercel.app/docs/api

Renders a polyline on the map.

```APIDOC
## MapPolyline

### Description
The `MapPolyline` component renders a polyline on the map.

### Method
Not applicable (Component)

### Endpoint
Not applicable (Component)

### Parameters
#### Props
- **...props** (PolylineProps) - All props from React Leaflet Polyline.

### Request Example
```jsx
<MapPolyline positions={[[51.505, -0.09], [51.51, -0.1]]} />
```

### Response
#### Success Response (200)
Component renders a map polyline.

#### Response Example
Not applicable (Component render)
```
Tokens:
Raw