From 12889fd687e770a46143e0f7da1fd5c87db5aea9 Mon Sep 17 00:00:00 2001
From: Finn <toyou1995@gmail.com>
Date: Mon, 13 Nov 2017 22:21:59 +0000
Subject: [PATCH] Initial agmcluster commit with broken maxZoom

---
 package-lock.json                     | 10 ++++++++++
 package.json                          |  2 ++
 src/app/dashboard/dashboard.module.ts |  2 ++
 src/app/dashboard/map.component.html  | 20 +++++++++++---------
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 655bc51..c2c5926 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,11 @@
       "resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.1.tgz",
       "integrity": "sha512-IVwQGmcaE42SmYY2e5QwqOC0vrSXZCW8BhATY0Vpy3NjbiydSXi9T81hVqKLvuKaB3ves1sv3W++SB1Wj+5B6A=="
     },
+    "@agm/js-marker-clusterer": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@agm/js-marker-clusterer/-/js-marker-clusterer-1.0.0-beta.2.tgz",
+      "integrity": "sha512-sQzNo+2NwjgVAiy/AU3deYvemoH3CHtYvh+aH/3jq9yIK+2ZiuwhZ2oKmoBsVPEMzLjOqF07FhDLowrAAZfVRw=="
+    },
     "@angular-devkit/build-optimizer": {
       "version": "0.0.13",
       "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.13.tgz",
@@ -4650,6 +4655,11 @@
       "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=",
       "dev": true
     },
+    "js-marker-clusterer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/js-marker-clusterer/-/js-marker-clusterer-1.0.0.tgz",
+      "integrity": "sha1-yUvoWuiJaBnlHBMfiR3StVVY3Rc="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
diff --git a/package.json b/package.json
index 5560151..15af575 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "private": true,
   "dependencies": {
     "@agm/core": "^1.0.0-beta.1",
+    "@agm/js-marker-clusterer": "^1.0.0-beta.2",
     "@angular/common": "4.0.3",
     "@angular/compiler": "4.0.3",
     "@angular/core": "4.0.3",
@@ -32,6 +33,7 @@
     "angular-in-memory-web-api": "^0.3.1",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
+    "js-marker-clusterer": "^1.0.0",
     "moment": "^2.18.1",
     "ng2-charts": "1.6.0",
     "ng2-validation-manager": "^0.3.1",
diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts
index 941f8ab..341e833 100644
--- a/src/app/dashboard/dashboard.module.ts
+++ b/src/app/dashboard/dashboard.module.ts
@@ -5,6 +5,7 @@ import { ChartsModule } from 'ng2-charts/ng2-charts';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
+import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
 
 import { CurrencyPipe } from '@angular/common';
 
@@ -42,6 +43,7 @@ import { environment } from '../../environments/environment';
     AgmCoreModule.forRoot({
       apiKey: environment.mapApiKey
     }),
+    AgmJsMarkerClustererModule,
     BsDropdownModule,
     NgxPaginationModule,
     DashboardRoutingModule,
diff --git a/src/app/dashboard/map.component.html b/src/app/dashboard/map.component.html
index 28b375f..baa562d 100644
--- a/src/app/dashboard/map.component.html
+++ b/src/app/dashboard/map.component.html
@@ -22,16 +22,18 @@
               [zoom]="zoom"
               [scaleControl]="true"
               (idle)="viewBoundsChanged($event)">
-              <agm-marker
-                  *ngFor="let m of markers"
-                  [latitude]="m.latitude"
-                  [longitude]="m.longitude"
-                  [label]="m.name[0]">
+              <agm-marker-cluster [maxZoom]=12 [imagePath]="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
+                <agm-marker
+                    *ngFor="let m of markers"
+                    [latitude]="m.latitude"
+                    [longitude]="m.longitude"
+                    [label]="m.name[0]">
 
-                <agm-info-window>
-                  <strong>{{m.name}}</strong>
-                </agm-info-window>
-              </agm-marker>
+                  <agm-info-window>
+                    <strong>{{m.name}}</strong>
+                  </agm-info-window>
+                </agm-marker>
+              </agm-marker-cluster>
             </agm-map>
           </div>
         </div>