Skip to content

Latest commit

 

History

History
178 lines (147 loc) · 5.57 KB

README.md

File metadata and controls

178 lines (147 loc) · 5.57 KB
Raw

React leaflet markercluster

npm Code Climate npm license

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

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

Description

If you faced with an issue that markers are overlapping during map zooming, or they are overlapping because they are close to each other - probably you need to group them. That what you can do with react-leaflet-markercluster.

Note: At first, please get touched with:

Table of Contents

Getting started

1. Install package with yarn:

yarn add react-leaflet-markercluster

or you could use npm:

npm install react-leaflet-markercluster --save

2. Import package to your component:

import MarkerClusterGroup from 'react-leaflet-markercluster';

3. Declare some markers in next format:

const markers = [
  {lat: 49.8397, lng: 24.0297},
  {lat: 52.2297, lng: 21.0122},
  {lat: 51.5074, lng: -0.0901}
];

4. Put <MarkerClusterGroup ... /> inside react-leaflet, right after <TileLayer />:

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
  <TileLayer
    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <MarkerClusterGroup
    markers={markers}
    wrapperOptions={{enableDefaultStyle: true}}
  />
</Map>

NOTE: use wrapperOptions={{enableDefaultStyle: true}} property to enable default Leaflet.markercluster style for clustered markers group.

Check demo for more examples and all plugin options.

P.S: support of react-leaflet Marker available as a testing feature.
Just grab your markers inside MarkerClusterGroup like:

<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
  <TileLayer
    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <MarkerClusterGroup wrapperOptions={{enableDefaultStyle: true}}>
    <Marker position={[49.8397, 24.0297]} />
    <Marker position={[52.2297, 21.0122]} />
    <Marker position={[51.5074, -0.0901]} />
  </MarkerClusterGroup>
</Map>

API

  • markers: array of objects (required)

    keys for marker object, that will be placed in markers array:

    • lat: number (required)
    • lng: number (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
  • wrapperOptions: object
    • enableDefaultStyle: boolean default: false
    • disableDefaultAnimation: boolean default: false
  • onMarkerClick: function
  • onClusterClick: function
  • onPopupClose: function

Refs. Accessing markerClusterGroup Leaflet element:

<MarkerClusterGroup
  markers={markers}
  wrapperOptions={{enableDefaultStyle: true}}
  ref={(markerClusterGroup) => {
    this.markerClusterGroup = markerClusterGroup.leafletElement;
  }}
/>

How to run demo app

1. Clone our repo:

git clone https://github.com/YUzhva/react-leaflet-markercluster.git

2. Install all dependencies with yarn:

yarn install --no-lockfile

or you could use npm:

npm install

3. Start the server:

npm run start

4. After starting the server webpack should automatically open next 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. In newly updated ./dist folder, please:

  • change styles.scss to styles.css in *.js file
  • change styles.scss to styles.min.css in *.min.js file

4. Commit your changes and open Pull Request.

5. 🍺 Thank you for contribution 🍺

License

MIT License, see LICENSE file.