feat(*): Support data layer

This introduces a new Directive called <sebm-google-map-data-layer> Closes sebholstein#809 Closes sebholstein#819
caravancoop · Jun 7, 2017 · 6edf758 · 6edf758
1 parent c5a2414
commit 6edf758
Show file tree

Hide file tree

Showing 8 changed files with 426 additions and 4 deletions.
diff --git a/src/core/core-module.ts b/src/core/core-module.ts
@@ -1,6 +1,7 @@
 import {ModuleWithProviders, NgModule} from '@angular/core';
 
 import {SebmGoogleMapKmlLayer} from './directives/google-map-kml-layer';
+import {SebmGoogleMapDataLayer} from './directives/google-map-data-layer';
 import {SebmGoogleMap} from './directives/google-map';
 import {SebmGoogleMapCircle} from './directives/google-map-circle';
 import {SebmGoogleMapInfoWindow} from './directives/google-map-info-window';
@@ -19,7 +20,8 @@ import {BROWSER_GLOBALS_PROVIDERS} from './utils/browser-globals';
 export function coreDirectives() {
   return [
     SebmGoogleMap, SebmGoogleMapMarker, SebmGoogleMapInfoWindow, SebmGoogleMapCircle,
-    SebmGoogleMapPolygon, SebmGoogleMapPolyline, SebmGoogleMapPolylinePoint, SebmGoogleMapKmlLayer
+    SebmGoogleMapPolygon, SebmGoogleMapPolyline, SebmGoogleMapPolylinePoint, SebmGoogleMapKmlLayer,
+    SebmGoogleMapDataLayer
   ];
 };
 

diff --git a/src/core/directives.ts b/src/core/directives.ts
@@ -2,6 +2,7 @@ export {SebmGoogleMap} from './directives/google-map';
 export {SebmGoogleMapCircle} from './directives/google-map-circle';
 export {SebmGoogleMapInfoWindow} from './directives/google-map-info-window';
 export {SebmGoogleMapKmlLayer} from './directives/google-map-kml-layer';
+export {SebmGoogleMapDataLayer} from './directives/google-map-data-layer';
 export {SebmGoogleMapMarker} from './directives/google-map-marker';
 export {SebmGoogleMapPolygon} from './directives/google-map-polygon';
 export {SebmGoogleMapPolyline} from './directives/google-map-polyline';

diff --git a/src/core/directives/google-map-data-layer.ts b/src/core/directives/google-map-data-layer.ts
@@ -0,0 +1,277 @@
+import { Directive, EventEmitter, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+
+import { DataMouseEvent, DataOptions } from './../services/google-maps-types';
+import { DataLayerManager } from './../services/managers/data-layer-manager';
+
+let layerId = 0;
+
+/**
+ * SebmGoogleMapDataLayer enables the user to add data layers to the map.
+ *
+ * ### Example
+ * ```typescript
+ * import { Component } from 'angular2/core';
+ * import { SebmGoogleMap, SebmGoogleMapDataLayer } from
+ * 'angular2-google-maps/core';
+ *
+ * @Component({
+ *  selector: 'my-map-cmp',
+ *  directives: [SebmGoogleMap, SebmGoogleMapDataLayer],
+ *  styles: [`
+ *    .sebm-google-map-container {
+ *      height: 300px;
+ *    }
+ * `],
+ *  template: `
+ * <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
+ * 	  <sebm-google-map-data-layer [geoJson]="geoJsonObject" (layerClick)="clicked($event)" [style]="styleFunc">
+ * 	  </sebm-google-map-data-layer>
+ * </sebm-google-map>
+ *  `
+ * })
+ * export class MyMapCmp {
+ *   lat: number = -25.274449;
+ *   lng: number = 133.775060;
+ *   zoom: number = 5;
+ *   
+ * clicked(clickEvent) {
+ *    console.log(clickEvent);
+ *  }
+ *
+ *  styleFunc(feature) {
+ *    return ({
+ *      clickable: false,
+ *      fillColor: feature.getProperty('color'),
+ *      strokeWeight: 1
+ *    });
+ *  }
+ *
+ *  geoJsonObject: Object = {
+ *    "type": "FeatureCollection",
+ *    "features": [
+ *      {
+ *        "type": "Feature",
+ *        "properties": {
+ *          "letter": "G",
+ *          "color": "blue",
+ *          "rank": "7",
+ *          "ascii": "71"
+ *        },
+ *        "geometry": {
+ *          "type": "Polygon",
+ *          "coordinates": [
+ *            [
+ *              [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
+ *              [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
+ *              [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
+ *              [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
+ *              [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
+ *              [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
+ *              [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
+ *              [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
+ *            ]
+ *          ]
+ *        }
+ *      },
+ *      {
+ *        "type": "Feature",
+ *        "properties": {
+ *          "letter": "o",
+ *          "color": "red",
+ *          "rank": "15",
+ *          "ascii": "111"
+ *        },
+ *        "geometry": {
+ *          "type": "Polygon",
+ *          "coordinates": [
+ *            [
+ *              [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
+ *              [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
+ *              [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
+ *              [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
+ *            ],
+ *            [
+ *              [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
+ *              [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
+ *            ]
+ *          ]
+ *        }
+ *      },
+ *      {
+ *        "type": "Feature",
+ *        "properties": {
+ *          "letter": "o",
+ *          "color": "yellow",
+ *          "rank": "15",
+ *          "ascii": "111"
+ *        },
+ *        "geometry": {
+ *          "type": "Polygon",
+ *          "coordinates": [
+ *            [
+ *              [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
+ *              [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
+ *              [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
+ *              [132.71, -25.64], [131.87, -25.76]
+ *            ],
+ *            [
+ *              [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
+ *              [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
+ *            ]
+ *          ]
+ *        }
+ *      },
+ *      {
+ *        "type": "Feature",
+ *        "properties": {
+ *          "letter": "g",
+ *          "color": "blue",
+ *          "rank": "7",
+ *          "ascii": "103"
+ *        },
+ *        "geometry": {
+ *          "type": "Polygon",
+ *          "coordinates": [
+ *            [
+ *              [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
+ *              [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
+ *              [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
+ *              [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
+ *              [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
+ *              [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
+ *              [138.99, -25.40], [138.73, -25.00], [138.12, -25.04]
+ *            ],
+ *            [
+ *              [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
+ *              [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
+ *            ]
+ *          ]
+ *        }
+ *      },
+ *      {
+ *        "type": "Feature",
+ *        "properties": {
+ *          "letter": "l",
+ *          "color": "green",
+ *          "rank": "12",
+ *          "ascii": "108"
+ *        },
+ *        "geometry": {
+ *          "type": "Polygon",
+ *          "coordinates": [
+ *            [
+ *              [140.14, -21.04], [140.31, -29.42], [141.67, -29.49], [141.59, -20.92], [140.14, -21.04]
+ *            ]
+ *          ]
+ *        }
+ *      },
+ *      {
+ *        "type": "Feature",
+ *        "properties": {
+ *          "letter": "e",
+ *          "color": "red",
+ *          "rank": "5",
+ *          "ascii": "101"
+ *        },
+ *        "geometry": {
+ *          "type": "Polygon",
+ *          "coordinates": [
+ *            [
+ *              [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
+ *              [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
+ *              [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
+ *              [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
+ *              [144.31, -28.26], [144.14, -27.41]
+ *            ],
+ *            [
+ *              [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
+ *              [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
+ *            ]
+ *          ]
+ *        }
+ *      }
+ *    ]
+ *  };
+ * }
+ * ```
+ */
+@Directive({
+  selector: 'sebm-google-map-data-layer',
+  inputs: ['geoJson', 'style'],
+  outputs: ['layerClick']
+})
+export class SebmGoogleMapDataLayer implements OnInit, OnDestroy, OnChanges {
+  private static _dataOptionsAttributes: Array<string> = ['style'];
+
+  private _addedToManager: boolean = false;
+  private _id: string = (layerId++).toString();
+  private _subscriptions: Subscription[] = [];
+
+  /**
+   * This event is fired when a feature in the layer is clicked.
+   */
+  layerClick: EventEmitter<DataMouseEvent> = new EventEmitter<DataMouseEvent>();
+
+  /**
+   * The geoJson to be displayed
+   */
+  geoJson: Object | null = null;
+
+  /**
+   * The layer's style function.
+   */
+  style: () => void;
+
+  constructor(private _manager: DataLayerManager) { }
+
+  ngOnInit() {
+    if (this._addedToManager) {
+      return;
+    }
+    this._manager.addDataLayer(this);
+    this._addedToManager = true;
+    this._addEventListeners();
+  }
+
+  private _addEventListeners() {
+    const listeners = [
+      { name: 'click', handler: (ev: DataMouseEvent) => this.layerClick.emit(ev) },
+    ];
+    listeners.forEach((obj) => {
+      const os = this._manager.createEventObservable(obj.name, this).subscribe(obj.handler);
+      this._subscriptions.push(os);
+    });
+  }
+
+  /** @internal */
+  id(): string { return this._id; }
+
+  /** @internal */
+  toString(): string { return `SebmGoogleMapDataLayer-${this._id.toString()}`; }
+
+  /** @internal */
+  ngOnDestroy() {
+    this._manager.deleteDataLayer(this);
+    // unsubscribe all registered observable subscriptions
+    this._subscriptions.forEach(s => s.unsubscribe());
+  }
+
+  /** @internal */
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this._addedToManager) {
+      return;
+    }
+
+    var geoJsonChange = changes['geoJson'];
+    if (geoJsonChange) {
+      this._manager.updateGeoJson(this, geoJsonChange.currentValue);
+    }
+
+    let dataOptions: DataOptions = {};
+    const optionKeys = Object.keys(changes).filter(
+      k => SebmGoogleMapDataLayer._dataOptionsAttributes.indexOf(k) !== -1);
+    optionKeys.forEach(k => (<any>dataOptions)[k] = changes[k].currentValue);
+    this._manager.setDataOptions(this, dataOptions);
+  }
+}
diff --git a/src/core/directives/google-map.ts b/src/core/directives/google-map.ts
@@ -10,8 +10,8 @@ import {InfoWindowManager} from '../services/managers/info-window-manager';
 import {MarkerManager} from '../services/managers/marker-manager';
 import {PolygonManager} from '../services/managers/polygon-manager';
 import {PolylineManager} from '../services/managers/polyline-manager';
-
 import {KmlLayerManager} from './../services/managers/kml-layer-manager';
+import {DataLayerManager} from './../services/managers/data-layer-manager';
 
 /**
  * SebMGoogleMap renders a Google Map.
@@ -42,7 +42,7 @@ import {KmlLayerManager} from './../services/managers/kml-layer-manager';
   selector: 'sebm-google-map',
   providers: [
     GoogleMapsAPIWrapper, MarkerManager, InfoWindowManager, CircleManager, PolylineManager,
-    PolygonManager, KmlLayerManager
+    PolygonManager, KmlLayerManager, DataLayerManager
   ],
   inputs: [
     'longitude', 'latitude', 'zoom', 'minZoom', 'maxZoom', 'draggable: mapDraggable',

diff --git a/src/core/map-types.ts b/src/core/map-types.ts
@@ -1,7 +1,7 @@
 import {LatLngLiteral} from './services/google-maps-types';
 
 // exported map types
-export {KmlMouseEvent, LatLngBounds, LatLngBoundsLiteral, LatLngLiteral, PolyMouseEvent} from './services/google-maps-types';
+export {KmlMouseEvent, DataMouseEvent, LatLngBounds, LatLngBoundsLiteral, LatLngLiteral, PolyMouseEvent} from './services/google-maps-types';
 
 /**
  * MouseEvent gets emitted when the user triggers mouse events on the map.

diff --git a/src/core/services.ts b/src/core/services.ts
@@ -5,6 +5,7 @@ export {MarkerManager} from './services/managers/marker-manager';
 export {PolygonManager} from './services/managers/polygon-manager';
 export {PolylineManager} from './services/managers/polyline-manager';
 export {KmlLayerManager} from './services/managers/kml-layer-manager';
+export {DataLayerManager} from './services/managers/data-layer-manager';
 export {GoogleMapsScriptProtocol, LAZY_MAPS_API_CONFIG, LazyMapsAPILoader, LazyMapsAPILoaderConfigLiteral} from './services/maps-api-loader/lazy-maps-api-loader';
 export {MapsAPILoader} from './services/maps-api-loader/maps-api-loader';
 export {NoOpMapsAPILoader} from './services/maps-api-loader/noop-maps-api-loader';