https://github.com/christopherpickering/react-leaflet-markercluster
React wrapper of Leaflet.markercluster for react-laeflet
https://github.com/christopherpickering/react-leaflet-markercluster
react-leaflet react-leaflet-markercluster react-leaflet-markers
Last synced: 12 months ago
JSON representation
React wrapper of Leaflet.markercluster for react-laeflet
- Host: GitHub
- URL: https://github.com/christopherpickering/react-leaflet-markercluster
- Owner: christopherpickering
- License: mit
- Created: 2022-11-28T08:29:11.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-27T07:21:55.000Z (over 1 year ago)
- Last Synced: 2024-10-27T08:23:50.719Z (over 1 year ago)
- Topics: react-leaflet, react-leaflet-markercluster, react-leaflet-markers
- Language: JavaScript
- Homepage: https://christopherpickering.github.io/react-leaflet-markercluster/
- Size: 19.4 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
React Leaflet Markercluster
React wrapper of Leaflet.markercluster for react-leaflet
Yet another react-leaflet-markercluster npm package. Why, there are already a dozen? I could not find one that worked with the latest version of react-leaflet and also seemed to support maintenance. I'm not a node developer but created this so that others could use an updated version and also maintain it. PR's are welcome. The fork-chain here is about a mile long so I've broken out of it, but listed the original developers below.
# 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**.
Just grab your markers inside `` component, right after ``:
```javascript
import MarkerClusterGroup from '@christopherpickering/react-leaflet-markercluster';
;
```
> **Note: Before getting started, please see these useful guides:**
>
> - [Leaflet Quick Start Guide](http://leafletjs.com/examples/quick-start/).
> - [react-leaflet Installation](https://react-leaflet.js.org/docs/en/installation.html).
# Table of Contents
- [Getting started](#getting-started)
- [API](#api)
- [How to run DEV env](#how-to-run-dev-env)
- [Contributors ✨](#contributors-)
- [Contributing](#contributing)
- [License](#license)
# Getting started
1. Install packages:
```bash
npm install @christopherpickering/react-leaflet-markercluster leaflet react-leaflet leaflet.markercluster
```
2. Import **markercluster** and **leaflet** styles:
```javascript
@import '~leaflet/dist/leaflet.css'; // sass
@import '~@christopherpickering/react-leaflet-markercluster/dist/styles.min.css'; // sass
require('~leaflet/dist/leaflet.css'); // inside .js file
require('@christopherpickering/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
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
;
```
**NOTE:** Remember to add map styles `.markercluster-map { height: 90vh; }`.
4. Just grab your markers inside `` component, right after ``:
```javascript
import MarkerClusterGroup from '@christopherpickering/react-leaflet-markercluster';
;
```
[More examples with the Documentation](https://christopherpickering.github.io/react-leaflet-markercluster/)
[CodeSandbox Getting Started](https://codesandbox.io/s/react-leaflet-markercluster-4lrkii)
# API
Just pass whatever option you need from [All Leaflet.markercluster Options](https://github.com/Leaflet/Leaflet.markercluster#all-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),
});
}
```
### Event listeners
You are able to add any listener, supported by Leaflet, with simple `on` property prefix.
# How to run the Storybook
Run `yarn storybook` and storybook should automatically open the at `http://localhost:6006/`.
# Contributors ✨
`react-leaflet-markercluster` was originally built by @yuzhva and then modified by @amauryfischer, @l4b4r4b4b4 and @changey before reaching this point. Many others have contributed as well.
**Special thanks to:**
- @webcarrot `react-leaflet` v2 support
- @CodeCutterUK `react-leaflet` v3 support
- @changey `react-leaflet` v4 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.
**Thank you for contribution**
# UMD
UMD builds are available on [unpkg](https://unpkg.com/):
```html
```
# License
MIT License, see [LICENSE](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/LICENSE) file.
MIT License, see [LICENSE](https://github.com/changey/react-leaflet-markercluster/blob/master/LICENSE) file.
MIT License, see [LICENSE](https://github.com/l4b4r4b4b4/react-leaflet-markercluster/blob/master/LICENSE) file.
MIT License, see [LICENSE](https://github.com/amauryfischer/react-leaflet-markercluster/blob/master/LICENSE) file.
MIT License, see [LICENSE](https://github.com/YUzhva/react-leaflet-markercluster/blob/master/LICENSE) file.