React leaflet markercluster

React wrapper of Leaflet.markercluster for react-leaflet

Examples with the Documentation: https://yuzhva.github.io/react-leaflet-markercluster/
CodeSandbox Getting Started

Description

If you are faced with an issue with markers overlapping during map zooming, or they are overlapping because they are close to each other - you probably need to group them.
That is what you can do with react-leaflet-markercluster.

Just grab your markers inside <MarkerClusterGroup /> component, right after <TileLayer />:

1import MarkerClusterGroup from 'react-leaflet-markercluster';
2
3<MarkerClusterGroup>
4  <Marker position={[49.8397, 24.0297]} />
5  <Marker position={[52.2297, 21.0122]} />
6  <Marker position={[51.5074, -0.0901]} />
7</MarkerClusterGroup>;

Note: Before getting started, please see these useful guides:

• Leaflet Quick Start Guide.
• react-leaflet Installation.

Table of Contents

• Getting started
• API
• How to run DEV env
• Contributors ✨
• Contributing
• License

Getting started

1. Install package:

1yarn add react-leaflet-markercluster@next # yarn
2npm install react-leaflet-markercluster # npm

NOTE: the @next is required for react-leaflet v3 support. If you are still using react-leaflet v3, add dependency as react-leaflet-markercluster@^2.x.x

The react-leaflet-markercluster requires leaflet.markercluster as peerDependency

(Leaflet and react-leaflet also should be installed)

1yarn add leaflet.markercluster leaflet react-leaflet # yarn
2npm install leaflet.markercluster leaflet react-leaflet # npm

2. Import markercluster and leaflet styles:

1@import '~leaflet/dist/leaflet.css'; // sass
2@import '~react-leaflet-markercluster/dist/styles.min.css'; // sass
3
4require('~leaflet/dist/leaflet.css'); // inside .js file
5require('react-leaflet-markercluster/dist/styles.min.css'); // inside .js file

Or include CSS styles directly to the head of HTML file:

1<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
2
3<link
4  rel="stylesheet"
5  href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
6/>

3. Write some simple react-leaflet Map:

1import { MapContainer, TileLayer, Marker } from 'react-leaflet';
2
3<MapContainer
4  className="markercluster-map"
5  center={[51.0, 19.0]}
6  zoom={4}
7  maxZoom={18}
8>
9  <TileLayer
10    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
11    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
12  />
13
14  <Marker position={[49.8397, 24.0297]} />
15  <Marker position={[52.2297, 21.0122]} />
16  <Marker position={[51.5074, -0.0901]} />
17</MapContainer>;

NOTE: Remember to add map styles .markercluster-map { height: 90vh; }.

4. Just grab your markers inside <MarkerClusterGroup /> component, right after <TileLayer />:

1import MarkerClusterGroup from 'react-leaflet-markercluster';
2
3<MarkerClusterGroup>
4  <Marker position={[49.8397, 24.0297]} />
5  <Marker position={[52.2297, 21.0122]} />
6  <Marker position={[51.5074, -0.0901]} />
7</MarkerClusterGroup>;

More examples with the Documentation
CodeSandbox Getting Started

API

Just pass whatever option you need from All Leaflet.markercluster Options to MarkerClusterGroup as prop.

For example:

1<MarkerClusterGroup showCoverageOnHover={false} />

or:

1const createClusterCustomIcon = function (cluster) {
2  return L.divIcon({
3    html: `<span>${cluster.getChildCount()}</span>`,
4    className: 'marker-cluster-custom',
5    iconSize: L.point(40, 40, true),
6  });
7}
8
9<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} />

P.S: Examples for v1 are available at CHANGELOG.md

Event listeners

You are able to add any listener, supported by Leaflet, with simple on property prefix.

How to run DEV env

1. Clone the repo:

1git clone https://github.com/YUzhva/react-leaflet-markercluster.git

2. Install all dependencies:

1yarn install --no-lockfile # yarn
2npm install # npm

3. Start the server:

1yarn dev # yarn
2npm run dev # npm

4. After starting the server, storybook should automatically open the following address:

http://localhost:8080/

Contributors ✨

Thanks goes to these wonderful people: Avatars rendered by contributors-img.

Special thanks to:

• @webcarrot for react-leaflet v2 support
• @CodeCutterUK for react-leaflet v3 support

Contributing

All sources are placed in the ./src folder:

1. Fork the repo.

2. Edit react-leaflet-markercluster.js plugin or style.scss style files.

3. Commit your changes and open Pull Request.

:beer: Thank you for contribution :beer:

UMD

UMD builds are available on unpkg:

1<!-- unpkg, production code (minified) -->
2<script src="https://unpkg.com/react-leaflet-markercluster/dist/index.js"></script>
3<!-- unpkg, development code -->
4<script src="https://unpkg.com/react-leaflet-markercluster/src/react-leaflet-markercluster.js"></script>
5
6<!-- unpkg, production styles (minified) -->
7<link
8  rel="stylesheet"
9  type="text/css"
10  href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
11/>
12<!-- unpkg, development styles -->
13<link
14  rel="stylesheet"
15  type="text/css"
16  href="https://unpkg.com/react-leaflet-markercluster/src/styles.scss"
17/>

License

MIT License, see LICENSE file.