feat(SebmGoogleMapMarker): support opacity

Closes #523 Closes #522
sebholstein · Aug 9, 2016 · 8ed927b · 8ed927b
1 parent 468a1a8
commit 8ed927b
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 8 deletions.
diff --git a/src/core/directives/google-map-marker.ts b/src/core/directives/google-map-marker.ts
@@ -38,7 +38,7 @@ let markerId = 0;
   selector: 'sebm-google-map-marker',
   inputs: [
     'latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable', 'iconUrl',
-    'openInfoWindow', 'fitBounds'
+    'openInfoWindow', 'fitBounds', 'opacity'
   ],
   outputs: ['markerClick', 'dragEnd']
 })
@@ -78,6 +78,11 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn
    */
   openInfoWindow: boolean = true;
 
+  /**
+   * The marker's opacity between 0.0 and 1.0.
+   */
+  opacity: number = 1;
+
   /**
    * This event emitter gets emitted when the user clicks on the marker.
    */
@@ -129,6 +134,9 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn
     if (changes['iconUrl']) {
       this._markerManager.updateIcon(this);
     }
+    if (changes['opacity']) {
+      this._markerManager.updateOpacity(this);
+    }
   }
 
   private _addEventListeners() {
@@ -140,10 +148,11 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn
     });
     this._observableSubscriptions.push(cs);
 
-    const ds = this._markerManager.createEventObservable<mapTypes.MouseEvent>('dragend', this)
-                   .subscribe((e: mapTypes.MouseEvent) => {
-                     this.dragEnd.emit({coords: {lat: e.latLng.lat(), lng: e.latLng.lng()}});
-                   });
+    const ds =
+        this._markerManager.createEventObservable<mapTypes.MouseEvent>('dragend', this)
+            .subscribe((e: mapTypes.MouseEvent) => {
+              this.dragEnd.emit(<MouseEvent>{coords: {lat: e.latLng.lat(), lng: e.latLng.lng()}});
+            });
     this._observableSubscriptions.push(ds);
   }
 

diff --git a/src/core/services/google-maps-types.ts b/src/core/services/google-maps-types.ts
@@ -27,6 +27,7 @@ export interface Marker extends MVCObject {
   setLabel(label: string|MarkerLabel): void;
   setDraggable(draggable: boolean): void;
   setIcon(icon: string): void;
+  setOpacity(opacity: number): void;
   getLabel(): MarkerLabel;
 }
 
@@ -37,6 +38,7 @@ export interface MarkerOptions {
   label?: string|MarkerLabel;
   draggable?: boolean;
   icon?: string;
+  opacity?: number;
 }
 
 export interface MarkerLabel {

diff --git a/src/core/services/managers/marker-manager.ts b/src/core/services/managers/marker-manager.ts
@@ -49,12 +49,17 @@ export class MarkerManager {
     return this._markers.get(marker).then((m: Marker) => m.setIcon(marker.iconUrl));
   }
 
+  updateOpacity(marker: SebmGoogleMapMarker): Promise<void> {
+    return this._markers.get(marker).then((m: Marker) => m.setOpacity(marker.opacity));
+  }
+
   addMarker(marker: SebmGoogleMapMarker) {
     const markerPromise = this._mapsWrapper.createMarker({
       position: {lat: marker.latitude, lng: marker.longitude},
       label: marker.label,
       draggable: marker.draggable,
-      icon: marker.iconUrl
+      icon: marker.iconUrl,
+      opacity: marker.opacity
     });
     this._markers.set(marker, markerPromise);
   }

diff --git a/test/services/managers/marker-manager.spec.ts b/test/services/managers/marker-manager.spec.ts
@@ -33,7 +33,8 @@ export function main() {
                  position: {lat: 34.4, lng: 22.3},
                  label: 'A',
                  draggable: false,
-                 icon: undefined
+                 icon: undefined,
+                 opacity: 1
                });
              }));
     });
@@ -75,13 +76,43 @@ export function main() {
                  position: {lat: 34.4, lng: 22.3},
                  label: 'A',
                  draggable: false,
-                 icon: undefined
+                 icon: undefined,
+                 opacity: 1
                });
                const iconUrl = 'http://angular-maps.com/icon.png';
                newMarker.iconUrl = iconUrl;
                return markerManager.updateIcon(newMarker).then(
                    () => { expect(markerInstance.setIcon).toHaveBeenCalledWith(iconUrl); });
              })));
     });
+
+    describe('set marker opacity', () => {
+      it('should update that marker via setOpacity method when the markerOpacity changes',
+         async(inject(
+             [MarkerManager, GoogleMapsAPIWrapper],
+             (markerManager: MarkerManager, apiWrapper: GoogleMapsAPIWrapper) => {
+               const newMarker = new SebmGoogleMapMarker(markerManager);
+               newMarker.latitude = 34.4;
+               newMarker.longitude = 22.3;
+               newMarker.label = 'A';
+
+               const markerInstance: Marker =
+                   jasmine.createSpyObj('Marker', ['setMap', 'setOpacity']);
+               (<any>apiWrapper.createMarker).and.returnValue(Promise.resolve(markerInstance));
+
+               markerManager.addMarker(newMarker);
+               expect(apiWrapper.createMarker).toHaveBeenCalledWith({
+                 position: {lat: 34.4, lng: 22.3},
+                 label: 'A',
+                 draggable: false,
+                 icon: undefined,
+                 opacity: 1
+               });
+               const opacity = 0.4;
+               newMarker.opacity = opacity;
+               return markerManager.updateOpacity(newMarker).then(
+                   () => { expect(markerInstance.setOpacity).toHaveBeenCalledWith(opacity); });
+             })));
+    });
   });
 }