WIP: just for show

package.json

@@ -88,7 +88,8 @@
     "tslint-loader": "^3.4.3",
     "typescript": "~2.2.0",
     "webpack": "2.3.3",
-    "zone.js": "^0.8.4"
+    "zone.js": "^0.8.4",
+    "js-marker-clusterer": "^1.0.0"
   },
   "jspm": {
     "jspmNodeConversion": false,

rollup.config.js

@@ -10,12 +10,13 @@ export default {
     '@angular/compiler': 'ng.compiler',
     '@angular/platform-browser': 'ng.platformBrowser',
     '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
+    'js-marker-clusterer': 'MarkerClusterer',
     'rxjs/Subject': 'Rx',
     'rxjs/observable/PromiseObservable': 'Rx',
     'rxjs/operator/toPromise': 'Rx.Observable.prototype',
     'rxjs/Observable': 'Rx',
     'rxjs/Rx': 'Rx'
   },
   context: 'window',
-  external: ['rxjs', '@angular/core', 'rxjs/Observable']
+  external: ['rxjs', '@angular/core', 'rxjs/Observable', 'js-marker-clusterer']
 }

scripts/create-package-json.js

@@ -4,22 +4,30 @@
 const fs = require('fs');
 const path = require('path');
 
-const pkgNames = ['core'];
+const pkgNames = ['core', 'clusterer'];
 
 pkgNames.forEach(function(pkgName) {
   const basePkgJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 
   // define the package name
   basePkgJson.name = `@agm/${pkgName}`
 
+  const pkgJsonFile = `./src/${pkgName}/package.json`;
+  if (fs.existsSync(pkgJsonFile)) {
+    const pkgJson = JSON.parse(fs.readFileSync(pkgJsonFile, 'utf8'));
+    Object.keys(pkgJson).forEach(key => {
+      basePkgJson[key] = pkgJson[key];
+    });
+  }
+
   // remove scripts
   delete basePkgJson.scripts;
 
   // remove devDependencies (as there are important for the sourcecode only)
   delete basePkgJson.devDependencies;
-  
+
   basePkgJson.dependencies = {};
 
   const filepath = path.join(__dirname, `../dist/${pkgName}/package.json`);
   fs.writeFileSync(filepath, JSON.stringify(basePkgJson, null, 2), 'utf-8');
-});
+});

src/clusterer/.gitignore

@@ -0,0 +1 @@
+package-lock.json

src/clusterer/clusterer.module.ts

@@ -0,0 +1,14 @@
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {AgmCoreModule} from '@agm/core';
+import {AgmMarkerCluster} from './directives/cluster';
+import {ClusterManager} from './services/managers/cluster-manager';
+
+@NgModule({
+  imports: [AgmCoreModule],
+  declarations: [AgmMarkerCluster],
+  exports: [AgmMarkerCluster, AgmCoreModule],
+  providers: [ClusterManager],
+})
+export class AgmClustererModule {
+}
+

src/clusterer/directives.ts

@@ -0,0 +1 @@
+export {AgmMarkerCluster} from './directives/cluster';

src/clusterer/directives/cluster.ts

@@ -0,0 +1,124 @@
+import {Directive, Input, OnDestroy, OnChanges, OnInit, SimpleChange} from '@angular/core';
+
+import {ClusterManager} from '../services/managers/cluster-manager';
+import {MarkerManager} from '../services/managers/marker-manager';
+
+import {IClusterOptions, IClusterStyle} from '../services/google-maps-types';
+
+/**
+ * AgmMarkerCluster clusters map marker if they are near together
+ *
+ * ### Example
+ * ```typescript
+ * import { Component } from '@angular/core';
+ *
+ * @Component({
+ *  selector: 'my-map-cmp',
+ *  styles: [`
+ *    .agm-map-container {
+ *      height: 300px;
+ *    }
+ * `],
+ *  template: `
+ *    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
+ *      <agm-cluster>
+ *        <agm-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
+ *        </agm-marker>
+ *        <agm-marker [latitude]="lat2" [longitude]="lng2" [label]="'N'">
+ *        </agm-marker>
+ *      </agm-cluster>
+ *    </agm-map>
+ *  `
+ * })
+ * ```
+ */
+@Directive({
+  selector: 'agm-cluster',
+  providers: [ClusterManager, {provide: MarkerManager, useExisting: ClusterManager}]
+})
+export class AgmMarkerCluster implements OnDestroy, OnChanges, OnInit, IClusterOptions {
+  /**
+   * The grid size of a cluster in pixels
+   */
+  @Input() gridSize: number;
+
+  /**
+   * The maximum zoom level that a marker can be part of a cluster.
+   */
+  @Input() maxZoom: number;
+
+  /**
+   * Whether the default behaviour of clicking on a cluster is to zoom into it.
+   */
+  @Input() zoomOnClick: boolean;
+
+  /**
+   * Whether the center of each cluster should be the average of all markers in the cluster.
+   */
+  @Input() averageCenter: boolean;
+
+  /**
+   * The minimum number of markers to be in a cluster before the markers are hidden and a count is shown.
+   */
+  @Input() minimumClusterSize: number;
+
+  /**
+   * An object that has style properties.
+   */
+  @Input() styles: IClusterStyle;
+
+  @Input() imagePath: string;
+  @Input() imageExtension: string;
+
+  constructor(private cluster: ClusterManager) {}
+
+  /** @internal */
+  ngOnDestroy() {
+    this.cluster.clearMarkers();
+  }
+
+  /** @internal */
+  ngOnChanges(changes: {[key: string]: SimpleChange }) {
+    if (changes['gridSize']) {
+      this.cluster.setGridSize(this);
+    }
+    if (changes['maxZoom']) {
+      this.cluster.setMaxZoom(this);
+    }
+    if (changes['styles']) {
+      this.cluster.setStyles(this);
+    }
+    if (changes['zoomOnClick']) {
+      this.cluster.setZoomOnClick(this);
+    }
+    if (changes['averageCenter']) {
+      this.cluster.setAverageCenter(this);
+    }
+    if (changes['minimumClusterSize']) {
+      this.cluster.setMinimumClusterSize(this);
+    }
+    if (changes['styles']) {
+      this.cluster.setStyles(this);
+    }
+    if (changes['imagePath']) {
+      this.cluster.setImagePath(this);
+    }
+    if (changes['imageExtension']) {
+      this.cluster.setImageExtension(this);
+    }
+  }
+
+  /** @internal */
+  ngOnInit() {
+    this.cluster.init({
+      gridSize: this.gridSize,
+      maxZoom: this.maxZoom,
+      zoomOnClick: this.zoomOnClick,
+      averageCenter: this.averageCenter,
+      minimumClusterSize: this.minimumClusterSize,
+      styles: this.styles,
+      imagePath: this.imagePath,
+      imageExtension: this.imageExtension,
+    });
+  }
+}

src/clusterer/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@agm/clusterer",
+  "description": "A Angular 2+ add-on for agm, A Google Maps JavaScript API v3 library to create and manage per-zoom-level clusters for large amounts of markers. Analytics",
+  "keywords": [
+    "angular",
+    "ng",
+    "google-maps",
+    "maps",
+    "google",
+    "gmaps",
+    "ng2",
+    "angular2",
+    "clusterer"
+  ],
+  "author": "Jens Fahnenbruck <[email protected]>",
+  "peerDependencies": {
+    "@angular/common": "^4.0.0 || ^2.0.0",
+    "@angular/core": "^4.0.0 || ^2.0.0",
+    "@agm/core": "1.0.0-beta.0",
+    "js-marker-clusterer": "^1.0.0"
+  },
+  "devDependencies": {
+    "@agm/core": "1.0.0-beta.0",
+    "@angular/common": "^4.0.0 || ^2.0.0",
+    "@angular/core": "^4.0.0 || ^2.0.0",
+    "js-marker-clusterer": "^1.0.0",
+    "rxjs": "^5.0.1",
+    "zone.js": "^0.8.4"
+  }
+}

src/clusterer/services.ts

@@ -0,0 +1 @@
+export {ClusterManager} from './services/managers/cluster-manager';

src/clusterer/services/google-clusterer-types.ts

@@ -0,0 +1,112 @@
+export interface CalculatorResult {
+  text: string;
+  index: number;
+}
+
+export type CalculateFunction = (marker: Marker[], count: number) => CalculatorResult;
+
+export interface IMarkerClusterer {
+  zoomOnClick_: boolean;
+  averageCenter_: boolean;
+  imagePath_: string;
+  minimumClusterSize_: number;
+  imageExtension_: string;
+  new(map: GoogleMap, marker: Marker[], options: IClusterOptions): IMarkerClusterer;
+  addMarker(marker: Marker, noDraw?: boolean): void;
+  addMarkers(markers: Marker[], noDraw?: boolean): void;
+  clearMarkers(): void;
+  getCalculator(): CalculateFunction;
+  getExtendedBounds(bounds: LatLngBounds): LatLngBounds;
+  getGridSize(): number;
+  getMap(): GoogleMap;
+  getMarkers(): Marker[];
+  getStyles(): IClusterStyle;
+  getTotalClusters(): number;
+  getTotalMarkers(): Marker[];
+  isZoomOnClick(): boolean;
+  redraw(): void;
+  removeMarker(marker: Marker): boolean;
+  resetViewport(): void;
+  setCalculator(calculator: CalculateFunction): void;
+  setGridSize(size: number): void;
+  setMap(map: GoogleMap): void;
+  setMaxZoom(maxZoom: number): void;
+  setStyles(styles: IClusterStyle): void;
+}
+
+export interface IClusterOptions {
+  /**
+   * The grid size of a cluster in pixels.
+   */
+  gridSize?: number;
+
+  /**
+   * The maximum zoom level that a marker can be part of a cluster.
+   */
+  maxZoom?: number;
+
+  /**
+   * Whether the default behaviour of clicking on a cluster is to zoom into it.
+   */
+  zoomOnClick?: boolean;
+
+  /**
+   * Whether the center of each cluster should be the average of all markers in the cluster.
+   */
+  averageCenter?: boolean;
+
+  /**
+   * The minimum number of markers to be in a cluster before the markers are hidden and a count is shown.
+   */
+  minimumClusterSize?: number;
+
+  /**
+   * An object that has style properties.
+   */
+  styles?: IClusterStyle;
+
+  imagePath?: string;
+  imageExtension?: string;
+}
+
+export interface IClusterStyle {
+  /**
+   * The image url.
+   */
+  url?: string;
+
+  /**
+   * The image height.
+   */
+  height?: number;
+
+  /**
+   * The image width.
+   */
+  width?: number;
+
+  /**
+   * The anchor position of the label text.
+   */
+  anchor?: [number, number];
+
+  /**
+   * The text color.
+   */
+  textColor?: string;
+
+  /**
+   * The text size.
+   */
+  textSize?: number;
+
+  /**
+   * The position of the backgound x, y.
+   */
+  backgroundPosition?: string;
+
+  /**
+   * The anchor position of the icon x, y.
+   */
+  iconAnchor?: [number, number];
+}