React wrapper of Leaflet.markercluster for react-laeflet
Last updated 5 months ago by yuzhva .
MIT · Repository · Bugs · Original npm · Tarball
$ cnpm install react-leaflet-markercluster 
SYNC missed versions from official npm registry.

React leaflet markercluster

npm Code Climate npm license

React wrapper of Leaflet.markercluster for react-leaflet

DEMO with examples:


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.

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

Table of Contents

Getting started

1. Install package:

yarn add react-leaflet-markercluster # yarn
npm install react-leaflet-markercluster # npm

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

(Leaflet, react-leaflet, PropTypes also should be installed)

yarn add leaflet.markercluster leaflet react-leaflet prop-types # yarn
npm install leaflet.markercluster leaflet react-leaflet prop-types # npm

2. Import Markercluster styles:

@import '~react-leaflet-markercluster/dist/styles.min.css'; // sass
@import url('~react-leaflet-markercluster/dist/styles.min.css'); // css

require('react-leaflet-markercluster/dist/styles.min.css'); // inside .js file

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

<link rel="stylesheet" href="" />

3. Write some simple react-leaflet Map:

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
    attribution='&copy; <a href="">OpenStreetMap</a> contributors'

  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />


4. Import package to your component:

import MarkerClusterGroup from 'react-leaflet-markercluster';

5. Just grab your markers inside <MarkerClusterGroup /> component (right after <TileLayer />):

  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />

Check demo for more examples.


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

For example:

<MarkerClusterGroup showCoverageOnHover={false} />


const createClusterCustomIcon = function (cluster) {
  return L.divIcon({
    html: `<span>${cluster.getChildCount()}</span>`,
    className: 'marker-cluster-custom',
    iconSize: L.point(40, 40, true),

<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} />

P.S: old examples are available at

Event listeners:

  • onMarkerClick: function
  • onClusterClick: function
  • onPopupClose: function

Deprecated since v1.1.8 API:

  • markers: array of objects

    keys for marker object, that will be placed in markers array:

    • position: array | object Leaflet.LatLng (required)
    • options: object All available options for Leaflet.Marker.
      • NOTE: Personal marker.options overwriting defined markerOptions for all markers.
    • popup: Leaflet.Popup | string | HTMLElement
    • tooltip: Leaflet.Tooltip | string | HTMLElement

Refs. Accessing markerClusterGroup Leaflet element:

  ref={(markerClusterGroup) => {
    this.markerClusterGroup = markerClusterGroup.leafletElement;

How to run demo app

1. Clone our repo:

git clone

2. Install all dependencies:

yarn install --no-lockfile # yarn
npm install # npm

3. Start the server:

npm run start

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



All sources are placed in the ./src folder:

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

2. Compile source code with next command:

npm run build:source

Don't contribute directly to ./dist folder. Distributions should be updated after running build:source command.

3. Commit your changes and open Pull Request.

:beer: Thank you for contribution :beer:


UMD builds are available on unpkg:

<!-- unpkg, production (minified) -->
<script src=""></script>
<!-- unpkg, production -->
<script src=""></script>
<!-- unpkg, development -->
<script src=""></script>


MIT License, see LICENSE file.

Maintainers (1)
Today 2
This Week 8
This Month 74
Last Day 4
Last Week 30
Last Month 159
Dependencies (1)
Dev Dependencies (46)

Copyright 2014 - 2016 © |