dudesuh/React leaflet markercluster

This is a forked version of YUzhva/react-leaflet-markercluster(
https://github.com/YUzhva/react-leaflet-markercluster) v1.1.8 and adds support for other cluster leaflet events like onClusterMouseDown, onClusterMouseUp, etc, instead of only onClusterClick.

![npm](
https://www.npmjs.com/package/react-leaflet-markercluster)
![Code Climate](
https://codeclimate.com/github/YUzhva/react-leaflet-markercluster)
![npm](
https://www.npmjs.com/package/react-leaflet-markercluster)

React wrapper of Leaflet.markercluster
for react-leaflet

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

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.

> 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 demo app
* Contributing

Getting started

1. Install package:
``bash
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)
`bash
yarn add leaflet.markercluster leaflet react-leaflet prop-types # yarn
npm install leaflet.markercluster leaflet react-leaflet prop-types # npm
`

2. 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

`

3. Write some simple react-leaflet Map:
`javascript

`


4. Import package to your component:
`javascript
import MarkerClusterGroup from 'react-leaflet-markercluster';
`

5. Just grab your markers inside component (right after ):
`javascript





`

Check demo for more examples.

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: old examples are available at CHANGELOG.md

Event listeners:
+ onMarkerClick: function
+ onCluster%LeafletEvent%: function
+ onPopupClose: function

Deprecated since v1.1.8 API:
+ options: object All available options for Leaflet.markercluster
* 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

+ markerOptions: object (options for markers in JSON format)
All available options for Leaflet.Marker


Refs. Accessing markerClusterGroup Leaflet element:
`javascript
markers={markers}
ref={(markerClusterGroup) => {
this.markerClusterGroup = markerClusterGroup.leafletElement;
}}
/>
`

How to run demo app

1. Clone our 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
npm run start
`

4. After starting the server, webpack should automatically open the following address:
`
http://localhost:8080/
`

Contributing

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

UMD builds are available on unpkg:

`html






``

License

MIT License, see LICENSE file.