@bluehalo/ngx-leaflet-d3 21.0.0

package/CHANGES.md

@@ -0,0 +1,30 @@
+# Changelog
+
+## 21.0.0
+- Angular 21
+- Migrated package to `@bluehalo/ngx-leaflet-d3` namespace (previously `@asymmetrik/ngx-leaflet-d3`)
+- Updated peer dependency `@asymmetrik/ngx-leaflet` → `@bluehalo/ngx-leaflet@21`
+- Updated peer dependency `@asymmetrik/leaflet-d3` → `@bluehalo/leaflet-d3@6`
+- Converted directives to standalone (`LeafletHexbinDirective`, `LeafletPingDirective`)
+- Fix: replace deprecated `Observable.create()` with `new Observable()`
+- CI: replace Travis CI with GitHub Actions
+
+## 14.0.0
+- Angular 14
+
+## 13.0.0
+- Angular 13
+- D3 7.x
+
+## 6.0.0
+- Angular 10
+
+## 4.0.0
+- Angular 8
+
+## 3.0.0
+- Angular 7 support
+- D3 5.x support
+- Started using the HtmlWebpackPlugin to generate the index.html file in the dist dir, so you don't need to add `/src/demo` to the end of the URL to hit the demo.
+- Migrated to npm scripts from gulp for build system
+- Upgrade to Webpack 4.x for demo

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2007-2022 Asymmetrik Ltd, a BlueHalo Company
+
+Permission 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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE 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.
+

package/README.md

@@ -0,0 +1,218 @@
+# @bluehalo/ngx-leaflet-d3
+
+[![CI](https://github.com/bluehalo/ngx-leaflet-d3/actions/workflows/ci.yml/badge.svg)](https://github.com/bluehalo/ngx-leaflet-d3/actions/workflows/ci.yml)
+
+> [@bluehalo/leaflet-d3](https://github.com/bluehalo/leaflet-d3) extension to the [@bluehalo/ngx-leaflet](https://github.com/bluehalo/ngx-leaflet) package for Angular.
+> Provides D3 visualization layer integration (hexbins, pings) into Angular projects.
+> Compatible with Leaflet v1.x, @bluehalo/leaflet-d3 v6.x, and D3 v7.x
+
+> Supports Angular v21 with standalone directives
+
+## Table of Contents
+- [Install](#install)
+- [Usage](#usage)
+- [API](#api)
+- [Contribute](#contribute)
+- [License](#license)
+- [Credits](#credits)
+
+
+## Install
+Install the package and its peer dependencies via npm:
+```
+npm install d3 d3-hexbin leaflet @bluehalo/leaflet-d3 @bluehalo/ngx-leaflet @bluehalo/ngx-leaflet-d3
+```
+
+If you intend to use this library in a typescript project (utilizing the typings), you will need to also install the leaflet typings via npm:
+```
+npm install @types/d3 @types/leaflet
+```
+
+If you want to run the demo, clone the repository, perform an ```npm install```, ```npm run demo``` and then go to http://localhost:4200
+
+
+## Usage
+This plugin is used with the [Angular.io Leaflet plugin](https://github.com/bluehalo/ngx-leaflet).
+
+### Hexbins
+Hexbins allow you to aggregate data into bins with a hexagon geometry.
+The 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.
+
+#### Styling
+You'll want to style the hexbins at least with a stroke size/color.
+
+```
+.hexbin-hexagon {
+	stroke: #000;
+	stroke-width: .5px;
+}
+```
+
+#### Basic Example
+To create a hexbin layer on a map, use the ```leafletHexbin``` attribute directive. This directive must appear after the ```leaflet``` directive.
+This attribute directive also acts as an input binding for the hexbin data array. 
+
+```html
+<div leaflet style="height: 300px;"
+	 [leafletOptions]="options"
+	 [leafletHexbin]="hexbinData">
+</div>
+```
+
+```js
+hexbinData: [ number, number ][] = [...];
+```
+
+#### Multiple Hexbin Layers on the Same Map
+You can also draw multiple hexbin layers on the same map (see the demo example).
+In this case, you'd want to have multiple hexbin options so you can set the colors (or sizes) differently.
+All you need to do is bound the ```leafletHexbin``` directive to a child div of the div with the ```leaflet``` directive.
+
+```html
+<div leaflet style="height: 300px;"
+	 [leafletOptions]="options">
+	 
+	 <div [leafletHexbin]="hexbinData1" [leafletHexbinOptions]="hexbinOptions1"></div>
+     <div [leafletHexbin]="hexbinData2" [leafletHexbinOptions]="hexbinOptions2"></div>
+
+</div>
+```
+
+```js
+hexbinOptions1: L.HexbinLayerConfig = { radius: 12,	radiusRange: [ 4, 11 ],	colorRange: [ 'white', 'tomato' ] };
+hexbinOptions2: L.HexbinLayerConfig = { radius: 12,	radiusRange: [ 4, 11 ],	colorRange: [ 'white', 'steelblue' ] };
+
+hexbinData1: [ number, number ][] = [...];
+hexbinData2: [ number, number ][] = [...];
+```
+
+> It's important to note that for performance reasons, we're keeping all change detection strategies default.
+> This means that all bound data structures must be treated as immutable.
+> For changes to be detected, instance equality must change.
+
+See the README for @bluehalo/leaflet-d3 for details regarding the default options and default data schema.
+
+
+### Pings
+To create a ping layer on a map, use the ```leafletPing``` attribute directive. This directive must appear after the ```leaflet``` directive.
+
+```html
+<div leaflet style="height: 300px;"
+     [leafletOptions]="options"
+     leafletPing
+     (leafletPingObserver)="setLeafletPingObserver($event)">
+</div>
+```
+
+The output binding for ```leafletPingObserver``` provides an Rxjs Observer that you will use to emit ping objects to the directive.
+
+
+## API
+This section includes more detailed documentation of the functionality of the directives included in this library.
+
+### Hexbins
+There are several input and output bindings for the hexbin layer.
+They are documented and demonstrated below.
+
+```html
+<div leaflet style="height: 300px;"
+	 [leafletOptions]="options"
+	 [leafletHexbin]="hexbinData"
+	 [leafletHexbinOptions]="hexbinOptions"
+	 (leafletHexbinMouseover)="mouseover($event)"
+	 (leafletHexbinMouseout)="mouseout($event)"
+	 (leafletHexbinClick)="click($event)"
+	 (leafletHexbinLayerReady)="ready($event)">
+</div>
+```
+
+#### leafletHexbin
+Input binding for the data array that is aggregated by the hexbins.
+
+#### leafletHexbinOptions
+Input binding for hexbin options (see [Leaflet D3's](https://github.com/bluehalo/leaflet-d3) docs).
+This allows you to set some basic settings for the hexbin layer.
+
+#### leafletHexbinMouseover
+Event emitter/output binding for hexbin mouseover event (see [Leaflet D3's](https://github.com/bluehalo/leaflet-d3) docs).
+This event is fired when the mouse hovers over a hexbin.
+
+#### leafletHexbinMouseout
+Event emitter/output binding for hexbin mouseout event (see [Leaflet D3's](https://github.com/bluehalo/leaflet-d3) docs).
+This event is fired when the mouse leaves a hexbin.
+
+#### leafletHexbinClick
+Event emitter/output binding for hexbin click event (see [Leaflet D3's](https://github.com/bluehalo/leaflet-d3) docs).
+This event is fired when the mouse clicks on a hexbin.
+
+#### leafletHexbinLayerReady
+Event emitter/output binding for hexbin layer ready event.
+This event is emitted after the hexbin layer has been created and includes a reference to the layer.
+This provides an opportunity to do any advanced configuration not already supported by the directive.
+
+
+### Pings
+There is an input binding and an output binding for the ping layer.
+They are documented and demonstrated below.
+
+```html
+<div leaflet style="height: 300px;"
+     [leafletOptions]="options"
+     leafletPing
+     [leafletPingOptions]="pingOptions"
+     (leafletPingObserver)="setLeafletPingObserver($event)">
+</div>
+```
+
+#### leafletPing
+This is the directive attribute that activates the directive.
+
+#### leafletPingOptions
+Input binding for the leaflet ping layer options (see [Leaflet D3's](https://github.com/bluehalo/leaflet-d3) docs).
+
+#### leafletPingObserver
+Event emitter/output binding for ping layer observer.
+The observer is how pings are emitted to the layer.
+
+```js
+setLeafletPingObserver(observer: Observer<any>) {
+
+	this.leafletPingObserver = observer;
+
+	// Start the ping loop
+	setTimeout(this.generatePings.bind(this), 100);
+
+}
+
+private generatePings() {
+
+	this.leafletPingObserver.next({
+		data: [ 40, 50 ]  // [ lng, lat ]
+	});
+
+	setTimeout(this.generatePings.bind(this), 100);
+}
+```
+
+The data schema for pings is: 
+```js
+leafletPingObserver.next(pingData: LeafletPingEvent)
+
+class LeafletPingEvent {
+	data: [lng, lat];
+	cssClass?: string;
+}
+```
+
+
+## Contribute
+PRs accepted. Please make contributions on feature branches and open a pull request against ```master```.
+
+
+## License
+See LICENSE in repository for details.
+
+
+## Credits
+**[Leaflet](http://leafletjs.com/)** Is an awesome mapping package.
+**[D3](https://d3js.org)** Is an awesome visualization kernel.

package/fesm2022/bluehalo-ngx-leaflet-d3.mjs

@@ -0,0 +1,175 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Directive, NgModule } from '@angular/core';
+import * as L from 'leaflet';
+import '@bluehalo/leaflet-d3';
+import * as i1 from '@bluehalo/ngx-leaflet';
+import { LeafletDirectiveWrapper } from '@bluehalo/ngx-leaflet';
+import { Observable } from 'rxjs';
+
+class LeafletHexbinDirective {
+    constructor(leafletDirective, zone) {
+        this.zone = zone;
+        // Hexbin data binding
+        this.hexbinData = [];
+        // Interaction events
+        this.hexbinMouseover = new EventEmitter();
+        this.hexbinMouseout = new EventEmitter();
+        this.hexbinClick = new EventEmitter();
+        // Fired when the layer is created
+        this.layerReady = new EventEmitter();
+        this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
+    }
+    ngOnInit() {
+        this.leafletDirective.init();
+        const map = this.leafletDirective.getMap();
+        this.zone.runOutsideAngular(() => {
+            this.hexbinLayer = L.hexbinLayer(this.hexbinOptions);
+        });
+        // Fire the ready event
+        this.layerReady.emit(this.hexbinLayer);
+        // register for the hexbin events
+        this.hexbinLayer.dispatch().on('mouseover', (event, data) => {
+            this.zone.run(() => {
+                this.hexbinMouseover.emit({ event, data });
+            });
+        });
+        this.hexbinLayer.dispatch().on('mouseout', (event, data) => {
+            this.zone.run(() => {
+                this.hexbinMouseout.emit({ event, data });
+            });
+        });
+        this.hexbinLayer.dispatch().on('click', (event, data) => {
+            this.zone.run(() => {
+                this.hexbinClick.emit({ event, data });
+            });
+        });
+        this.hexbinLayer.addTo(map);
+        // Initialize the data (in case the data was set before the directive was initialized)
+        this.setHexbinData(this.hexbinData);
+    }
+    ngOnChanges(changes) {
+        // Set the new data
+        if (changes['hexbinData']) {
+            this.setHexbinData(changes['hexbinData'].currentValue);
+        }
+    }
+    setHexbinData(data) {
+        // Only if there is a hexbinLayer do we apply the data
+        if (null != this.hexbinLayer) {
+            this.zone.runOutsideAngular(() => {
+                this.hexbinLayer.data(data);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletHexbinDirective, deps: [{ token: i1.LeafletDirective }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: LeafletHexbinDirective, isStandalone: true, selector: "[leafletHexbin]", inputs: { hexbinData: ["leafletHexbin", "hexbinData"], hexbinOptions: ["leafletHexbinOptions", "hexbinOptions"] }, outputs: { hexbinMouseover: "leafletHexbinMouseover", hexbinMouseout: "leafletHexbinMouseout", hexbinClick: "leafletHexbinClick", layerReady: "leafletHexbinLayerReady" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletHexbinDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[leafletHexbin]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.LeafletDirective }, { type: i0.NgZone }], propDecorators: { hexbinData: [{
+                type: Input,
+                args: ['leafletHexbin']
+            }], hexbinOptions: [{
+                type: Input,
+                args: ['leafletHexbinOptions']
+            }], hexbinMouseover: [{
+                type: Output,
+                args: ['leafletHexbinMouseover']
+            }], hexbinMouseout: [{
+                type: Output,
+                args: ['leafletHexbinMouseout']
+            }], hexbinClick: [{
+                type: Output,
+                args: ['leafletHexbinClick']
+            }], layerReady: [{
+                type: Output,
+                args: ['leafletHexbinLayerReady']
+            }] } });
+
+class LeafletPingDirective {
+    constructor(leafletDirective, zone) {
+        this.zone = zone;
+        this.pingObserverReady = new EventEmitter();
+        this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
+    }
+    ngOnInit() {
+        this.leafletDirective.init();
+        const map = this.leafletDirective.getMap();
+        this.zone.runOutsideAngular(() => {
+            this.pingLayer = L.pingLayer(this.pingOptions).addTo(map);
+            // Handle incoming ping events
+            this.pingSource = new Observable((observer) => {
+                this.pingObserver = observer;
+                this.pingObserverReady.emit(this.pingObserver);
+            });
+            this.pingSource.subscribe((event) => {
+                if (null != event) {
+                    this.ping(event.data, event.cssClass);
+                }
+            });
+        });
+    }
+    /**
+     * Submit a ping to the ping layer.
+     *
+     * @param data Contains the lat/lon information to generate the ping
+     * @param cssClass Optional parameter specifying the css class to apply to the ping
+     */
+    ping(data, cssClass) {
+        if (null != this.pingLayer) {
+            this.zone.runOutsideAngular(() => {
+                this.pingLayer.ping(data, cssClass);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletPingDirective, deps: [{ token: i1.LeafletDirective }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: LeafletPingDirective, isStandalone: true, selector: "[leafletPing]", inputs: { pingOptions: ["leafletPingOptions", "pingOptions"] }, outputs: { pingObserverReady: "leafletPingObserver" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletPingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[leafletPing]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.LeafletDirective }, { type: i0.NgZone }], propDecorators: { pingOptions: [{
+                type: Input,
+                args: ['leafletPingOptions']
+            }], pingObserverReady: [{
+                type: Output,
+                args: ['leafletPingObserver']
+            }] } });
+
+class LeafletD3Module {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletD3Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: LeafletD3Module, imports: [LeafletHexbinDirective,
+            LeafletPingDirective], exports: [LeafletHexbinDirective,
+            LeafletPingDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletD3Module }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletD3Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        LeafletHexbinDirective,
+                        LeafletPingDirective
+                    ],
+                    exports: [
+                        LeafletHexbinDirective,
+                        LeafletPingDirective
+                    ]
+                }]
+        }] });
+
+class LeafletPingEvent {
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LeafletD3Module, LeafletHexbinDirective, LeafletPingDirective, LeafletPingEvent };
+//# sourceMappingURL=bluehalo-ngx-leaflet-d3.mjs.map

package/fesm2022/bluehalo-ngx-leaflet-d3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"bluehalo-ngx-leaflet-d3.mjs","sources":["../../../projects/ngx-leaflet-d3/src/lib/hexbin/leaflet-hexbin.directive.ts","../../../projects/ngx-leaflet-d3/src/lib/ping/leaflet-ping.directive.ts","../../../projects/ngx-leaflet-d3/src/lib/leaflet-d3.module.ts","../../../projects/ngx-leaflet-d3/src/lib/ping/leaflet-ping-event.model.ts","../../../projects/ngx-leaflet-d3/src/bluehalo-ngx-leaflet-d3.ts"],"sourcesContent":["import { Directive, EventEmitter, Input, NgZone, OnChanges, OnInit, Output, SimpleChange } from '@angular/core';\n\nimport * as L from 'leaflet';\nimport '@bluehalo/leaflet-d3';\n\nimport { LeafletDirective, LeafletDirectiveWrapper } from '@bluehalo/ngx-leaflet';\n\n\n@Directive({\n    selector: '[leafletHexbin]',\n    standalone: true\n})\nexport class LeafletHexbinDirective\n\timplements OnChanges, OnInit {\n\n\tleafletDirective: LeafletDirectiveWrapper;\n\thexbinLayer: L.HexbinLayer;\n\n\t// Hexbin data binding\n\t@Input('leafletHexbin') hexbinData: any[] = [];\n\n\t// Options binding\n\t@Input('leafletHexbinOptions') hexbinOptions: L.HexbinLayerConfig;\n\n\t// Interaction events\n\t@Output('leafletHexbinMouseover') hexbinMouseover: EventEmitter<any> = new EventEmitter<any>();\n\t@Output('leafletHexbinMouseout') hexbinMouseout: EventEmitter<any> = new EventEmitter<any>();\n\t@Output('leafletHexbinClick') hexbinClick: EventEmitter<any> = new EventEmitter<any>();\n\n\t// Fired when the layer is created\n\t@Output('leafletHexbinLayerReady') layerReady: EventEmitter<L.HexbinLayer> = new EventEmitter<L.HexbinLayer>();\n\n\tconstructor(leafletDirective: LeafletDirective, private zone: NgZone) {\n\t\tthis.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);\n\t}\n\n\tngOnInit() {\n\n\t\tthis.leafletDirective.init();\n\n\t\tconst map = this.leafletDirective.getMap();\n\n\t\tthis.zone.runOutsideAngular(() => {\n\t\t\tthis.hexbinLayer = L.hexbinLayer(this.hexbinOptions);\n\t\t});\n\n\t\t// Fire the ready event\n\t\tthis.layerReady.emit(this.hexbinLayer);\n\n\t\t// register for the hexbin events\n\t\tthis.hexbinLayer.dispatch().on('mouseover', (event: any, data: any) => {\n\t\t\tthis.zone.run(() => {\n\t\t\t\tthis.hexbinMouseover.emit({ event, data });\n\t\t\t});\n\n\t\t});\n\t\tthis.hexbinLayer.dispatch().on('mouseout', (event: any, data: any) => {\n\t\t\tthis.zone.run(() => {\n\t\t\t\tthis.hexbinMouseout.emit({ event, data });\n\t\t\t});\n\t\t});\n\t\tthis.hexbinLayer.dispatch().on('click', (event: any, data: any) => {\n\t\t\tthis.zone.run(() => {\n\t\t\t\tthis.hexbinClick.emit({ event, data });\n\t\t\t});\n\t\t});\n\n\t\tthis.hexbinLayer.addTo(map);\n\n\t\t// Initialize the data (in case the data was set before the directive was initialized)\n\t\tthis.setHexbinData(this.hexbinData);\n\n\t}\n\n\tngOnChanges(changes: { [key: string]: SimpleChange }) {\n\n\t\t// Set the new data\n\t\tif (changes['hexbinData']) {\n\t\t\tthis.setHexbinData(changes['hexbinData'].currentValue);\n\t\t}\n\n\t}\n\n\tprivate setHexbinData(data: any[]) {\n\n\t\t// Only if there is a hexbinLayer do we apply the data\n\t\tif (null != this.hexbinLayer) {\n\t\t\tthis.zone.runOutsideAngular(() => {\n\t\t\t\tthis.hexbinLayer.data(data);\n\t\t\t});\n\t\t}\n\n\t}\n}\n","import { Directive, EventEmitter, Input, NgZone, OnInit, Output } from '@angular/core';\n\nimport { Observable, Observer } from 'rxjs';\nimport * as L from 'leaflet';\nimport '@bluehalo/leaflet-d3';\n\nimport { LeafletDirective, LeafletDirectiveWrapper } from '@bluehalo/ngx-leaflet';\nimport { LeafletPingEvent } from '../ping/leaflet-ping-event.model';\n\n@Directive({\n    selector: '[leafletPing]',\n    standalone: true\n})\nexport class LeafletPingDirective\n\timplements OnInit {\n\n\tleafletDirective: LeafletDirectiveWrapper;\n\n\tpingLayer: L.PingLayer;\n\n\t@Input('leafletPingOptions') pingOptions: L.PingLayerConfig;\n\n\t@Output('leafletPingObserver')\n\tpingObserverReady = new EventEmitter<Observer<LeafletPingEvent>>();\n\n\tpingSource: Observable<LeafletPingEvent>;\n\tpingObserver: Observer<LeafletPingEvent>;\n\n\tconstructor(leafletDirective: LeafletDirective, private zone: NgZone) {\n\t\tthis.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);\n\t}\n\n\tngOnInit() {\n\n\t\tthis.leafletDirective.init();\n\n\t\tconst map = this.leafletDirective.getMap();\n\n\t\tthis.zone.runOutsideAngular(() => {\n\t\t\tthis.pingLayer = L.pingLayer(this.pingOptions).addTo(map);\n\n\t\t\t// Handle incoming ping events\n\t\t\tthis.pingSource = new Observable<LeafletPingEvent>((observer: Observer<LeafletPingEvent>) => {\n\t\t\t\tthis.pingObserver = observer;\n\t\t\t\tthis.pingObserverReady.emit(this.pingObserver);\n\t\t\t});\n\n\t\t\tthis.pingSource.subscribe((event: LeafletPingEvent) => {\n\t\t\t\tif (null != event) {\n\t\t\t\t\tthis.ping(event.data, event.cssClass);\n\t\t\t\t}\n\t\t\t});\n\n\t\t});\n\n\t}\n\n\t/**\n\t * Submit a ping to the ping layer.\n\t *\n\t * @param data Contains the lat/lon information to generate the ping\n\t * @param cssClass Optional parameter specifying the css class to apply to the ping\n\t */\n\tping(data: any, cssClass?: string) {\n\n\t\tif (null != this.pingLayer) {\n\n\t\t\tthis.zone.runOutsideAngular(() => {\n\t\t\t\tthis.pingLayer.ping(data, cssClass);\n\t\t\t});\n\n\t\t}\n\n\t}\n}\n","import { NgModule } from '@angular/core';\n\nimport { LeafletHexbinDirective } from './hexbin/leaflet-hexbin.directive';\nimport { LeafletPingDirective } from './ping/leaflet-ping.directive';\n\n@NgModule({\n\timports: [\n\t\tLeafletHexbinDirective,\n\t\tLeafletPingDirective\n\t],\n\texports: [\n\t\tLeafletHexbinDirective,\n\t\tLeafletPingDirective\n\t]\n})\nexport class LeafletD3Module {\n\n}\n","export class LeafletPingEvent {\n\n\tdata: any;\n\tcssClass?: string;\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@bluehalo/ngx-leaflet-d3",
+  "description": "Angular D3 visualization components for Leaflet",
+  "version": "21.0.0",
+  "author": "BlueHalo",
+  "copyright": "Copyright BlueHalo 2007-2026 - All Rights Reserved.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bluehalo/ngx-leaflet-d3.git"
+  },
+  "peerDependencies": {
+    "@angular/common": "21",
+    "@angular/core": "21",
+    "@bluehalo/leaflet-d3": "6",
+    "@bluehalo/ngx-leaflet": "21",
+    "d3": "7",
+    "d3-hexbin": "0.2",
+    "leaflet": "1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.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"
+}

package/types/bluehalo-ngx-leaflet-d3.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="@bluehalo/leaflet-d3" />
+import * as i0 from '@angular/core';
+import { OnChanges, OnInit, EventEmitter, NgZone, SimpleChange } from '@angular/core';
+import * as L from 'leaflet';
+import { LeafletDirectiveWrapper, LeafletDirective } from '@bluehalo/ngx-leaflet';
+import { Observer, Observable } from 'rxjs';
+
+declare class LeafletHexbinDirective implements OnChanges, OnInit {
+    private zone;
+    leafletDirective: LeafletDirectiveWrapper;
+    hexbinLayer: L.HexbinLayer;
+    hexbinData: any[];
+    hexbinOptions: L.HexbinLayerConfig;
+    hexbinMouseover: EventEmitter<any>;
+    hexbinMouseout: EventEmitter<any>;
+    hexbinClick: EventEmitter<any>;
+    layerReady: EventEmitter<L.HexbinLayer>;
+    constructor(leafletDirective: LeafletDirective, zone: NgZone);
+    ngOnInit(): void;
+    ngOnChanges(changes: {
+        [key: string]: SimpleChange;
+    }): void;
+    private setHexbinData;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LeafletHexbinDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LeafletHexbinDirective, "[leafletHexbin]", never, { "hexbinData": { "alias": "leafletHexbin"; "required": false; }; "hexbinOptions": { "alias": "leafletHexbinOptions"; "required": false; }; }, { "hexbinMouseover": "leafletHexbinMouseover"; "hexbinMouseout": "leafletHexbinMouseout"; "hexbinClick": "leafletHexbinClick"; "layerReady": "leafletHexbinLayerReady"; }, never, never, true, never>;
+}
+
+declare class LeafletPingEvent {
+    data: any;
+    cssClass?: string;
+}
+
+declare class LeafletPingDirective implements OnInit {
+    private zone;
+    leafletDirective: LeafletDirectiveWrapper;
+    pingLayer: L.PingLayer;
+    pingOptions: L.PingLayerConfig;
+    pingObserverReady: EventEmitter<Observer<LeafletPingEvent>>;
+    pingSource: Observable<LeafletPingEvent>;
+    pingObserver: Observer<LeafletPingEvent>;
+    constructor(leafletDirective: LeafletDirective, zone: NgZone);
+    ngOnInit(): void;
+    /**
+     * Submit a ping to the ping layer.
+     *
+     * @param data Contains the lat/lon information to generate the ping
+     * @param cssClass Optional parameter specifying the css class to apply to the ping
+     */
+    ping(data: any, cssClass?: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LeafletPingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LeafletPingDirective, "[leafletPing]", never, { "pingOptions": { "alias": "leafletPingOptions"; "required": false; }; }, { "pingObserverReady": "leafletPingObserver"; }, never, never, true, never>;
+}
+
+declare class LeafletD3Module {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LeafletD3Module, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<LeafletD3Module, never, [typeof LeafletHexbinDirective, typeof LeafletPingDirective], [typeof LeafletHexbinDirective, typeof LeafletPingDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<LeafletD3Module>;
+}
+
+export { LeafletD3Module, LeafletHexbinDirective, LeafletPingDirective, LeafletPingEvent };