{"_id":"@vgrid/react-leaflet-heatmap-layer","_rev":"19-e35aa0c62b856a8f276a22713c839525","name":"@vgrid/react-leaflet-heatmap-layer","dist-tags":{"latest":"4.0.3"},"versions":{"4.0.0":{"name":"@vgrid/react-leaflet-heatmap-layer","version":"4.0.0","keywords":["react","leaflet","layer","map","maps","gis","geo","geojson","heatmap","heat"],"author":{"name":"Jeremiah Hall","email":"npm@jeremiahrhall.com"},"license":"MIT","_id":"@vgrid/react-leaflet-heatmap-layer@4.0.0","maintainers":[{"name":"acruzg","email":"ae.cruzg@gmail.com"},{"name":"chriswiggins","email":"chris@wiggins.nz"},{"name":"adamparlane","email":"adam.parlane@outlook.com"}],"contributors":[{"name":"Chris Wiggins","email":"chris@wiggins.nz"}],"dist":{"shasum":"5752b3e820d01a78ab1098c512b11be7e01cc2a2","tarball":"https://registry.npmjs.org/@vgrid/react-leaflet-heatmap-layer/-/react-leaflet-heatmap-layer-4.0.0.tgz","fileCount":19,"integrity":"sha512-Sf4sfzYTgs+s38xtBtbQy4MAIvZrzSximOEr8XT71pVoMHiFMKxj7CRttuYq28S9pawCi2ml8NcedR6NHQnX0Q==","signatures":[{"sig":"MEYCIQD1KHNgDpliYqiiBEInQxO9bZxZx/WF16xrxxWUmez3KwIhAKAxZVluP3fJvclv8jCkkxOq9m+CmNfyJRv67DVTDZlB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2JUsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT6g//SPypDhPKoRcyWhZfnbRmzpJaaSuYOORdZVGSjL6fgzu47tej\r\npvotYmoIqwxmFphXnnANstm4rbfaWQ5N7Yb2q/f/PezhxM2wBT8PKVp/O9EQ\r\np5Py9ucnnXP7KFDLtMBxHJvKHbqHUzaPHEAQt0UBQrGrnu4BBKU8PuExVMto\r\nd9Q/WA7e3knbaUmMTbUHGpIXWO2KpLDIGwS7pdvEOH5fGG2S0Tpsbm3Ahuxa\r\nBsyGhrVt/38mUIMfuoWzcAfZYza78BN1CNNYGRxkFw6ZLTlqrf9OsfDtUZh4\r\nNUfR3ifzh0otdHG2IHGHthh4eEx/0trzPxlGJAfodCuj6byhPCk3jf3u8v/H\r\nwMnQvu85Uewd6eW+phU3ziLfJ4EzFUi1DudOqdRx+4U00YkSOTZHYcRiM7pP\r\ndryXv24+qHW6D0YbYhdXNERoGKcq3ArZOgJ3j889y32rrntn8JzX1pxRDqI5\r\nDC/eyRILEHk6MKcJy4yIGPR78QQ2bOV3DnhICpoR0oFJREIe3zxPVmoRjWkx\r\nwGOWXx9o1SeXzoCFjalfyh5CDGHUwmZm56glWHrNnlRX/yk/w04i2aPyadTq\r\n9V6oPRkEwX6gH3bSoTSRPlWtmPhAcIMH/STXngv5mR3R4Y+M8+7DQSzXjB8q\r\njD11bDLI8dqiOKqW/TjOv0sENiIBdPExaZg=\r\n=kATb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"cjs/index.js","types":"types/index.d.ts","module":"esm/index.js","scripts":{"lint":"eslint ./src/*.ts*","test":"cross-env BABEL_ENV=development jest","build":"yarn run build:clean && yarn run build:cjs && yarn run build:esm && yarn run build:types","clean":"rm -rf ./lib/*","compile":"npm run clean; npm run transpile","build:cjs":"babel src --out-dir cjs --extensions .ts,.tsx","build:esm":"cross-env BABEL_ENV=esm babel src --out-dir esm --extensions .ts,.tsx","transpile":"tsc src/HeatmapLayer.js --out-file lib/HeatmapLayer.js","test:watch":"yarn run test --watch","build:clean":"del cjs esm types","build:types":"tsc --emitDeclarationOnly"},"_npmUser":{"name":"chriswiggins","email":"chris@wiggins.nz"},"repository":{"url":"git+https://github.com/vgrid/react-leaflet-heatmap-layer.git","type":"git"},"description":"A custom layer for heatmaps in react-leaflet","directories":{},"licenseText":"The MIT License (MIT)\nCopyright (c) 2016 OpenGov, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","sideEffects":false,"dependencies":{"simpleheat":"^0.4.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","react":"^18.0.0","eslint":"^7.5.0","del-cli":"^3.0.1","leaflet":"^1.7.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.0.0","@babel/cli":"^7.12.10","typescript":"^4.1.5","@babel/core":"^7.12.10","@types/react":"^18.0.27","@types/leaflet":"^1.5.23","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@react-leaflet/core":"^2.1.0","eslint-plugin-react":"^7.20.3","eslint-plugin-import":"^2.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.3.1","@babel/preset-typescript":"^7.12.7","@typescript-eslint/parser":"^4.0.0","eslint-plugin-react-hooks":"^4.0.8","@typescript-eslint/eslint-plugin":"^4.0.0","@babel/plugin-transform-strict-mode":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-transform-proto-to-assign":"^7.12.1","@babel/plugin-proposal-export-default-from":"^7.12.1"},"peerDependencies":{"react":"^18.0.0","leaflet":"^1.0.0","react-leaflet":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-leaflet-heatmap-layer_4.0.0_1675138348309_0.9860152506525599","host":"s3://npm-registry-packages"}},"4.0.3":{"name":"@vgrid/react-leaflet-heatmap-layer","version":"4.0.3","keywords":["react","leaflet","layer","map","maps","gis","geo","geojson","heatmap","heat"],"author":{"name":"Jeremiah Hall","email":"npm@jeremiahrhall.com"},"license":"MIT","_id":"@vgrid/react-leaflet-heatmap-layer@4.0.3","maintainers":[{"name":"acruzg","email":"ae.cruzg@gmail.com"},{"name":"chriswiggins","email":"chris@wiggins.nz"},{"name":"adamparlane","email":"adam.parlane@outlook.com"}],"contributors":[{"name":"Chris Wiggins","email":"chris@wiggins.nz"}],"dist":{"shasum":"a65e23931391d8653e7224ceffe44399bf41278b","tarball":"https://registry.npmjs.org/@vgrid/react-leaflet-heatmap-layer/-/react-leaflet-heatmap-layer-4.0.3.tgz","fileCount":19,"integrity":"sha512-DSkRhJvH74YeGWvw7xbZwxJ8K/A9C57i8oDpLB7w6+eCfMnPFCH+qCSJfrV/zauRG3s2OTRSnnUpWJbOj4IiBA==","signatures":[{"sig":"MEUCIAG/U0GaHQMFzfyl3/2lC1/Sk9Sxf2FpedcxpC2+vY3AAiEA0+iI66JNDvtE9A/2kHp5EmW/04gjsD+wjHKFMZgxHJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2dkXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry9w/9HPOSoxJBOz0zU3tmWw1wfvnLAJnWCNp7qicnZOYYW0/rMEL4\r\nxRmMmWgpFDC8FgvrXTZKRJICiCZPRpOao69WsqC+JN3DOZz8LeQdms2uj9FG\r\nGvFRNl3n6YyffiAhwVRx30AYABjyvudh0/IufoFqzfT6mFieqTKBorcm3dMO\r\nRsNiLs7YEPUBounYMPNafeq6A2wVXj1+EseMFnJAck5o+Pe5OpNW1l1bw8Bz\r\n7MlHFX0c+Dj/yFWdcTacPQd6kbJhRFg7if54JlbgyOMkpyO7yx8JWbXSc0Sc\r\nxb3LqaooBCbwAkcrZjUtFHw0Jke/Ha9kaxDOMq2wzwWVTnhl50dN1wzQHr+h\r\nsHCTqdw3nYrILT7VI4o73cFWp9BF+IMiaimhJDNlzkDdcrkqSIxb4SBC62f7\r\nO9pty3QvLqDGGwLw3Q3orE06Lvg/MRU9wmdbcv0b9sqL/RKv6ksoGZ2uyXOj\r\nl+7OcIBY4eybqs/IluyomCYoJxYOCgYsuDg2V+SLzEbNVqRpKfztnX7Y+Nso\r\nZ5yz6NCgHx5V2yz8rRkPH590wIlTYYKYbJBkMwKcIfi0xAMzvKpidO9cLlOP\r\n11A5gGRiitqWXeyenjtUoI4fYlAxiE+fmiLQhyqGDkwGVhSpsWMTq4PON3F5\r\n0x6QkPIr2uPezVT6xuPMb/L7omMs9+M6++s=\r\n=pyvn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"cjs/index.js","types":"types/index.d.ts","module":"esm/index.js","scripts":{"lint":"eslint ./src/*.ts*","test":"cross-env BABEL_ENV=development jest","build":"yarn run build:clean && yarn run build:cjs && yarn run build:esm && yarn run build:types","clean":"rm -rf ./lib/*","compile":"npm run clean; npm run transpile","prepack":"yarn run build","build:cjs":"babel src --out-dir cjs --extensions .ts,.tsx","build:esm":"cross-env BABEL_ENV=esm babel src --out-dir esm --extensions .ts,.tsx","transpile":"tsc src/HeatmapLayer.js --out-file lib/HeatmapLayer.js","test:watch":"yarn run test --watch","build:clean":"del cjs esm types","build:types":"tsc --emitDeclarationOnly"},"_npmUser":{"name":"chriswiggins","email":"chris@wiggins.nz"},"repository":{"url":"git+https://github.com/vgrid/react-leaflet-heatmap-layer.git","type":"git"},"description":"A custom layer for heatmaps in react-leaflet","directories":{},"licenseText":"The MIT License (MIT)\nCopyright (c) 2016 OpenGov, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","sideEffects":false,"dependencies":{"@vgrid/simpleheat":"^0.5.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","react":"^18.0.0","eslint":"^7.5.0","del-cli":"^3.0.1","leaflet":"^1.7.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.0.0","@babel/cli":"^7.12.10","typescript":"^4.1.5","@babel/core":"^7.12.10","@types/react":"^18.0.27","@types/leaflet":"^1.5.23","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@react-leaflet/core":"^2.1.0","eslint-plugin-react":"^7.20.3","eslint-plugin-import":"^2.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.3.1","@babel/preset-typescript":"^7.12.7","@typescript-eslint/parser":"^4.0.0","eslint-plugin-react-hooks":"^4.0.8","@typescript-eslint/eslint-plugin":"^4.0.0","@babel/plugin-transform-strict-mode":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-transform-proto-to-assign":"^7.12.1","@babel/plugin-proposal-export-default-from":"^7.12.1"},"peerDependencies":{"react":"^18.0.0","leaflet":"^1.0.0","react-leaflet":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-leaflet-heatmap-layer_4.0.3_1675221271059_0.2191580425891424","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-01-31T04:11:12.813Z","modified":"2026-05-11T03:19:58.434Z","3.0.0":"2023-01-31T04:11:13.005Z","4.0.0":"2023-01-31T04:12:28.527Z","4.0.1":"2023-02-01T02:04:38.248Z","4.0.2":"2023-02-01T02:39:04.112Z","4.0.3":"2023-02-01T03:14:31.231Z"},"author":{"name":"Jeremiah Hall","email":"npm@jeremiahrhall.com"},"license":"MIT","keywords":["react","leaflet","layer","map","maps","gis","geo","geojson","heatmap","heat"],"repository":{"url":"git+https://github.com/vgrid/react-leaflet-heatmap-layer.git","type":"git"},"description":"A custom layer for heatmaps in react-leaflet","contributors":[{"name":"Chris Wiggins","email":"chris@wiggins.nz"}],"maintainers":[{"email":"chris@wiggins.nz","name":"chriswiggins"},{"email":"adam.parlane@outlook.com","name":"adamparlane"},{"email":"ae.cruzg@gmail.com","name":"acruzg"},{"email":"glen@smudge.com","name":"glen-smudge"},{"email":"layerssss@gmail.com","name":"layerssss"},{"email":"ashu.3333d@gmail.com","name":"mukeshyadavcdac"},{"email":"declan@smudge.com","name":"dec-smudge"},{"email":"chris.tichborne@safercities.com","name":"christichborne"}],"readme":"# @vgrid/react-leaflet-heatmap-layer\n\n`react-leaflet-heatmap-layer` provides a simple `<HeatmapLayer />` component for creating a heatmap layer in a `react-leaflet` map.\n\n![A screenshot of a heatmap on a leaflet map](../master/screenshot.jpg?raw=true)\n\n## Usage\n\nThis fork changes the behaviour to export a factory function, so that the types can be turned into a generic\n\nUse directly as a fixed layer:\n\n```typescript\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Map, Marker, Popup, TileLayer } from 'react-leaflet';\nimport HeatmapLayerFactory from '../src/HeatmapLayer';\nimport { addressPoints } from './realworld.10000.js';\n\nconst HeatmapLayer = HeatmapLayerFactory<[number, number, number]>()\n\nclass MapExample extends React.Component {\n\n  render() {\n    return (\n      <div>\n        <Map center={[0,0]} zoom={13}>\n          <HeatmapLayer\n            fitBoundsOnLoad\n            fitBoundsOnUpdate\n            points={addressPoints}\n            longitudeExtractor={m => m[1]}\n            latitudeExtractor={m => m[0]}\n            intensityExtractor={m => parseFloat(m[2])} />\n          <TileLayer\n            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'\n            attribution='&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors'\n          />\n        </Map>\n      </div>\n    );\n  }\n\n}\n\nrender(<MapExample />, document.getElementById('app'));\n```\n\nOr use it inside a layer control to toggle it:\n\n```typescript\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Map, Marker, Popup, TileLayer } from 'react-leaflet';\nimport HeatmapLayerFactory from '../src/HeatmapLayer';\nimport { addressPoints } from './realworld.10000.js';\n\nconst HeatmapLayer = HeatmapLayerFactory<[number, number, number]>()\n\nclass MapExample extends React.Component {\n\n  render() {\n    return (\n      <div>\n      <Map center={position} zoom={13} style={{ height: '100%' }} >\n            <LayersControl>\n              <LayersControl.BaseLayer name=\"Base\" checked>\n                <TileLayer\n                  url=\"http://{s}.tile.osm.org/{z}/{x}/{y}.png\"\n                  attribution=\"&copy; <a href=http://osm.org/copyright>OpenStreetMap</a> contributors\"\n                />\n              </LayersControl.BaseLayer>\n              <LayersControl.Overlay name=\"Heatmap\" checked>\n                <FeatureGroup color=\"purple\">\n                  <Marker position={[50.05, -0.09]} >\n                    <Popup>\n                      <span>A pretty CSS3 popup.<br /> Easily customizable. </span>\n                    </Popup>\n                  </Marker>\n                  <HeatmapLayer\n                    fitBoundsOnLoad\n                    fitBoundsOnUpdate\n                    points={addressPoints}\n                    longitudeExtractor={m => m[1]}\n                    latitudeExtractor={m => m[0]}\n                    intensityExtractor={m => parseFloat(m[2])}\n                  />\n                </FeatureGroup>\n              </LayersControl.Overlay>\n              <LayersControl.Overlay name=\"Marker\">\n                <FeatureGroup color=\"purple\">\n                  <Marker position={position} >\n                    <Popup>\n                      <span>A pretty CSS3 popup.<br /> Easily customizable. </span>\n                    </Popup>\n                  </Marker>\n                </FeatureGroup>\n              </LayersControl.Overlay>\n            </LayersControl>\n          </Map>\n      </div>\n    );\n  }\n}\n\nrender(<MapExample />, document.getElementById('app'));\n```\n\n\n## API\n\nThe `HeatmapLayer` component takes the following props:\n\n- `points`: *required* an array of objects to be processed\n- `longitudeExtractor`: *required* a function that returns the object's longitude e.g. `marker => marker.lng`\n- `latitudeExtractor`: *required* a function that returns the object's latitude e.g. `marker => marker.lat`\n- `intensityExtractor`: *required* a function that returns the object's intensity e.g. `marker => marker.val`\n- `fitBoundsOnLoad`: boolean indicating whether map should fit data in bounds of map on load\n- `fitBoundsOnUpdate`: boolean indicating whether map should fit data in bounds of map on Update\n- `max`: max intensity value for heatmap (default: 3.0)\n- `radius`: radius for heatmap points (default: 30)\n- `maxZoom`: maximum zoom for heatmap (default: 18)\n- `opacity`: the opacity of the heatmap layer (default: 1)\n- `minOpacity`: minimum opacity for heatmap (default: 0.01)\n- `useLocalExtrema`: whether to always have a local minimum and maximum in the viewport (default: false)\n- `blur`: blur for heatmap points (default: 15)\n- `gradient`: object defining gradient stop points for heatmap e.g. `{ 0.4: 'blue', 0.8: 'orange', 1.0: 'red' }` (default: `simpleheat` package default gradient)\n- `onStatsUpdate`: called on redraw with a { min, max } object containing:\n  - The local minimum intensity in the viewport\n  - The local maximum intensity in the viewport\n\n## Contributing\n\nSee [CONTRIBUTING.md](https://www.github.com/OpenGov/react-leaflet-heatmap-layer/blob/master/CONTRIBUTING.md)\n\n## Credits\n\nThis package was inspired by [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat).\n\n## License\n\n`react-leaflet-heatmap-layer` is MIT licensed.\n\nSee [LICENSE.md](https://www.github.com/OpenGov/react-leaflet-heatmap-layer/blob/master/LICENSE.md) for details.\n","readmeFilename":"README.md"}