React leaflet markercluster


React wrapper of Leaflet.markercluster
for react-leaflet

!React leaflet markercluster

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 component, right after :

``javascript
import MarkerClusterGroup from "react-leaflet-markercluster";





;
`

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

`bash
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)

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

2. Import markercluster and leaflet styles:

`javascript
//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:

`html


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

3. Write some simple react-leaflet Map:

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

className="markercluster-map"
center={[51.0, 19.0]}
zoom={4}
maxZoom={18}
>
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>




;
`

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

4. Just put your markers or ClusterableRegions inside component, right after :

`javascript
import MarkerClusterGroup from "react-leaflet-markercluster";





;
`

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:

`javascript

`

or:

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


`

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

$3

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

How to run DEV env

1. Clone the repo:

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

2. Install all dependencies:

`bash
yarn install --no-lockfile # yarn
npm install # npm
`

3. Start the server:

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

`html






rel="stylesheet"
type="text/css"
href="https://unpkg.com/react-leaflet-markercluster/styles"
/>

rel="stylesheet"
type="text/css"
href="https://unpkg.com/react-leaflet-markercluster/src/styles.scss"
/>
``

License

MIT License, see LICENSE file.