{"_id":"@asymmetrik/angular2-leaflet-d3","_rev":"6-3c51c91a47248bd633ca54874ae3246b","name":"@asymmetrik/angular2-leaflet-d3","description":"Angular 2 D3 visualization components for Leaflet","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@asymmetrik/angular2-leaflet-d3","artifactName":"angular2-leaflet-d3","moduleName":"angular2LeafletD3","description":"Angular 2 D3 visualization components for Leaflet","version":"0.0.1","author":{"name":"Asymmetrik, Ltd."},"copyright":"Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved.","license":"MIT","scripts":{"build":"gulp build","dev":"gulp dev"},"main":"dist/bundles/angular2-leaflet-d3.js","module":"dist/index.js","typings":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/Asymmetrik/angular2-leaflet-d3.git"},"peerDependencies":{"@angular/core":">=2","@angular/common":">=2","d3":"4","d3-hexbin":"0.2","leaflet":"1","@asymmetrik/leaflet-d3":"1","@asymmetrik/angular2-leaflet":"2"},"devDependencies":{"@angular/common":"4","@angular/compiler":"4","@angular/compiler-cli":"4","@angular/core":"4","@angular/platform-browser":"4","@angular/platform-browser-dynamic":"4","@angular/router":"4","bootstrap":"3","d3":"4.6","@types/d3":"4.5","d3-hexbin":"0.2","leaflet":"1.0","@types/leaflet":"1.0","@asymmetrik/leaflet-d3":"1","@asymmetrik/angular2-leaflet":"2","core-js":"2.4","rxjs":"5.2","zone.js":"0.8","@types/node":"6","merge2":"1.0","rollup":"0.41","typescript":"2.2","tslint":"4.5","tslint-stylish":"2.1","webpack":"2.3","webpack-dev-server":"2.4","angular2-template-loader":"0.6","css-loader":"0.27","file-loader":"0.10","html-loader":"0.4","resolve-url-loader":"2.0","sass-loader":"6.0","style-loader":"0.16","awesome-typescript-loader":"3.1","url-loader":"0.5","gulp":"3.9","gulp-filter":"5.0","gulp-insert":"0.5","gulp-load-plugins":"1.5","gulp-rename":"1.2","gulp-sourcemaps":"2.4","gulp-typescript":"3.1","gulp-tslint":"7.1","gulp-uglify":"2.1","gulp-util":"3.0","run-sequence":"1.2","through2":"2.0","node-sass":"4.5"},"gitHead":"6825578bdba067547b329a9fdafae0e9152c14b6","bugs":{"url":"https://github.com/Asymmetrik/angular2-leaflet-d3/issues"},"homepage":"https://github.com/Asymmetrik/angular2-leaflet-d3#readme","_id":"@asymmetrik/angular2-leaflet-d3@0.0.1","_shasum":"40f56d14127b38a97e918dcbfaf5e0806ccd18ff","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.5","_npmUser":{"name":"asymmetrik","email":"ryan@asymmetrik.com"},"dist":{"shasum":"40f56d14127b38a97e918dcbfaf5e0806ccd18ff","tarball":"https://registry.npmjs.org/@asymmetrik/angular2-leaflet-d3/-/angular2-leaflet-d3-0.0.1.tgz","integrity":"sha512-WJyXiHwePJq1Kje/px1PIRriEW0dYwQvSOfjhuHrxPPV5Y5Inf7cWhLslshuiMLHD3mmxnmjiKZ7V4WV09DCEw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv/NCHbQoe7ggx8o06fbOVgtnmWh3ZO2l/mtvM4L4AHAIhAIGShq5uzhXzk5ntye2toU2chaq/lOEbgkbpfIwEU+W3"}]},"maintainers":[{"name":"asymmetrik","email":"ryan@asymmetrik.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/angular2-leaflet-d3-0.0.1.tgz_1492804117223_0.3811652685981244"},"deprecated":"@asymmetrik/angular2-leaflet-d3 has been renamed to @asymmetrik/ngx-leaflet-d3"},"0.0.2":{"name":"@asymmetrik/angular2-leaflet-d3","artifactName":"angular2-leaflet-d3","moduleName":"angular2LeafletD3","description":"Angular 2 D3 visualization components for Leaflet","version":"0.0.2","author":{"name":"Asymmetrik, Ltd."},"copyright":"Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved.","license":"MIT","scripts":{"build":"gulp build","dev":"gulp dev"},"main":"dist/bundles/angular2-leaflet-d3.js","module":"dist/index.js","typings":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/Asymmetrik/angular2-leaflet-d3.git"},"peerDependencies":{"@angular/core":">=2","@angular/common":">=2","d3":"4","d3-hexbin":"0.2","leaflet":"1","@asymmetrik/leaflet-d3":"2","@asymmetrik/angular2-leaflet":"2"},"devDependencies":{"@angular/common":"4","@angular/compiler":"4","@angular/compiler-cli":"4","@angular/core":"4","@angular/platform-browser":"4","@angular/platform-browser-dynamic":"4","@angular/router":"4","bootstrap":"3","d3":"4.6","@types/d3":"4.5","d3-hexbin":"0.2","leaflet":"1.0","@types/leaflet":"1.0","@asymmetrik/leaflet-d3":"2","@asymmetrik/angular2-leaflet":"2","core-js":"2.4","rxjs":"5.2","zone.js":"0.8","@types/node":"6","merge2":"1.0","rollup":"0.41","typescript":"2.2","tslint":"4.5","tslint-stylish":"2.1","webpack":"2.3","webpack-dev-server":"2.4","angular2-template-loader":"0.6","css-loader":"0.27","file-loader":"0.10","html-loader":"0.4","resolve-url-loader":"2.0","sass-loader":"6.0","style-loader":"0.16","awesome-typescript-loader":"3.1","url-loader":"0.5","gulp":"3.9","gulp-filter":"5.0","gulp-insert":"0.5","gulp-load-plugins":"1.5","gulp-rename":"1.2","gulp-sourcemaps":"2.4","gulp-typescript":"3.1","gulp-tslint":"7.1","gulp-uglify":"2.1","gulp-util":"3.0","run-sequence":"1.2","through2":"2.0","node-sass":"4.5"},"gitHead":"85bf4c81db7d2d3db89bd4e4fe8a4dfbb333b3cf","bugs":{"url":"https://github.com/Asymmetrik/angular2-leaflet-d3/issues"},"homepage":"https://github.com/Asymmetrik/angular2-leaflet-d3#readme","_id":"@asymmetrik/angular2-leaflet-d3@0.0.2","_shasum":"3e2dda01f31e782f23186579edb8370dd7423330","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.5","_npmUser":{"name":"asymmetrik","email":"ryan@asymmetrik.com"},"dist":{"shasum":"3e2dda01f31e782f23186579edb8370dd7423330","tarball":"https://registry.npmjs.org/@asymmetrik/angular2-leaflet-d3/-/angular2-leaflet-d3-0.0.2.tgz","integrity":"sha512-FIGIqoI7NDemxpoos55nPkhfeZTrpE9JiZNQ/D+xR6LAUb37ooSUdLoWSGPcmfEC2/XuWhO1VACiNksME6ko/w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvrtvGvjfnTPurWhA9kbIKd+iUOrlE7Blx2gKXa6D4YAiEA738xYneEP2RpY1aKfH0dorT2onTOF3SAwYuRx4EVpQ4="}]},"maintainers":[{"name":"asymmetrik","email":"ryan@asymmetrik.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/angular2-leaflet-d3-0.0.2.tgz_1493064278660_0.17024077218957245"},"deprecated":"@asymmetrik/angular2-leaflet-d3 has been renamed to @asymmetrik/ngx-leaflet-d3"},"0.0.3":{"name":"@asymmetrik/angular2-leaflet-d3","artifactName":"angular2-leaflet-d3","moduleName":"angular2LeafletD3","description":"Angular 2 D3 visualization components for Leaflet","version":"0.0.3","author":{"name":"Asymmetrik, Ltd."},"copyright":"Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved.","license":"MIT","scripts":{"build":"gulp build","dev":"gulp dev"},"main":"dist/bundles/angular2-leaflet-d3.js","module":"dist/index.js","typings":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/Asymmetrik/angular2-leaflet-d3.git"},"peerDependencies":{"@angular/core":">=2","@angular/common":">=2","d3":"4","d3-hexbin":"0.2","leaflet":"1","@asymmetrik/leaflet-d3":"3","@asymmetrik/angular2-leaflet":"2"},"devDependencies":{"@angular/common":"4","@angular/compiler":"4","@angular/compiler-cli":"4","@angular/core":"4","@angular/platform-browser":"4","@angular/platform-browser-dynamic":"4","@angular/router":"4","bootstrap":"3","d3":"4.10","@types/d3":"4.10","d3-hexbin":"0.2","leaflet":"1","@types/leaflet":"1","@asymmetrik/leaflet-d3":"3","@asymmetrik/angular2-leaflet":"2","core-js":"2.4","rxjs":"5.2","zone.js":"0.8","@types/node":"6","merge2":"1.0","rollup":"0.41","typescript":"2.2","tslint":"4.5","tslint-stylish":"2.1","webpack":"2","webpack-dev-server":"2","angular2-template-loader":"0.6","css-loader":"0.27","file-loader":"0.10","html-loader":"0.4","resolve-url-loader":"2","sass-loader":"6","style-loader":"0.16","awesome-typescript-loader":"3","url-loader":"0.5","gulp":"3.9","gulp-filter":"5.0","gulp-insert":"0.5","gulp-load-plugins":"1.5","gulp-rename":"1.2","gulp-sourcemaps":"2.4","gulp-typescript":"3.1","gulp-tslint":"7.1","gulp-uglify":"2.1","gulp-util":"3.0","run-sequence":"1.2","through2":"2.0","node-sass":"4.5"},"gitHead":"d43f4f511e58eb8207418898366436062ff62d6e","bugs":{"url":"https://github.com/Asymmetrik/angular2-leaflet-d3/issues"},"homepage":"https://github.com/Asymmetrik/angular2-leaflet-d3#readme","_id":"@asymmetrik/angular2-leaflet-d3@0.0.3","_shasum":"8aa4cf8155e02751ece787daca531ef1f5d39c0a","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.5","_npmUser":{"name":"rblace","email":"ryan@asymmetrik.com"},"dist":{"shasum":"8aa4cf8155e02751ece787daca531ef1f5d39c0a","tarball":"https://registry.npmjs.org/@asymmetrik/angular2-leaflet-d3/-/angular2-leaflet-d3-0.0.3.tgz","integrity":"sha512-0NoScjjn+6ozpMvA50w0SV/kuca15rmKH49Nb4HEIxAX/j4kUrBuT+JdGEcUCBxNvC+bbkajTz036AY+5HIYSw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHj37NY9O7RqpUaUHkAa3KKy6rHxNEwjiWlXByDrTBmZAiEAujNsiDyajdHuj+XDZ8rjjSSSviRG/M9UMN53sRoPSvQ="}]},"maintainers":[{"email":"ryan@asymmetrik.com","name":"rblace"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular2-leaflet-d3-0.0.3.tgz_1502885456224_0.7107226587831974"},"deprecated":"@asymmetrik/angular2-leaflet-d3 has been renamed to @asymmetrik/ngx-leaflet-d3"}},"readme":"# @asymmetrik/angular2-leaflet-d3\n\n[![Build Status][travis-image]][travis-url]\n\n> @asymmetrik/leaflet-d3 extension to the @asymmetrik/angular2-leaflet package for Angular 2+\n> Provides @asymmetrik/leaflet-d3 integration into Angular 2 projects. Compatible with Leaflet v1.0.x and @asymmetrik/leaflet-d3 v3.x\n\n> Now supports Angular v4, Ahead-of-Time compilation (AOT), and use in Angular-CLI based projects\n\n## Table of Contents\n- [Install](#install)\n- [Usage](#usage)\n- [API](#api)\n- [Contribute](#contribute)\n- [License](#license)\n- [Credits](#credits)\n\n## Install\nInstall the package and its peer dependencies via npm:\n```\nnpm install d3\nnpm install leaflet\nnpm install @asymmetrik/leaflet-d3\nnpm install @asymmetrik/angular2-leaflet\nnpm install @asymmetrik/angular2-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\nnpm install @types/leaflet\n```\n\nIf you want to run the demo, clone the repository, perform an ```npm install```, ```gulp dev``` and then go to http://localhost:9000/src/demo/index.html\n\n\n## Usage\n\nThis plugin is used with the [Angular 2 Leaflet plugin](https://github.com/Asymmetrik/angular2-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<div leaflet style=\"height: 300px;\"\n\t [leafletOptions]=\"options\"\n\t [leafletHexbin]=\"hexbinData\"\n</div>\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<div leaflet style=\"height: 300px;\"\n\t [leafletOptions]=\"options\">\n\t \n\t <div [leafletHexbin]=\"hexbinData1\" [leafletHexbinOptions]=\"hexbinOptions1\"></div>\n     <div [leafletHexbin]=\"hexbinData2\" [leafletHexbinOptions]=\"hexbinOptions2\"></div>\n\n</div>\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 @asymmetrik/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<div leaflet style=\"height: 300px;\"\n     [leafletOptions]=\"options\"\n     leafletPing\n     (leafletPingObserver)=\"setLeafletPingObserver($event)\">\n</div>\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\nThis section includes more detailed documentation of the functionality of the directives included in this library.\n\n### Hexbins\nThere are several input and output bindings for the hexbin layer.\nThey are documented and demonstrated below.\n\n```html\n<div leaflet style=\"height: 300px;\"\n\t [leafletOptions]=\"options\"\n\t [leafletHexbin]=\"hexbinData\"\n\t [leafletHexbinOptions]=\"hexbinOptions\"\n\t (leafletHexbinMouseover)=\"mouseover($event)\"\n\t (leafletHexbinMouseout)=\"mouseout($event)\"\n\t (leafletHexbinClick)=\"click($event)\"\n\t (leafletHexbinLayerReady)=\"ready($event)\">\n</div>\n```\n\n#### leafletHexbin\nInput binding for the data array that is aggregated by the hexbins.\n\n#### leafletHexbinOptions\nInput binding for hexbin options (see [Leaflet D3's](https://github.com/Asymmetrik/leaflet-d3) docs).\nThis allows you to set some basic settings for the hexbin layer.\n\n#### leafletHexbinMouseover\nEvent emitter/output binding for hexbin mouseover event (see [Leaflet D3's](https://github.com/Asymmetrik/leaflet-d3) docs).\nThis event is fired when the mouse hovers over a hexbin.\n\n#### leafletHexbinMouseout\nEvent emitter/output binding for hexbin mouseout event (see [Leaflet D3's](https://github.com/Asymmetrik/leaflet-d3) docs).\nThis event is fired when the mouse leaves a hexbin.\n\n#### leafletHexbinClick\nEvent emitter/output binding for hexbin click event (see [Leaflet D3's](https://github.com/Asymmetrik/leaflet-d3) docs).\nThis event is fired when the mouse clicks on a hexbin.\n\n#### leafletHexbinLayerReady\nEvent emitter/output binding for hexbin layer ready event.\nThis event is emitted after the hexbin layer has been created and includes a reference to the layer.\nThis provides an opportunity to do any advanced configuration not already supported by the directive.\n\n\n### Pings\nThere is an input binding and an output binding for the ping layer.\nThey are documented and demonstrated below.\n\n```js\n<div leaflet style=\"height: 300px;\"\n     [leafletOptions]=\"options\"\n     leafletPing\n     [leafletPingOptions]=\"pingOptions\"\n     (leafletPingObserver)=\"setLeafletPingObserver($event)\">\n</div>\n```\n\n#### leafletPing\nThis is the directive attribute that activates the directive.\n\n#### leafletPingOptions\nInput binding for the leaflet ping layer options (see [Leaflet D3's](https://github.com/Asymmetrik/leaflet-d3) docs).\n\n#### leafletPingObserver\nEvent emitter/output binding for ping layer observer.\nThe observer is how pings are emitted to the layer.\n\n```js\nsetLeafletPingObserver(observer: Observer<any>) {\n\n\tthis.leafletPingObserver = observer;\n\n\t// Start the ping loop\n\tsetTimeout(this.generatePings.bind(this), 100);\n\n}\n\nprivate generatePings() {\n\n\tthis.leafletPingObserver.next({\n\t\tdata: [ 40, 50 ]\n\t});\n\n\tsetTimeout(this.generatePings.bind(this), 100);\n}\n```\n\n\n## Contribute\nPRs accepted. If you are part of Asymmetrik, please make contributions on feature branches off of the ```develop``` branch. If you are outside of Asymmetrik, please fork our repo to make contributions.\n\n\n## License\nSee LICENSE in repository 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\n\n[travis-url]: https://travis-ci.org/Asymmetrik/angular2-leaflet-d3/\n[travis-image]: https://travis-ci.org/Asymmetrik/angular2-leaflet-d3.svg\n","maintainers":[{"email":"ryan@asymmetrik.com","name":"rblace"}],"time":{"modified":"2022-06-12T14:49:39.171Z","created":"2017-04-21T19:48:37.940Z","0.0.1":"2017-04-21T19:48:37.940Z","0.0.2":"2017-04-24T20:04:40.653Z","0.0.3":"2017-08-16T12:10:57.299Z"},"homepage":"https://github.com/Asymmetrik/angular2-leaflet-d3#readme","repository":{"type":"git","url":"git+https://github.com/Asymmetrik/angular2-leaflet-d3.git"},"author":{"name":"Asymmetrik, Ltd."},"bugs":{"url":"https://github.com/Asymmetrik/angular2-leaflet-d3/issues"},"license":"MIT","readmeFilename":"README.md"}