Introduction
Getting Started
React-leaflet-cluster is a plugin for react-leaflet. A wrapper component of Leaflet.markercluster. Ready to be integrated into your React.js application to create beautifully animated Marker Clustering functionality.
You can customize shapes of clusters.

Installation

1
yarn add react-leaflet-cluster
Copied!
Or with npm:
1
npm i react-leaflet-cluster
Copied!
Make sure that you've installed react-leaflet and leaflet.

Prerequisites

1
"react": "16.x",
2
"leaflet": "1.7.x",
3
"react-leaflet": "3.0.x"
Copied!

Setting up your project

1
import MarkerClusterGroup from 'react-leaflet-cluster'
2
import {MapContainer, Marker } from 'react-leaflet'
3
import 'leaflet/dist/leaflet.css'
4
import {addressPoints} from './realworld'
5
6
const Demo = () => {
7
return (
8
<MapContainer
9
style={{height: '500px'}}
10
center={[38.9637, 35.2433]}
11
zoom={6}
12
scrollWheelZoom={true}
13
>
14
<MarkerClusterGroup
15
chunkedLoading
16
>
17
{(addressPoints as AdressPoint).map((address, index) => (
18
<Marker
19
key={index}
20
position={[address[0], address[1]]}
21
title={address[2]}
22
icon={customIcon}
23
></Marker>
24
))}
25
</MarkerClusterGroup>
26
</MapContainer>
27
)
28
}
Copied!
Last modified 9mo ago