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 or polygons 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 or ClusterableRegions inside <MarkerClusterGroup /> component, right after <TileLayer />:

import MarkerClusterGroup from "react-leaflet-markercluster";

<MarkerClusterGroup>
  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</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:

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

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

(Leaflet and react-leaflet also should be installed)

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

2. Import markercluster and leaflet styles:

//sass
@import '~leaflet/dist/leaflet.css'; 
@import '~react-leaflet-markercluster/styles'; 

//cjs
require('~leaflet/dist/leaflet.css');
require('react-leaflet-markercluster/styles'); 

//esm
import 'leaflet/dist/leaflet.css'
import 'react-leaflet-markercluster/styles'

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

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

<link
  rel="stylesheet"
  href="https://unpkg.com/react-leaflet-markercluster/styles"
/>

3. Write some simple react-leaflet Map:

import { MapContainer, TileLayer, Marker } from "react-leaflet";

<MapContainer
  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'
  />

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

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

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

import MarkerClusterGroup from "react-leaflet-markercluster";

<MarkerClusterGroup>
  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</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:

<MarkerClusterGroup showCoverageOnHover={false} />

or:

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: 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:

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

2. Install all dependencies:

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

3. Start the server:

yarn dev # yarn
npm 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:

<!-- unpkg, production code (minified) -->
<script src="https://unpkg.com/react-leaflet-markercluster/dist/index.js"></script>
<!-- unpkg, development code -->
<script src="https://unpkg.com/react-leaflet-markercluster/src/react-leaflet-markercluster.js"></script>

<!-- unpkg, production styles (minified) -->
<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/react-leaflet-markercluster/styles"
/>
<!-- unpkg, development styles -->
<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/react-leaflet-markercluster/src/styles.scss"
/>

License

MIT License, see LICENSE file.

v2.0.0

There are critical changes that touches to the MarkerClusterGroup API: 1. Support of marker object lat and lng keys are removed. 2. options property of MarkerClusterGroup removed. 3. Console deprecated warnings are removed. 4. Better handling on events. 5. Demo application completely rewritten and replaced with StoryBook.

v1.1.8

There are critical changes that touches to the MarkerClusterGroup API:

1. options property is deprecated (will be removed at v1.2.0).

Since now you don't need to use options prop to pass Leaflet.markercluster option into <MarkerClusterGroup />.

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

For example:

// New API
<MarkerClusterGroup showCoverageOnHover={false} />

// How it was before 1.1.8
<MarkerClusterGroup options={{ showCoverageOnHover: false }} />

or:

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

// New API
<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} showCoverageOnHover={false} />

// How it was before 1.1.8
<MarkerClusterGroup options={{ iconCreateFunction: clusterCustomIcon, showCoverageOnHover: false }} />

2. Deprecated wrapperOptions property has been removed.

How to replace wrapperOptions old enableDefaultStyle | disableDefaultAnimation | removeDuplicates features:

• enableDefaultStyle: to enable leaflet.markercluster default style for cluster, just import Markercluster styles: `javascript @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:
```html
<link rel="stylesheet" href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css" />

• disableDefaultAnimation: to disable markers animation, set Leaflet.markercluster animate option to false:

  <MarkerClusterGroup markers={markers} options={{ animate: false }} />

• removeDuplicates: you could use our previous solution for markers filtering (before sending them to MarkerClusterGroup) as follows: `javascript function removeMarkersWithSameCoordinates(markers) { // init filtered markers list with first marker from list const filteredMarkers = [markers[0]];

  markers.forEach((marker) => { if (!JSON.stringify(filteredMarkers).includes(JSON.stringify(marker))) {

  filteredMarkers.push(marker);

  } });

  return filteredMarkers; }

// ... render() { const filteredMarkers = removeMarkersWithSameCoordinates(this.props.markers); return ( // ... <MarkerClusterGroup markers={filteredMarkers} /> // ... ) } // ...

### **3.** Bug Fix
- Dependencies Update
- Demo-app: Update Panel props according to latest react-bootstrap specification
- **Remove** requiring of **deprecated-styles** inside **react-leaflet-markercluster.js** plugin
- **Use react context store to access markers instead of cloning markers during their render**
- Deprecation warnings about **MarkerClusterGroup** `options` property
- Update Demo-app with fresh examples

# v1.1.7
### **1.** marker object `lat` and `lng` keys are deprecated (will be removed at v1.2.0).
To set marker position, please use `position` key at marker object like:
```javascript
const markers = [
  { position: [49.8397, 24.0297] },
  { position: [52.2297, 21.0122] },
  { position: [51.5074, -0.0901] },
];

position that is Leaflet.LatLng array or object, that could be declared like:

const markers = [
  { position: [49.8397, 24.0297] }, // [lat, lng]
  { position: { lat: 52.2297, lng: 21.0122 } },
  { position: { lat: 52.2297, lon: 21.0122 } },
];

2. wrapperOptions is fully deprecated and will not be used anymore (will be removed at v1.1.8).

3. Bug Fix

• Check if map className was already added/changed when MarkerClusterGroup is mounting
• Remove markers from map when MarkerClusterGroup received empty array in nextProps
• Updated MarkerClusterGroup API. Deprecation warnings about wrapperOptions and marker lat and lng object keys.
• React 16 peerDependency support
• Updated documentation