{"_id":"@bluehalo/ngx-leaflet-d3","_rev":"3-cef068ac49cbc048cd5db59e979f852c","name":"@bluehalo/ngx-leaflet-d3","dist-tags":{"latest":"22.0.0"},"versions":{"21.0.0":{"name":"@bluehalo/ngx-leaflet-d3","version":"21.0.0","author":{"name":"BlueHalo"},"license":"MIT","_id":"@bluehalo/ngx-leaflet-d3@21.0.0","maintainers":[{"name":"reblace","email":"reblace@gmail.com"},{"name":"ekdeveloper","email":"eugene.koon@bluehalo.com"},{"name":"ashin-bluehalo","email":"andrew.shin@bluehalo.com"},{"name":"shane-bh","email":"shane.oneill@bluehalo.com"},{"name":"rodmercad","email":"rnmercado@gmail.com"}],"homepage":"https://github.com/bluehalo/ngx-leaflet-d3#readme","bugs":{"url":"https://github.com/bluehalo/ngx-leaflet-d3/issues"},"dist":{"shasum":"529047e0ea91ae6fa1a899285fa887642f0a520c","tarball":"https://registry.npmjs.org/@bluehalo/ngx-leaflet-d3/-/ngx-leaflet-d3-21.0.0.tgz","fileCount":7,"integrity":"sha512-Rxd9jj1kM6pVk2WLopKZL70sHEL+CtmASo7lIb5O9ufgMQNr3s3+CIHu6CIBzcksgsiuSKhY3cWVg1xECcdqrg==","signatures":[{"sig":"MEUCIB5axhgFMKjZXzNLA9k3S1JBto6WgeJz4T47qmSFRSXCAiEAuqbuwjyhPJsoe0q4OgfQm3FbydJX4HDB/TPLUnT1qtM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31769},"type":"module","module":"fesm2022/bluehalo-ngx-leaflet-d3.mjs","exports":{".":{"types":"./types/bluehalo-ngx-leaflet-d3.d.ts","default":"./fesm2022/bluehalo-ngx-leaflet-d3.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"3e6388d4d4a1a3cbd150a25beaa39356147e5372","typings":"types/bluehalo-ngx-leaflet-d3.d.ts","_npmUser":{"name":"reblace","email":"reblace@gmail.com"},"copyright":"Copyright BlueHalo 2007-2026 - All Rights Reserved.","repository":{"url":"git+https://github.com/bluehalo/ngx-leaflet-d3.git","type":"git"},"_npmVersion":"10.9.7","description":"Angular D3 visualization components for Leaflet","directories":{},"sideEffects":false,"_nodeVersion":"22.22.2","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"d3":"7","leaflet":"1","d3-hexbin":"0.2","@angular/core":"21","@angular/common":"21","@bluehalo/leaflet-d3":"6","@bluehalo/ngx-leaflet":"21"},"_npmOperationalInternal":{"tmp":"tmp/ngx-leaflet-d3_21.0.0_1775862209798_0.540844878730979","host":"s3://npm-registry-packages-npm-production"}},"21.0.1":{"name":"@bluehalo/ngx-leaflet-d3","version":"21.0.1","author":{"name":"BlueHalo"},"license":"MIT","_id":"@bluehalo/ngx-leaflet-d3@21.0.1","maintainers":[{"name":"reblace","email":"reblace@gmail.com"},{"name":"ekdeveloper","email":"eugene.koon@bluehalo.com"},{"name":"ashin-bluehalo","email":"andrew.shin@bluehalo.com"},{"name":"shane-bh","email":"shane.oneill@bluehalo.com"},{"name":"rodmercad","email":"rnmercado@gmail.com"}],"homepage":"https://github.com/bluehalo/ngx-leaflet-d3#readme","bugs":{"url":"https://github.com/bluehalo/ngx-leaflet-d3/issues"},"dist":{"shasum":"ef96d4889e53e54f271c49f3c141a7b8bee449ce","tarball":"https://registry.npmjs.org/@bluehalo/ngx-leaflet-d3/-/ngx-leaflet-d3-21.0.1.tgz","fileCount":7,"integrity":"sha512-ImJd7w/Vix+JQjQ5Vr0akbir9aY2r1dTsMw4SBi2QW69LiIzPX2yAgic6ZXpTmhmcm2xML72qN8z7MQbYaeQgQ==","signatures":[{"sig":"MEYCIQDFKaa0tMisKhbwnR0KOYQtcnSQPcstQax5AJl2YkiR0QIhAPPN6uHL9lkfYIXilKB9JdqclSyQo+Phw31QlNSadcDU","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29729},"type":"module","module":"fesm2022/bluehalo-ngx-leaflet-d3.mjs","exports":{".":{"types":"./types/bluehalo-ngx-leaflet-d3.d.ts","default":"./fesm2022/bluehalo-ngx-leaflet-d3.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"048dfb617204317fd593a7589a53b7f55c8a48ae","typings":"types/bluehalo-ngx-leaflet-d3.d.ts","_npmUser":{"name":"reblace","email":"reblace@gmail.com"},"copyright":"Copyright (c) BlueHalo LLC","repository":{"url":"git+https://github.com/bluehalo/ngx-leaflet-d3.git","type":"git"},"_npmVersion":"10.9.7","description":"Angular D3 visualization components for Leaflet","directories":{},"sideEffects":false,"_nodeVersion":"22.22.2","dependencies":{"tslib":"^2.8.0"},"_hasShrinkwrap":false,"peerDependencies":{"d3":"7","leaflet":"1","d3-hexbin":"0.2","@angular/core":"21","@angular/common":"21","@bluehalo/leaflet-d3":"6","@bluehalo/ngx-leaflet":"21"},"_npmOperationalInternal":{"tmp":"tmp/ngx-leaflet-d3_21.0.1_1778077609959_0.26433483498349","host":"s3://npm-registry-packages-npm-production"}},"22.0.0":{"name":"@bluehalo/ngx-leaflet-d3","description":"Angular D3 visualization components for Leaflet","version":"22.0.0","author":{"name":"BlueHalo"},"copyright":"Copyright (c) BlueHalo LLC","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bluehalo/ngx-leaflet-d3.git"},"peerDependencies":{"@angular/common":"22","@angular/core":"22","@bluehalo/leaflet-d3":"6","@bluehalo/ngx-leaflet":"22","d3":"7","d3-hexbin":"0.2","leaflet":"1"},"dependencies":{"tslib":"^2.8.0"},"module":"fesm2022/bluehalo-ngx-leaflet-d3.mjs","typings":"types/bluehalo-ngx-leaflet-d3.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/bluehalo-ngx-leaflet-d3.d.ts","default":"./fesm2022/bluehalo-ngx-leaflet-d3.mjs"}},"sideEffects":false,"type":"module","gitHead":"88ea36fa989fcb8cfb268001751c9467172fa276","_id":"@bluehalo/ngx-leaflet-d3@22.0.0","bugs":{"url":"https://github.com/bluehalo/ngx-leaflet-d3/issues"},"homepage":"https://github.com/bluehalo/ngx-leaflet-d3#readme","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-OtfN/esHo+vsiAXtTSO/uet3G2IUW7aqL5ruA+in9N9H4IMCRFg/56MsRqDAgdkS+qQgWtdllFn85NxsY3m5cw==","shasum":"8df976c3e44515dd26b9fe032bd6dfcfb6af200b","tarball":"https://registry.npmjs.org/@bluehalo/ngx-leaflet-d3/-/ngx-leaflet-d3-22.0.0.tgz","fileCount":7,"unpackedSize":29767,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD1nGEtr7lUY5lvaXMBm6QwG+NEoh69xmyONdNJIhjViwIgcqXgQQTZTEQhKkr9mu4CE26dESwVrjErI0Io9YLWZm0="}]},"_npmUser":{"name":"reblace","email":"reblace@gmail.com"},"directories":{},"maintainers":[{"name":"reblace","email":"reblace@gmail.com"},{"name":"ekdeveloper","email":"eugene.koon@avinc.com"},{"name":"ashin-bluehalo","email":"andrew.shin@bluehalo.com"},{"name":"shane-bh","email":"shane.oneill@bluehalo.com"},{"name":"rodmercad","email":"rnmercado@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-leaflet-d3_22.0.0_1781619188931_0.9045942583547015"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T23:03:29.730Z","modified":"2026-06-16T14:13:09.198Z","21.0.0":"2026-04-10T23:03:29.945Z","21.0.1":"2026-05-06T14:26:50.155Z","22.0.0":"2026-06-16T14:13:09.061Z"},"bugs":{"url":"https://github.com/bluehalo/ngx-leaflet-d3/issues"},"author":{"name":"BlueHalo"},"license":"MIT","homepage":"https://github.com/bluehalo/ngx-leaflet-d3#readme","repository":{"type":"git","url":"git+https://github.com/bluehalo/ngx-leaflet-d3.git"},"description":"Angular D3 visualization components for Leaflet","maintainers":[{"name":"reblace","email":"reblace@gmail.com"},{"name":"ekdeveloper","email":"eugene.koon@avinc.com"},{"name":"ashin-bluehalo","email":"andrew.shin@bluehalo.com"},{"name":"shane-bh","email":"shane.oneill@bluehalo.com"},{"name":"rodmercad","email":"rnmercado@gmail.com"}],"readme":"# @bluehalo/ngx-leaflet-d3\n\n[](https://www.npmjs.com/package/@bluehalo/ngx-leaflet-d3)\n[](https://github.com/bluehalo/ngx-leaflet-d3/actions/workflows/ci.yml)\n[](https://codecov.io/gh/bluehalo/ngx-leaflet-d3)\n\n> [@bluehalo/leaflet-d3](https://github.com/bluehalo/leaflet-d3) extension to the [@bluehalo/ngx-leaflet](https://github.com/bluehalo/ngx-leaflet) package for Angular.\n> Provides D3 visualization layer integration (hexbins, pings) into Angular projects.\n> Compatible with Leaflet v1.x, @bluehalo/leaflet-d3 v6.x, and D3 v7.x\n\n> Supports Angular v21 with standalone directives\n\n## Table of Contents\n- [Install](#install)\n- [Usage](#usage)\n- [API](docs/API.md)\n- [Contribute](#contribute)\n- [License](#license)\n- [Credits](#credits)\n\n\n## Install\nInstall the package and its peer dependencies via npm:\n```\nnpm install d3 d3-hexbin leaflet @bluehalo/leaflet-d3 @bluehalo/ngx-leaflet @bluehalo/ngx-leaflet-d3\n```\n\nIf you intend to use this library in a typescript project (utilizing the typings), you will need to also install the leaflet typings via npm:\n```\nnpm install @types/d3 @types/leaflet\n```\n\nIf you want to run the demo, clone the repository, perform an ```npm install```, ```npm run demo``` and then go to http://localhost:4200\n\n\n## Usage\nThis plugin is used with the [Angular.io Leaflet plugin](https://github.com/bluehalo/ngx-leaflet).\n\n### Hexbins\nHexbins allow you to aggregate data into bins with a hexagon geometry.\nThe hexbin layer allows you to bind characteristics of the bound data to both the size and color of the drawn bin within the bin grid element.\n\n#### Styling\nYou'll want to style the hexbins at least with a stroke size/color.\n\n```\n.hexbin-hexagon {\n\tstroke: #000;\n\tstroke-width: .5px;\n}\n```\n\n#### Basic Example\nTo create a hexbin layer on a map, use the ```leafletHexbin``` attribute directive. This directive must appear after the ```leaflet``` directive.\nThis attribute directive also acts as an input binding for the hexbin data array. \n\n```html\n\n
\n```\n\n```js\nhexbinData: [ number, number ][] = [...];\n```\n\n#### Multiple Hexbin Layers on the Same Map\nYou can also draw multiple hexbin layers on the same map (see the demo example).\nIn this case, you'd want to have multiple hexbin options so you can set the colors (or sizes) differently.\nAll you need to do is bound the ```leafletHexbin``` directive to a child div of the div with the ```leaflet``` directive.\n\n```html\n\n```\n\n```js\nhexbinOptions1: L.HexbinLayerConfig = { radius: 12,\tradiusRange: [ 4, 11 ],\tcolorRange: [ 'white', 'tomato' ] };\nhexbinOptions2: L.HexbinLayerConfig = { radius: 12,\tradiusRange: [ 4, 11 ],\tcolorRange: [ 'white', 'steelblue' ] };\n\nhexbinData1: [ number, number ][] = [...];\nhexbinData2: [ number, number ][] = [...];\n```\n\n> It's important to note that for performance reasons, we're keeping all change detection strategies default.\n> This means that all bound data structures must be treated as immutable.\n> For changes to be detected, instance equality must change.\n\nSee the README for @bluehalo/leaflet-d3 for details regarding the default options and default data schema.\n\n\n### Pings\nTo create a ping layer on a map, use the ```leafletPing``` attribute directive. This directive must appear after the ```leaflet``` directive.\n\n```html\n\n
\n```\n\nThe output binding for ```leafletPingObserver``` provides an Rxjs Observer that you will use to emit ping objects to the directive.\n\n\n## API\n\nFull API documentation is in [docs/API.md](docs/API.md). It covers:\n- `[leafletHexbin]` — data input, options, mouse events (mouseover, mouseout, click), and layer ready callback\n- `[leafletPing]` — directive activation, options input, and the RxJS observer pattern for emitting pings\n\n\n## Contribute\nPRs accepted. Please make contributions on feature branches and open a pull request against `master`.\n\n\n## License\nSee [LICENSE](LICENSE) for details.\n\n\n## Credits\n**[Leaflet](http://leafletjs.com/)** Is an awesome mapping package.\n**[D3](https://d3js.org)** Is an awesome visualization kernel.\n","readmeFilename":"README.md"}