react-leaflet-markercluster
React wrapper of Leaflet.markercluster for react-laeflet
Last updated 7 months ago by yuzhva .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-leaflet-markercluster 
SYNC missed versions from official npm registry.

React leaflet markercluster

npm Code Climate npm license

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:

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

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

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

<link rel="stylesheet" href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css" />

3. Write some simple react-leaflet Map:

<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'
  />

  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />

</Map>

4. Import package to your component:

import MarkerClusterGroup from 'react-leaflet-markercluster';

5. Just grab your markers inside <MarkerClusterGroup /> component (right after <TileLayer />):

<MarkerClusterGroup>
  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</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 = function (cluster) {
  return L.divIcon({
    html: `<span>${cluster.getChildCount()}</span>`,
    className: 'marker-cluster-custom',
    iconSize: L.point(40, 40, true),
  });
}

<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} />

P.S: old examples are available at CHANGELOG.md

Event listeners:

  • onMarkerClick: function
  • onClusterClick: function
  • onPopupClose: function

Deprecated since v1.1.8 API:

  • 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

Refs. Accessing markerClusterGroup Leaflet element:

<MarkerClusterGroup
  markers={markers}
  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:

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.

:beer: Thank you for contribution :beer:

UMD

UMD builds are available on unpkg:

<!-- unpkg, production (minified) -->
<script src="https://unpkg.com/react-leaflet-markercluster/dist/react-leaflet-markercluster.min.js"></script>
<!-- unpkg, production -->
<script src="https://unpkg.com/react-leaflet-markercluster/dist/react-leaflet-markercluster.js"></script>
<!-- unpkg, development -->
<script src="https://unpkg.com/react-leaflet-markercluster/src/react-leaflet-markercluster.js"></script>

License

MIT License, see LICENSE file.

Current Tags

  • 1.1.8                                ...           latest (7 months ago)
  • 2.0.0-rc3                                ...           next (3 months ago)

21 Versions

  • 2.0.0-rc3                                ...           3 months ago
  • 2.0.0-rc2                                ...           3 months ago
  • 2.0.0-rc1                                ...           3 months ago
  • 1.1.8                                ...           7 months ago
  • 1.1.7                                ...           a year ago
  • 1.1.6                                ...           a year ago
  • 1.1.5                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 27
This Month 45
Last Day 8
Last Week 18
Last Month 56
Dependencies (1)
Dev Dependencies (46)

Copyright 2014 - 2016 © taobao.org |