React wrapper of the official Leaflet.markercluster for react-laeflet

DEMO with examples: https://yuzhva.github.io/react-leaflet-markercluster/

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

Note: At first, please get touched with:

• Leaflet Quick Start Guide.
• react-leaflet Getting started.

• Getting started
• API
• How to run demo app
• Contributing

1. Install package with yarn:

yarn add react-leaflet-markercluster

or you could use npm:

npm install react-leaflet-markercluster --save

2. Import package to your component:

import MarkerClusterGroup from 'react-leaflet-markercluster';

3. Declare some markers in next format:

const markers = [
  {lat: 49.8397, lng: 24.0297},
  {lat: 52.2297, lng: 21.0122},
  {lat: 51.5074, lng: -0.0901}
];

4. Put <MarkerClusterGroup ... /> inside react-leaflet, right after <TileLayer />:

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
  <TileLayer
    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <MarkerClusterGroup
    markers={markers}
    wrapperOptions={{enableDefaultStyle: true}}
  />
</Map>

NOTE: use wrapperOptions={{enableDefaultStyle: true}} property to enable default Leaflet.markercluster style for clustered markers group.

Check demo for more examples and all plugin options.

P.S: support of react-leaflet Marker available as a testing feature.
Just grab your markers inside MarkerClusterGroup like:

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
  <TileLayer
    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <MarkerClusterGroup wrapperOptions={{enableDefaultStyle: true}}>
    <Marker position={[49.8397, 24.0297]} />
    <Marker position={[52.2297, 21.0122]} />
    <Marker position={[51.5074, -0.0901]} />
  </MarkerClusterGroup>
</Map>

• markers: array of objects (required)

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

  • lat: number (required)
  • lng: number (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

• options: object All available options for Leaflet.markercluster
• markerOptions: object All available options for Leaflet.Marker

• wrapperOptions: object
  • enableDefaultStyle: boolean default: false
  • disableDefaultAnimation: boolean default: false

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

Refs. Accessing markerClusterGroup Leaflet element:

<MarkerClusterGroup
  markers={markers}
  wrapperOptions={{enableDefaultStyle: true}}
  ref={(markerClusterGroup) => {
    this.markerClusterGroup = markerClusterGroup.leafletElement;
  }}
/>

1. Clone our repo:

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

2. Install all dependencies with yarn:

yarn install --no-lockfile

or you could use npm:

npm install

3. Start the server:

npm run start

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

http://localhost:8080/

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. In newly updated ./dist folder, please:

• change styles.scss to styles.css in *.js file
• change styles.scss to styles.min.css in *.min.js file

4. Commit your changes and open Pull Request.

5. 🍺 Thank you for contribution 🍺

MIT License, see LICENSE file.