Need help with react-leaflet-markercluster?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

yuzhva
235 Stars 63 Forks MIT License 38 Commits 22 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 113,278
React
HTML
TypeScr...
nocode
31 commits
# 517,712
React
JavaScr...
leaflet
HTML
1 commit
# 45,410
Clojure
oled
Raspber...
neopixe...
1 commit
# 512,493
compati...
React
HTML
CSS
1 commit
# 463,075
TypeScr...
React
leaflet
HTML
1 commit
# 363,591
React
leaflet
HTML
Python
1 commit
# 520,184
React
JavaScr...
leaflet
HTML
1 commit
# 194,247
watchdo...
React
TypeScr...
amazon-...
1 commit

React leaflet markercluster

npm Code Climate npm license

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 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 
:
import MarkerClusterGroup from 'react-leaflet-markercluster';


  
  
  
;

Note: Before getting started, please see these useful guides:

Table of Contents

Getting started

1. Install package:

yarn add [email protected] # yarn
npm install react-leaflet-markercluster # npm

NOTE: the

@next
is required for react-leaflet v3 support. If you are still using react-leaflet v3, add dependency as
[email protected]^2.x.x

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:

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

require('~leaflet/dist/leaflet.css'); // inside .js file require('react-leaflet-markercluster/dist/styles.min.css'); // inside .js file

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


3. Write some simple

react-leaflet
Map:
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 
:
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:


or:

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

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:

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:







License

MIT License, see LICENSE file.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.