Gathering detailed insights and metrics for @christopherpickering/react-leaflet-markercluster
Gathering detailed insights and metrics for @christopherpickering/react-leaflet-markercluster
React wrapper of Leaflet.markercluster for react-laeflet
Installations
npm install @christopherpickering/react-leaflet-markerclusterDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
18.12.1
NPM Version
8.19.2
Score
66.6
Supply Chain
92.4
Quality
75
Maintenance
100
Vulnerability
99.3
License
Languages
4
JavaScript
MDX
CSS
SCSS
JavaScript (49.41%)
MDX (48.73%)
CSS (1.21%)
SCSS (0.64%)
Developer
Download Statistics
Total Downloads
37,979
Last Day
28
Last Week
176
Last Month
980
Last Year
13,522
GitHub Statistics
MIT License
4 Stars
238 Commits
13 Branches
2 Contributors
Updated on Nov 15, 2024
Bundle Size
8.37 kB
Minified
2.75 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.1.0
Package Id
@christopherpickering/react-leaflet-markercluster@1.1.0
Unpacked Size
395.90 kB
Size
359.45 kB
File Count
36
NPM Version
8.19.2
Node Version
18.12.1
Total Downloads
Cumulative downloads
Total Downloads
37,979
Last Day
-40.4%
28
Compared to previous day
Last Week
-30.7%
176
Compared to previous week
Last Month
-7.6%
980
Compared to previous month
Last Year
-38.2%
13,522
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
3
Dev Dependencies
50
@babel/cli@babel/core@babel/plugin-proposal-nullish-coalescing-operator@babel/preset-env@semantic-release/changelog@semantic-release/commit-analyzer@semantic-release/git@semantic-release/github@semantic-release/npm@storybook/addon-actions@storybook/addon-docs@storybook/addon-essentials@storybook/addon-interactions@storybook/addon-links@storybook/addon-postcss@storybook/builder-webpack5@storybook/cli@storybook/manager-webpack5@storybook/mdx2-csf@storybook/node-logger@storybook/preset-scss@storybook/react@storybook/react-webpack5@storybook/testing-libraryautoprefixerbabel-loadercss-loadercz-conventional-changelogeslinteslint-config-airbnbeslint-config-prettiereslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-prettiereslint-plugin-reacteslint-plugin-storybookhtml-webpack-pluginlint-stagedpostcsspostcss-loaderprettierreactreact-domsasssass-loadersemantic-releasestorybookstyle-loaderterserwebpack
React Leaflet Markercluster
React wrapper of Leaflet.markercluster for react-leaflet
Yet another react-leaflet-markercluster npm package. Why, there are already a dozen? I could not find one that worked with the latest version of react-leaflet and also seemed to support maintenance. I'm not a node developer but created this so that others could use an updated version and also maintain it. PR's are welcome. The fork-chain here is about a mile long so I've broken out of it, but listed the original developers below.
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 />:
1import MarkerClusterGroup from '@christopherpickering/react-leaflet-markercluster'; 2 3<MarkerClusterGroup> 4 <Marker position={[49.8397, 24.0297]} /> 5 <Marker position={[52.2297, 21.0122]} /> 6 <Marker position={[51.5074, -0.0901]} /> 7</MarkerClusterGroup>;
Note: Before getting started, please see these useful guides:
Table of Contents
Getting started
- Install packages:
1npm install @christopherpickering/react-leaflet-markercluster leaflet react-leaflet leaflet.markercluster
- Import markercluster and leaflet styles:
1@import '~leaflet/dist/leaflet.css'; // sass 2@import '~@christopherpickering/react-leaflet-markercluster/dist/styles.min.css'; // sass 3 4require('~leaflet/dist/leaflet.css'); // inside .js file 5require('@christopherpickering/react-leaflet-markercluster/dist/styles.min.css'); // inside .js file
Or include CSS styles directly to the head of HTML file:
1<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> 2 3<link 4 rel="stylesheet" 5 href="https://unpkg.com/@christopherpickering/react-leaflet-markercluster/dist/styles.min.css" 6/>
- Write some simple
react-leafletMap:
1import { MapContainer, TileLayer, Marker } from 'react-leaflet'; 2 3<MapContainer 4 className="markercluster-map" 5 center={[51.0, 19.0]} 6 zoom={4} 7 maxZoom={18} 8> 9 <TileLayer 10 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 11 attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 12 /> 13 14 <Marker position={[49.8397, 24.0297]} /> 15 <Marker position={[52.2297, 21.0122]} /> 16 <Marker position={[51.5074, -0.0901]} /> 17</MapContainer>;
**NOTE:** Remember to add map styles `.markercluster-map { height: 90vh; }`.
4. Just grab your markers inside <MarkerClusterGroup /> component, right after <TileLayer />:
1import MarkerClusterGroup from '@christopherpickering/react-leaflet-markercluster'; 2 3<MarkerClusterGroup> 4 <Marker position={[49.8397, 24.0297]} /> 5 <Marker position={[52.2297, 21.0122]} /> 6 <Marker position={[51.5074, -0.0901]} /> 7</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:
1<MarkerClusterGroup showCoverageOnHover={false} />
or:
1const createClusterCustomIcon = function (cluster) { 2 return L.divIcon({ 3 html: `<span>${cluster.getChildCount()}</span>`, 4 className: 'marker-cluster-custom', 5 iconSize: L.point(40, 40, true), 6 }); 7} 8 9<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} />
Event listeners
You are able to add any listener, supported by Leaflet, with simple on property prefix.
How to run the Storybook
Run yarn storybook and storybook should automatically open the at http://localhost:6006/.
Contributors ✨
react-leaflet-markercluster was originally built by @yuzhva and then modified by @amauryfischer, @l4b4r4b4b4 and @changey before reaching this point. Many others have contributed as well.
Special thanks to:
- @webcarrot
react-leafletv2 support - @CodeCutterUK
react-leafletv3 support - @changey
react-leafletv4 support
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:
1<!-- unpkg, production code (minified) --> 2<script src="https://unpkg.com/@christopherpickering%2freact-leaflet-markercluster/dist/index.js"></script> 3<!-- unpkg, development code --> 4<script src="https://unpkg.com/@christopherpickering%2freact-leaflet-markercluster/src/react-leaflet-markercluster.js"></script> 5 6<!-- unpkg, production styles (minified) --> 7<link 8 rel="stylesheet" 9 type="text/css" 10 href="https://unpkg.com/@christopherpickering%2freact-leaflet-markercluster/dist/styles.min.css" 11/> 12<!-- unpkg, development styles --> 13<link 14 rel="stylesheet" 15 type="text/css" 16 href="https://unpkg.com/@christopherpickering%2freact-leaflet-markercluster/src/styles.scss" 17/>
License
MIT License, see LICENSE file. MIT License, see LICENSE file. MIT License, see LICENSE file. MIT License, see LICENSE file. MIT License, see LICENSE file.
No vulnerabilities found.
No security vulnerabilities found.