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>
)
}
Custom Cluster Icon
You can customize the cluster icon by providing a icon prop to the MapMarkerClusterGroup component. This prop accepts a function that receives the markerCount.
Since you are passing a function as a prop, your component must be a client component by adding "use client" at the top of your file.
"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>
)
}
On This Page
Custom Cluster Icon