npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-leaflet-markercluster

v4.2.1

Published

React wrapper of Leaflet.markercluster for react-leaflet

Downloads

103,699

Readme

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 or polygons 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 or ClusterableRegions inside <MarkerClusterGroup /> component, right after <TileLayer />:

import MarkerClusterGroup from "react-leaflet-markercluster";

<MarkerClusterGroup>
  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</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

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
@import '~leaflet/dist/leaflet.css'; 
@import '~react-leaflet-markercluster/styles'; 

//cjs
require('~leaflet/dist/leaflet.css');
require('react-leaflet-markercluster/styles'); 

//esm
import 'leaflet/dist/leaflet.css'
import 'react-leaflet-markercluster/styles'

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

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

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

3. Write some simple react-leaflet Map:

import { MapContainer, TileLayer, Marker } from "react-leaflet";

<MapContainer
  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]} />
</MapContainer>;

NOTE: Remember to add map styles .markercluster-map { height: 90vh; }.

4. Just put your markers or ClusterableRegions inside <MarkerClusterGroup /> component, right after <TileLayer />:

import MarkerClusterGroup from "react-leaflet-markercluster";

<MarkerClusterGroup>
  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</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 = 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: 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:

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

<!-- unpkg, production styles (minified) -->
<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/react-leaflet-markercluster/styles"
/>
<!-- unpkg, development styles -->
<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/react-leaflet-markercluster/src/styles.scss"
/>

License

MIT License, see LICENSE file.