{"_id":"@2plgiap/react-leaflet-markercluster","_rev":"2-7e6ae519f330007c4a86380a5e255fd5","name":"@2plgiap/react-leaflet-markercluster","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@2plgiap/react-leaflet-markercluster","version":"0.0.1","description":"React wrapper of Leaflet.markercluster for react-laeflet","main":"dist/index.js","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":"^4.13.1","sass-loader":"^8.0.2","style-loader":"^1.1.3","terser":"^4.6.10"},"dependencies":{"@2plgiap/leaflet":"^0.0.1","leaflet.markercluster":"^1.4.1","@2plgiap/react-leaflet":"^0.0.1"},"peerDependencies":{"@2plgiap/leaflet":"^0.0.1","leaflet.markercluster":"^1.4.1","@2plgiap/react-leaflet":"^0.0.1"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"gitHead":"c0a8450d03631d5e690e661ad4b780f31b6cd5fb","_id":"@2plgiap/react-leaflet-markercluster@0.0.1","_nodeVersion":"15.14.0","_npmVersion":"7.10.0","dist":{"integrity":"sha512-lTFMRbxu1PSRusmHSX7uh8hB3adbIXSJyxMjb36A/N09MkSyDXCgtEAcUqaSq+vjLjTdgBqcm0wMZIFgcbyyhA==","shasum":"3192542d65a3e2fea418d136466d270bc002a69f","tarball":"https://registry.npmjs.org/@2plgiap/react-leaflet-markercluster/-/react-leaflet-markercluster-0.0.1.tgz","fileCount":29,"unpackedSize":399803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg/q4CRA9TVsSAnZWagAA7iQP/ji4rmTXRggyfiWSI7sY\nJJv7/3XsmRIY4Hd0h9SoEuMxCfJACbwmczP9bPvR+GtbyilvlIpeg0fKww5U\n6+MlHkLSVkCU2rh0AUJ1NCDaOUsKINVXKLExxsiWwnNbjFcbx1zEQJJlbDCO\n5IX5UKztmjLQO96PXcNy8gKjc92u1rcd3no06w20YBE+2Ri02fboqiyDT+x7\niHXuRLDZ05ZWhJ3wDVtLrX2wC0gMO8a0+mxAP3GLzxUkijE2JrTh7/xU8mlv\ndPBJd3fqSdAhje14lLcrQdTVJCm3QMfgRb36MeF6mJ8F+MQSk79Mj5kSFzg4\nduscv9JjqbmLVrNZDA/zcGCQBmdiD67rnPq2KW/LWmaYH7FCRidFi8T2GT5d\nWyQbxQfaSW89LMRh6beMDO9BSIKGuCMNgFiU6RIeb5NLB2PKJWynqYOceomq\nCffB/zlgJHyI5rulVQ35ehRyqWdqquB228N7rQtH0b0E9IhIViC76zWl2vzP\n9jn8fAxiEkcnIs9NMETuh36DeCfCysBSAJZYpDZWCdpYZINHVgd7y4hxNriE\n7n2C771euGg4FgUexVVJ6XIOOy0cDOYX+UFcT+XD/C9TtM/M+fUkegiHnSs1\nkqByKOburFKDqXDJJOKpxPh5ThtBzknaKjD6AJljKlzyJGAwhSzXEwie611X\nze5Q\r\n=25lb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDf7HLtb1ftwZD7oQ9oNzQR15Kd8iGMmcqY614WHSQ3vAiArzMDrZ3TRjCCagMhwugsGNLYRMoZ8QO+iI+louFwxIQ=="}]},"_npmUser":{"name":"pl_giap","email":"pl@giap.pl"},"directories":{},"maintainers":[{"name":"pl_giap","email":"pl@giap.pl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-leaflet-markercluster_0.0.1_1619262136060_0.8157250438309451"},"_hasShrinkwrap":false},"0.0.2":{"name":"@2plgiap/react-leaflet-markercluster","version":"0.0.2","description":"React wrapper of Leaflet.markercluster for react-laeflet","main":"dist/index.js","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":"^4.13.1","sass-loader":"^8.0.2","style-loader":"^1.1.3","terser":"^4.6.10"},"dependencies":{"@2plgiap/leaflet-ssr":"^0.0.1","leaflet.markercluster":"^1.4.1","@2plgiap/react-leaflet":"^0.0.1"},"peerDependencies":{"@2plgiap/leaflet-ssr":"^0.0.1","leaflet.markercluster":"^1.4.1","@2plgiap/react-leaflet":"^0.0.1"},"husky":{"hooks":{"pre-commit":"yarn lint"}},"gitHead":"c0a8450d03631d5e690e661ad4b780f31b6cd5fb","_id":"@2plgiap/react-leaflet-markercluster@0.0.2","_nodeVersion":"15.14.0","_npmVersion":"7.10.0","dist":{"integrity":"sha512-wg9OyR4iMIwPqj14rRRs1q8GkiG0xnHS89QPJ+zhzfuDTJEAvRb0HqyZqXYExmgto1BpkeU72FQK868wSTZh3Q==","shasum":"b3db64c62b59e81061bef035ed3ffda339152cce","tarball":"https://registry.npmjs.org/@2plgiap/react-leaflet-markercluster/-/react-leaflet-markercluster-0.0.2.tgz","fileCount":29,"unpackedSize":399811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg/4FCRA9TVsSAnZWagAAx2gP/2QjjH7mE7uf2ZLlHSPO\nBp2oi93kGn9VUKzN7AAsi8uAHJykulbe24+YwW8Xz4Z/Gbp25lulrVfSV38D\nf6cUgU1QmBLasftGCRjVfVW5psNjWPINWoDfJMEgWEUT+3Y7yH9VJ31QcU2+\nN9yeDxeowVlv+NxPo4ggyNaKXH5QxyZIEvzvvpv2hWWNDE2X5sGJUtsiYKkW\nu1F4sA0eelyy51QEWR68LV549Cb5EBRfBq7KGUi2gFUxfF2aqBCHSTPOE8vy\n012/fg+ug6zPAFOKl2a58Fk1nguopgO8bj4q0kH4OZAmZk3oYrxOuiRYc/4Q\nxoajjVF+ZvpJ6yHpcvyLbBNSJCFh3hkaLWh1aaMpcFyV4GxV0gBepCkGw7sb\nvKnW0LBtiWUA+EtcDjdTHAur9zU0G/leWpDMsHA2dGSZYhNvWJyOWMV8pi+J\nHlKyfTL629/V+cKps3A8splvK7Dc+KHajH5QqRenWFH3qcNpuBttmngb314G\nHAzqsD1FxBzZH9+mcDvr7mxwhwN/wNpY22sDNJ70gYl/N1rIqnnE6PfVI5jD\nCXsHnU3hzPApBI6mef3aEzh41XoOs0OOIm4cYFJnd5gMAaj+4dOyTOT5AuVX\nembOPtW4ay7CBQPerkb01EFI54TZ3QjJEOV7w78cWSAtGmy2y3qvdsMFug7X\ncXC4\r\n=0X4V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZA7XilxM/2B0mGAJy7qDSw4/g3OPX/+JEfmTfSS73/AiEAoFJuk1phMR4r1yTeqa5ItlsokeJoqp+szNs3SEYjQ7A="}]},"_npmUser":{"name":"pl_giap","email":"pl@giap.pl"},"directories":{},"maintainers":[{"name":"pl_giap","email":"pl@giap.pl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-leaflet-markercluster_0.0.2_1619262980593_0.05067529555340866"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-24T11:02:15.662Z","0.0.1":"2021-04-24T11:02:16.246Z","modified":"2022-04-04T10:42:59.598Z","0.0.2":"2021-04-24T11:16:20.784Z"},"maintainers":[{"name":"pl_giap","email":"pl@giap.pl"}],"description":"React wrapper of Leaflet.markercluster for react-laeflet","keywords":["react","leaflet","react-leaflet","markercluster","marker","cluster"],"author":{"name":"Yevhen Uzhva","email":"yevhen.uzhva@gmail.com"},"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"}