{"_id":"@changey/react-leaflet-markercluster","name":"@changey/react-leaflet-markercluster","dist-tags":{"latest":"4.0.0-rc1"},"versions":{"4.0.0-rc1":{"name":"@changey/react-leaflet-markercluster","version":"4.0.0-rc1","description":"React wrapper of Leaflet.markercluster for react-laeflet","main":"dist/index.js","repository":{"type":"git","url":"git+ssh://git@github.com/changey/react-leaflet-markercluster.git"},"keywords":["react","leaflet","react-leaflet","markercluster","marker","cluster"],"author":{"name":"Yevhen Uzhva","email":"yevhen.uzhva@gmail.com"},"license":"MIT","private":false,"scripts":{"dev":"start-storybook -p 8080","lint":"eslint --ext .js ./ --ignore-pattern '/dist/'","build:code":"babel src -d dist && terser ./dist/react-leaflet-markercluster.js -o dist/index.js && rm ./dist/react-leaflet-markercluster.js","build:styles":"node-sass src/styles.scss dist/styles.min.css --output-style compressed","build:source":"yarn build:code && yarn build:styles","build:gh-pages":"build-storybook","deploy:gh-pages":"gh-pages -d storybook-static"},"devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.9.0","@babel/preset-env":"^7.9.0","@storybook/addon-actions":"^5.3.18","@storybook/addon-docs":"^5.3.18","@storybook/preset-scss":"^1.0.2","@storybook/react":"^5.3.18","babel-loader":"^8.1.0","css-loader":"^3.4.2","eslint":"^6.8.0","eslint-config-airbnb":"^18.1.0","eslint-plugin-import":"^2.20.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^2.5.1","gh-pages":"^2.2.0","husky":"^4.2.3","node-sass":"^7.0.1","sass-loader":"^12.6.0","style-loader":"^3.3.1","terser":"^4.6.10"},"dependencies":{"@react-leaflet/core":"^2.0.0","leaflet":"^1.8.0","leaflet.markercluster":"^1.5.3","react-leaflet":"^4.0.0"},"peerDependencies":{"leaflet":"^1.8.0","leaflet.markercluster":"^1.5.3","react-leaflet":"^4.0.0"},"gitHead":"755d9adc90efe3d59f09951f1e3995ff39746618","bugs":{"url":"https://github.com/changey/react-leaflet-markercluster/issues"},"homepage":"https://github.com/changey/react-leaflet-markercluster#readme","_id":"@changey/react-leaflet-markercluster@4.0.0-rc1","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-gS1lEQiQwyeI6Y6Wuxuqqffwywm7giQw4tbcqtJP8zyT5bc3AzW2/EVJGwWORYo/PLDdDnvOrpI+lUJy2UA5MQ==","shasum":"88d76c74e9014ca2f669900dded8e2ccdd6dd545","tarball":"https://registry.npmjs.org/@changey/react-leaflet-markercluster/-/react-leaflet-markercluster-4.0.0-rc1.tgz","fileCount":29,"unpackedSize":399743,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFExop/oeZ/08QIcIuYuSen6uFhvKSvTAIhCHnlNPX2yAiB5KfqKr1MzV6j19T1smPj/YvLZ97JxNRYnxyLgswRXZQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisOslACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrORQ//RvEQbsJ2zzoxboOomtR4Rd6kmk0PjD1dnkXA0PN75ZsWXqn/\r\nW3Ut6Ho6IswVXoAXsFW8dddtjCuAzO/6F2ghQ6Mz1/9UrnDCRXgobg4+cBmG\r\nHqbDzNE672fRxfN7ijj+Ghln6PNhv6P61CeOYwtHGTTwXq5WKuJbF9xAPdoG\r\nDSq/hZQWoT0DrMSWkCi/709rebAn3niV2pxH3eQ1yCUpdo5SAHSSvdUeqwez\r\nwLg1Eu0msxh4NDJUKCnPA5GyazsLDtMTwLE3jhRBX/SmUeGzpxvrmdFlNTYB\r\nzFvKFsqHWlsxvf0xIg3q56+6itiS99HSPUKKkzgPPcfNODY6DUd0C70r83/C\r\nqyWOuA2kd2iA6iuPklAb0C9S6JWubM1F1RYADdQSdjQSmEvmQ9e215IC/yS8\r\n9FQHHstcnbfBGifLhNaYpBdbCPk5Ioa/A916xfU0KBouotFJwnMbjQUcxt2q\r\nAGN6lQrEPTbrg010YNVorfyVGOJbfwLzEVt+mSF3aAdbkw5I15e1TTk152K1\r\nVSH3wW0i9vGfMACVyNCiteYhMEnusxrxjnCP54HIcVLTQjX33VBeldwfPYfT\r\nVAWe8eCg3uIzGIwMG3wbSRzIEiab1odXdWOr2rK5RYAS3apQlPnKDqUyUPQk\r\nPOBw7nvJN9tg7t1tWe6qthIhNMhyayKhpEw=\r\n=EDsR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"changey","email":"eric61213@gmail.com"},"directories":{},"maintainers":[{"name":"changey","email":"eric61213@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-leaflet-markercluster_4.0.0-rc1_1655761701343_0.8497328839011387"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-20T21:48:21.287Z","4.0.0-rc1":"2022-06-20T21:48:21.518Z","modified":"2022-06-20T21:48:21.649Z"},"maintainers":[{"name":"changey","email":"eric61213@gmail.com"}],"description":"React wrapper of Leaflet.markercluster for react-laeflet","homepage":"https://github.com/changey/react-leaflet-markercluster#readme","keywords":["react","leaflet","react-leaflet","markercluster","marker","cluster"],"repository":{"type":"git","url":"git+ssh://git@github.com/changey/react-leaflet-markercluster.git"},"author":{"name":"Yevhen Uzhva","email":"yevhen.uzhva@gmail.com"},"bugs":{"url":"https://github.com/changey/react-leaflet-markercluster/issues"},"license":"MIT","readme":"# React leaflet markercluster\n\n[![npm](https://img.shields.io/npm/v/react-leaflet-markercluster.svg)](https://www.npmjs.com/package/react-leaflet-markercluster)\n[![Code Climate](https://codeclimate.com/github/YUzhva/react-leaflet-markercluster/badges/gpa.svg)](https://codeclimate.com/github/YUzhva/react-leaflet-markercluster)\n[![npm](https://img.shields.io/npm/dm/react-leaflet-markercluster.svg)](https://www.npmjs.com/package/react-leaflet-markercluster)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=plastic)](#license)\n\nReact wrapper of [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster)\nfor [react-leaflet](https://github.com/PaulLeCam/react-leaflet)\n\n![React leaflet markercluster](./preview.png)\n\n**Examples with the Documentation:** https://yuzhva.github.io/react-leaflet-markercluster/ <br />\n**[CodeSandbox Getting Started](https://codesandbox.io/s/react-leaflet-markercluster-getting-started-9binx)**\n\n# Description\n\nIf you are faced with an issue with markers overlapping during map zooming, or they are\noverlapping because they are close to each other - you probably need to group them. <br />\nThat is what you can do with **react-leaflet-markercluster**.\n\nJust grab your markers inside `<MarkerClusterGroup />` component, right after `<TileLayer />`:\n\n```javascript\nimport MarkerClusterGroup from 'react-leaflet-markercluster';\n\n<MarkerClusterGroup>\n  <Marker position={[49.8397, 24.0297]} />\n  <Marker position={[52.2297, 21.0122]} />\n  <Marker position={[51.5074, -0.0901]} />\n</MarkerClusterGroup>;\n```\n\n> **Note: Before getting started, please see these useful guides:**\n>\n> - [Leaflet Quick Start Guide](http://leafletjs.com/examples/quick-start/).\n> - [react-leaflet Installation](https://react-leaflet.js.org/docs/en/installation.html).\n\n# Table of Contents\n\n- [Getting started](#getting-started)\n- [API](#api)\n- [How to run DEV env](#how-to-run-dev-env)\n- [Contributors ✨](#contributors-)\n- [Contributing](#contributing)\n- [License](#license)\n\n# Getting started\n\n**1.** Install package:\n\n```bash\nyarn add react-leaflet-markercluster@next # yarn\nnpm install react-leaflet-markercluster # npm\n```\n\n**NOTE:** the `@next` is required for **react-leaflet v3** support. If you are still using react-leaflet v3, add dependency as `react-leaflet-markercluster@^2.x.x`\n\nThe `react-leaflet-markercluster` requires `leaflet.markercluster` as [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies)\n\n(Leaflet and react-leaflet also should be installed)\n\n```bash\nyarn add leaflet.markercluster leaflet react-leaflet # yarn\nnpm install leaflet.markercluster leaflet react-leaflet # npm\n```\n\n**2.** Import **markercluster** and **leaflet** styles:\n\n```javascript\n@import '~leaflet/dist/leaflet.css'; // sass\n@import '~react-leaflet-markercluster/dist/styles.min.css'; // sass\n\nrequire('~leaflet/dist/leaflet.css'); // inside .js file\nrequire('react-leaflet-markercluster/dist/styles.min.css'); // inside .js file\n```\n\nOr include CSS styles directly to the head of HTML file:\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/leaflet/dist/leaflet.css\" />\n\n<link\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css\"\n/>\n```\n\n**3.** Write some simple `react-leaflet` Map:\n\n```javascript\nimport { MapContainer, TileLayer, Marker } from 'react-leaflet';\n\n<MapContainer\n  className=\"markercluster-map\"\n  center={[51.0, 19.0]}\n  zoom={4}\n  maxZoom={18}\n>\n  <TileLayer\n    url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n    attribution='&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors'\n  />\n\n  <Marker position={[49.8397, 24.0297]} />\n  <Marker position={[52.2297, 21.0122]} />\n  <Marker position={[51.5074, -0.0901]} />\n</MapContainer>;\n```\n\n**NOTE:** Remember to add map styles `.markercluster-map { height: 90vh; }`.\n\n**4.** Just grab your markers inside `<MarkerClusterGroup />` component, right after `<TileLayer />`:\n\n```javascript\nimport MarkerClusterGroup from 'react-leaflet-markercluster';\n\n<MarkerClusterGroup>\n  <Marker position={[49.8397, 24.0297]} />\n  <Marker position={[52.2297, 21.0122]} />\n  <Marker position={[51.5074, -0.0901]} />\n</MarkerClusterGroup>;\n```\n\n[More examples with the Documentation](https://yuzhva.github.io/react-leaflet-markercluster/) <br />\n[CodeSandbox Getting Started](https://codesandbox.io/s/react-leaflet-markercluster-getting-started-9binx)\n\n# API\n\nJust pass whatever option you need from [All Leaflet.markercluster Options](https://github.com/Leaflet/Leaflet.markercluster#all-options) to `MarkerClusterGroup` as `prop`.\n\nFor example:\n\n```javascript\n<MarkerClusterGroup showCoverageOnHover={false} />\n```\n\nor:\n\n```javascript\nconst createClusterCustomIcon = function (cluster) {\n  return L.divIcon({\n    html: `<span>${cluster.getChildCount()}</span>`,\n    className: 'marker-cluster-custom',\n    iconSize: L.point(40, 40, true),\n  });\n}\n\n<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} />\n```\n\nP.S: Examples for v1 are available at [CHANGELOG.md](./CHANGELOG.md#v118)\n\n### Event listeners\n\nYou are able to add any listener, supported by Leaflet, with simple `on` property prefix.\n\n# How to run DEV env\n\n**1.** Clone the repo:\n\n```bash\ngit clone https://github.com/YUzhva/react-leaflet-markercluster.git\n```\n\n**2.** Install all dependencies:\n\n```bash\nyarn install --no-lockfile # yarn\nnpm install # npm\n```\n\n**3.** Start the server:\n\n```bash\nyarn dev # yarn\nnpm run dev # npm\n```\n\n**4.** After starting the server, storybook should automatically open the following address:\n\n```\nhttp://localhost:8080/\n```\n\n# Contributors ✨\n\nThanks goes to these wonderful people:\n<a href=\"https://github.com/yuzhva/react-leaflet-markercluster/graphs/contributors\">\n  <img src=\"https://contributors-img.web.app/image?repo=yuzhva/react-leaflet-markercluster\" />\n</a>\nAvatars rendered by [contributors-img](https://contributors-img.web.app).\n\n**Special thanks to:**\n\n- [@webcarrot](https://github.com/webcarrot) for [react-leaflet v2 support](https://github.com/yuzhva/react-leaflet-markercluster/issues/71#issuecomment-403071677)\n- [@CodeCutterUK](https://github.com/CodeCutterUK) for [react-leaflet v3 support](https://github.com/yuzhva/react-leaflet-markercluster/pull/124)\n\n# Contributing\n\nAll sources are placed in the `./src` folder:\n\n**1.** Fork the repo.\n\n**2.** Edit `react-leaflet-markercluster.js` plugin or `style.scss` style files.\n\n**3.** Commit your changes and open Pull Request.\n\n:beer: **Thank you for contribution** :beer:\n\n# UMD\n\nUMD builds are available on [unpkg](https://unpkg.com/):\n\n```html\n<!-- unpkg, production code (minified) -->\n<script src=\"https://unpkg.com/react-leaflet-markercluster/dist/index.js\"></script>\n<!-- unpkg, development code -->\n<script src=\"https://unpkg.com/react-leaflet-markercluster/src/react-leaflet-markercluster.js\"></script>\n\n<!-- unpkg, production styles (minified) -->\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css\"\n/>\n<!-- unpkg, development styles -->\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://unpkg.com/react-leaflet-markercluster/src/styles.scss\"\n/>\n```\n\n# License\n\nMIT License, see [LICENSE](https://github.com/YUzhva/react-leaflet-markercluster/blob/master/LICENSE) file.\n","readmeFilename":"README.md"}