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 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 <MarkerClusterGroup />
component, right after <TileLayer />
:
; <MarkerClusterGroup> <Marker position=498397 240297 /> <Marker position=522297 210122 /> <Marker position=515074 -00901 /></MarkerClusterGroup>;
Note: Before getting started, please see these useful guides:
Table of Contents
Getting started
1. Install package:
yarn add react-leaflet-markercluster@next # 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 react-leaflet-markercluster@^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:
@; // sass@; // sass ; // inside .js file; // inside .js file
Or include CSS styles directly to the head of HTML file:
3. Write some simple react-leaflet
Map:
; <MapContainer className="markercluster-map" center=510 190 zoom=4 maxZoom=18> <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> <Marker position=498397 240297 /> <Marker position=522297 210122 /> <Marker position=515074 -00901 /></MapContainer>;
NOTE: Remember to add map styles .markercluster-map { height: 90vh; }
.
4. Just grab your markers inside <MarkerClusterGroup />
component, right after <TileLayer />
:
; <MarkerClusterGroup> <Marker position=498397 240297 /> <Marker position=522297 210122 /> <Marker position=515074 -00901 /></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 = { return L;} <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:
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:
<!-- unpkg, production code (minified) --><!-- unpkg, development code --> <!-- unpkg, production styles (minified) --><!-- unpkg, development styles -->
License
MIT License, see LICENSE file.