From 1c25cb98ba40d627898ab0c9d904be3bb1a9476c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20M=C3=BCller?= Date: Tue, 12 Jan 2016 20:44:04 +0100 Subject: [PATCH] fix(SebmGoogleMap): use ngOnInit to support angular 2.0.0-beta.1 closes #79 closes #76 --- package.json | 16 ++--- src/directives/google-map-marker.ts | 77 +++++++++++++++++++----- src/directives/google-map.ts | 92 +++++++++++++++++++++-------- 3 files changed, 138 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index d2d251fdd..a974a1be2 100644 --- a/package.json +++ b/package.json @@ -19,12 +19,12 @@ }, "homepage": "https://github.com/SebastianM/angular2-google-maps#readme", "dependencies": { - "angular2": "^2.0.0-beta.0", + "angular2": "^2.0.0-beta.1", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", - "reflect-metadata": "^0.1.2", - "rxjs": "^5.0.0-beta.0", - "zone.js": "^0.5.10" + "reflect-metadata": "0.1.2", + "rxjs": "5.0.0-beta.0", + "zone.js": "0.5.10" }, "devDependencies": { "babel-eslint": "4.1.6", @@ -55,12 +55,12 @@ "jspm": { "jspmNodeConversion": false, "dependencies": { - "angular2": "^2.0.0-beta.0", + "angular2": "^2.0.0-beta.1", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", - "reflect-metadata": "^0.1.2", - "rxjs": "^5.0.0-beta.0", - "zone.js": "^0.5.10" + "reflect-metadata": "0.1.2", + "rxjs": "5.0.0-beta.0", + "zone.js": "0.5.10" } }, "typescript": { diff --git a/src/directives/google-map-marker.ts b/src/directives/google-map-marker.ts index b4b7eeba8..bc52dd0d4 100644 --- a/src/directives/google-map-marker.ts +++ b/src/directives/google-map-marker.ts @@ -1,29 +1,71 @@ -import { - Directive, - Input, - SimpleChange, - OnDestroy, - OnChanges, - EventEmitter, - Output -} from 'angular2/core'; +import {Directive, SimpleChange, OnDestroy, OnChanges, EventEmitter} from 'angular2/core'; import {MarkerManager} from '../services/marker-manager'; let markerId = 0; -@Directive({selector: 'sebm-google-map-marker'}) -export class SebmGoogleMapMarker implements OnDestroy, OnChanges { - @Input() latitude: number; - @Input() longitude: number; - @Input() title: string; - @Input() label: string; - @Output() markerClick: EventEmitter = new EventEmitter(); +/** + * SebmGoogleMapMarker renders a map marker inside a {@link SebmGoogleMap}. + * + * ### Example + * ```typescript + * import {Component} from 'angular2/core'; + * import {SebmGoogleMap, SebmGoogleMapMarker} from 'angular2-google-maps/core'; + * + * @Component({ + * selector: 'my-map-cmp', + * directives: [SebmGoogleMap, SebmGoogleMapMarker], + * styles: [` + * .sebm-google-map-container { + * height: 300px; + * } + * `], + * template: ` + * + * + * + * + * ` + * }) + * ``` + */ +@Directive({ + selector: 'sebm-google-map-marker', + inputs: ['latitude', 'longitude', 'title', 'label'], + outputs: ['markerClick'] +}) +export class SebmGoogleMapMarker implements OnDestroy, + OnChanges { + /** + * The latitude position of the marker. + */ + latitude: number; + + /** + * The longitude position of the marker. + */ + longitude: number; + + /** + * The title of the marker. + */ + title: string; + + /** + * The label (a single uppercase character) for the marker. + */ + label: string; + + /** + * This event emitter gets emitted when the user clicks on the marker. + */ + markerClick: EventEmitter = new EventEmitter(); private _markerAddedToManger: boolean = false; private _id: string; constructor(private _markerManager: MarkerManager) { this._id = (markerId++).toString(); } + /** @internal */ ngOnChanges(changes: {[key: string]: SimpleChange}) { if (!this._markerAddedToManger && this.latitude && this.longitude) { this._markerManager.addMarker(this); @@ -43,9 +85,12 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges { } } + /** @internal */ id(): string { return this._id; } + /** @internal */ toString(): string { return 'SebmGoogleMapMarker-' + this._id.toString(); } + /** @internal */ ngOnDestroy() { this._markerManager.deleteMarker(this); } } diff --git a/src/directives/google-map.ts b/src/directives/google-map.ts index d01ac8956..ff2f27b7e 100644 --- a/src/directives/google-map.ts +++ b/src/directives/google-map.ts @@ -1,11 +1,10 @@ import { Component, - Input, - Output, Renderer, ElementRef, EventEmitter, OnChanges, + OnInit, SimpleChange } from 'angular2/core'; import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper'; @@ -13,7 +12,29 @@ import {MarkerManager} from '../services/marker-manager'; import {LatLng, LatLngLiteral} from '../services/google-maps-types'; /** - * Todo: add docs + * SebMGoogleMap renders a Google Map. + * **Important note**: To be able see a map in the browser, you have to define a height for the CSS + * class `sebm-google-map-container`. + * + * ### Example + * ```typescript + * import {Component} from 'angular2/core'; + * import {SebmGoogleMap} from 'angular2-google-maps/core'; + * + * @Component({ + * selector: 'my-map-cmp', + * directives: [SebmGoogleMap], + * styles: [` + * .sebm-google-map-container { + * height: 300px; + * } + * `], + * template: ` + * + * + * ` + * }) + * ``` */ @Component({ selector: 'sebm-google-map', @@ -26,29 +47,51 @@ import {LatLng, LatLngLiteral} from '../services/google-maps-types'; } ` ], + inputs: ['longitude', 'latitude', 'zoom', 'disableDoubleClickZoom'], + outputs: ['mapClick', 'mapRightClick', 'mapDblClick'], template: `
` }) -export class SebmGoogleMap implements OnChanges { +export class SebmGoogleMap implements OnChanges, + OnInit { private _longitude: number = 0; private _latitude: number = 0; private _zoom: number = 8; - @Input() disableDoubleClickZoom: boolean = false; + /** + * Enables/disables zoom and center on double click. Enabled by default. + */ + disableDoubleClickZoom: boolean = false; private static _mapOptionsAttributes: string[] = ['disableDoubleClickZoom']; - @Output() mapClick: EventEmitter = new EventEmitter(); - @Output() mapRightClick: EventEmitter = new EventEmitter(); - @Output() mapDblClick: EventEmitter = new EventEmitter(); - - private _mapsWrapper: GoogleMapsAPIWrapper; - - constructor(elem: ElementRef, _mapsWrapper: GoogleMapsAPIWrapper, renderer: Renderer) { - this._mapsWrapper = _mapsWrapper; - renderer.setElementClass(elem, 'sebm-google-map-container', true); - const container = elem.nativeElement.querySelector('.sebm-google-map-container-inner'); + /** + * This event emitter gets emitted when the user clicks on the map (but not when they click on a + * marker or infoWindow). + */ + mapClick: EventEmitter = new EventEmitter(); + + /** + * This event emitter gets emitted when the user right-clicks on the map (but not when they click + * on a marker or infoWindow). + */ + mapRightClick: EventEmitter = new EventEmitter(); + + /** + * This event emitter gets emitted when the user double-clicks on the map (but not when they click + * on a marker or infoWindow). + */ + mapDblClick: EventEmitter = new EventEmitter(); + + constructor( + private _elem: ElementRef, private _mapsWrapper: GoogleMapsAPIWrapper, + private _renderer: Renderer) {} + + /** @internal */ + ngOnInit() { + this._renderer.setElementClass(this._elem.nativeElement, 'sebm-google-map-container', true); + const container = this._elem.nativeElement.querySelector('.sebm-google-map-container-inner'); this._initMapInstance(container); } @@ -64,17 +107,16 @@ export class SebmGoogleMap implements OnChanges { (key: string) => { return SebmGoogleMap._mapOptionsAttributes.indexOf(key) !== 1; }); } + /** @internal */ ngOnChanges(changes: {[propName: string]: SimpleChange}) { if (SebmGoogleMap._containsMapOptionsChange(Object.keys(changes))) { - this._setMapOptions(); + this._mapsWrapper.setMapOptions({disableDoubleClickZoom: this.disableDoubleClickZoom}); } } - _setMapOptions() { - this._mapsWrapper.setMapOptions({disableDoubleClickZoom: this.disableDoubleClickZoom}); - } - - @Input() + /** + * Sets the zoom level of the map. The default value is `8`. + */ set zoom(value: number | string) { this._zoom = this._convertToDecimal(value); if (typeof this._zoom === 'number') { @@ -82,13 +124,17 @@ export class SebmGoogleMap implements OnChanges { } } - @Input() + /** + * The longitude that sets the center of the map. + */ set longitude(value: number | string) { this._longitude = this._convertToDecimal(value); this._updateCenter(); } - @Input() + /** + * The latitude that sets the center of the map. + */ set latitude(value: number | string) { this._latitude = this._convertToDecimal(value); this._updateCenter();