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.
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:
Table of Contents
Getting started
1. Install package:
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)
yarn add leaflet.markercluster leaflet react-leaflet prop-types # yarn npm install leaflet.markercluster leaflet react-leaflet prop-types # npm
2. Import Markercluster styles:
@; // sass@; // css ; // inside .js file
Or include CSS styles directly to the head of HTML file:
3. Write some simple react-leaflet
Map:
<Map 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 /> </Map>
4. Import package to your component:
;
5. Just grab your markers inside <MarkerClusterGroup />
component (right after <TileLayer />
):
<MarkerClusterGroup> <Marker position=498397 240297 /> <Marker position=522297 210122 /> <Marker position=515074 -00901 /></MarkerClusterGroup>
Check demo for more examples.
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: 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 formarkers
in JSON format) All available options for Leaflet.Marker
Refs. Accessing markerClusterGroup Leaflet element:
<MarkerClusterGroup markers=markers ref= { thismarkerClusterGroup = markerClusterGroupleafletElement; }/>
How to run demo app
1. Clone our 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:
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:
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.
🍺 Thank you for contribution 🍺
UMD
UMD builds are available on unpkg:
<!-- unpkg, production (minified) --><!-- unpkg, production --><!-- unpkg, development -->
License
MIT License, see LICENSE file.