@ng-maps/marker-clusterer
Version:
**@ng-maps/marker-clusterer** is a wrapper around [MarkerClusterer](https://github.com/googlemaps/js-markerclusterer)
171 lines (164 loc) • 7.32 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@ng-maps/core';
import { NgMapsViewComponent, MarkerManager, InfoWindowManager, NgMapsCoreModule } from '@ng-maps/core';
import { GoogleMapsMarkerManager, GoogleInfoWindowManager } from '@ng-maps/google';
import { MarkerClusterer } from '@googlemaps/markerclusterer';
import { Observable } from 'rxjs';
class ClusterManager extends GoogleMapsMarkerManager {
constructor(_mapsWrapper, _zone) {
super(_mapsWrapper, _zone);
this._clustererInstance = new Promise((resolver) => {
this._resolver = resolver;
});
}
async createCluster(options) {
const map = await this._mapsWrapper.getNativeMap();
if (this._resolver) {
this._resolver(new MarkerClusterer({
map,
markers: [...this._markers.values()],
...options,
}));
}
}
/**
* @todo fix commented options
* @param marker
*/
async addMarker(marker) {
if (typeof marker.latitude !== 'number' ||
typeof marker.longitude !== 'number') {
return;
}
const cluster = await this._clustererInstance;
const markers = await this._mapsWrapper.createMarker({
lat: marker.latitude,
lng: marker.longitude,
},
// TODO typings
{
label: marker.label,
draggable: marker.draggable,
icon: marker.icon ?? marker.iconUrl,
opacity: marker.opacity,
visible: marker.visible,
zIndex: marker.zIndex,
title: marker.title,
clickable: marker.clickable,
}, false);
cluster.addMarker(markers);
this._markers.set(marker, markers);
}
async deleteMarker(marker) {
const m = this._markers.get(marker);
if (m == null) {
// marker already deleted
return Promise.resolve();
}
this._zone.run(() => {
m.setMap(null);
this._clustererInstance.then((cluster) => {
cluster.removeMarker(m);
this._markers.delete(marker);
});
});
}
clearMarkers() {
return this._clustererInstance.then((cluster) => {
cluster.clearMarkers();
});
}
createClusterEventObservable(eventName, marker) {
return new Observable((observer) => {
this._clustererInstance.then((m) => {
m.addListener(eventName, (e) => this._zone.run(() => observer.next(e)));
});
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ClusterManager, deps: [{ token: i1.MapsApiWrapper }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ClusterManager, providedIn: NgMapsViewComponent }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ClusterManager, decorators: [{
type: Injectable,
args: [{
providedIn: NgMapsViewComponent,
}]
}], ctorParameters: () => [{ type: i1.MapsApiWrapper }, { type: i0.NgZone }] });
/**
* MarkerClusterComponent clusters map marker if they are near together
*/
// eslint-disable-next-line @angular-eslint/directive-class-suffix
class MarkerClusterComponent {
constructor(_clusterManager) {
this._clusterManager = _clusterManager;
this.clusterClick = new EventEmitter();
}
/** @internal */
ngOnDestroy() {
this._clusterManager.clearMarkers();
}
/** @internal */
ngOnChanges(changes) {
if (changes['algorithm'] || changes['renderer']) {
this.updateClusterManager();
}
}
/** @internal */
ngOnInit() {
this.updateClusterManager();
}
updateClusterManager() {
this._clusterManager.createCluster({
algorithm: this.algorithm,
renderer: this.renderer,
onClusterClick: (event, cluster, map) => this.clusterClick.emit({ event, cluster, map }),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MarkerClusterComponent, deps: [{ token: ClusterManager }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: MarkerClusterComponent, isStandalone: false, selector: "map-marker-cluster", inputs: { algorithm: "algorithm", renderer: "renderer" }, outputs: { clusterClick: "clusterClick" }, providers: [
ClusterManager,
{ provide: MarkerManager, useExisting: ClusterManager },
{ provide: InfoWindowManager, useClass: GoogleInfoWindowManager },
], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MarkerClusterComponent, decorators: [{
type: Directive,
args: [{
// eslint-disable-next-line @angular-eslint/directive-selector
selector: 'map-marker-cluster',
providers: [
ClusterManager,
{ provide: MarkerManager, useExisting: ClusterManager },
{ provide: InfoWindowManager, useClass: GoogleInfoWindowManager },
],
standalone: false,
}]
}], ctorParameters: () => [{ type: ClusterManager }], propDecorators: { algorithm: [{
type: Input
}], renderer: [{
type: Input
}], clusterClick: [{
type: Output
}] } });
class NgMapsMarkerClustererModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgMapsMarkerClustererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgMapsMarkerClustererModule, declarations: [MarkerClusterComponent], imports: [NgMapsCoreModule], exports: [MarkerClusterComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgMapsMarkerClustererModule, imports: [NgMapsCoreModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgMapsMarkerClustererModule, decorators: [{
type: NgModule,
args: [{
imports: [NgMapsCoreModule],
declarations: [MarkerClusterComponent],
exports: [MarkerClusterComponent],
}]
}] });
/*
* Public API Surface of js-marker-clusterer
*/
/**
* Generated bundle index. Do not edit.
*/
export { ClusterManager, MarkerClusterComponent, NgMapsMarkerClustererModule };
//# sourceMappingURL=ng-maps-marker-clusterer.mjs.map