feat(SebmGoogleMapMarker): add custom icon support

You can define a custom via a custom URL like this: ``` <sebm-google-map-marker [iconUrl]="http://example.com/icon.png"> </sebm-google-map-marker> ``` Closes #123 Closes #224
sebholstein · Mar 16, 2016 · 13ec2a1 · 13ec2a1
1 parent 0df5da8
commit 13ec2a1
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 5 deletions.
diff --git a/src/directives/google-map-marker.ts b/src/directives/google-map-marker.ts
@@ -32,7 +32,7 @@ let markerId = 0;
  */
 @Directive({
   selector: 'sebm-google-map-marker',
-  inputs: ['latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable'],
+  inputs: ['latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable', 'iconUrl'],
   outputs: ['markerClick', 'dragEnd']
 })
 export class SebmGoogleMapMarker implements OnDestroy,
@@ -62,6 +62,11 @@ export class SebmGoogleMapMarker implements OnDestroy,
    */
   draggable: boolean = false;
 
+  /**
+   * Icon (the URL of the image) for the foreground.
+   */
+  iconUrl: string;
+
   /**
    * This event emitter gets emitted when the user clicks on the marker.
    */
@@ -100,6 +105,9 @@ export class SebmGoogleMapMarker implements OnDestroy,
     if (changes['draggable']) {
       this._markerManager.updateDraggable(this);
     }
+    if (changes['iconUrl']) {
+      this._markerManager.updateIcon(this);
+    }
   }
 
   private _addEventListeners() {

diff --git a/src/services/google-maps-types.ts b/src/services/google-maps-types.ts
@@ -24,6 +24,7 @@ export interface Marker {
   setTitle(title: string): void;
   setLabel(label: string | MarkerLabel): void;
   setDraggable(draggable: boolean): void;
+  setIcon(icon: string): void;
   getLabel(): MarkerLabel;
   addListener(eventType: string, fn: Function): void;
 }
@@ -34,6 +35,7 @@ export interface MarkerOptions {
   map?: GoogleMap;
   label?: string | MarkerLabel;
   draggable?: boolean;
+  icon?: string;
 }
 
 export interface MarkerLabel {

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

diff --git a/test/services/marker-manager.spec.ts b/test/services/marker-manager.spec.ts
@@ -1,7 +1,8 @@
-import {describe, it, expect, beforeEachProviders, inject} from 'angular2/testing';
+import {describe, it, expect, beforeEachProviders, inject, injectAsync} from 'angular2/testing';
 import {provide, NgZone} from 'angular2/core';
 
 import {MarkerManager} from '../../src/services/marker-manager';
+import {Marker} from '../../src/services/google-maps-types';
 import {GoogleMapsAPIWrapper} from '../../src/services/google-maps-api-wrapper';
 import {SebmGoogleMapMarker} from '../../src/directives/google-map-marker';
 
@@ -28,7 +29,7 @@ export function main() {
                markerManager.addMarker(newMarker);
 
                expect(apiWrapper.createMarker)
-                   .toHaveBeenCalledWith({position: {lat: 34.4, lng: 22.3}, label: 'A', draggable: false});
+                   .toHaveBeenCalledWith({position: {lat: 34.4, lng: 22.3}, label: 'A', draggable: false, icon: undefined});
              }));
     });
 
@@ -42,13 +43,37 @@ export function main() {
                newMarker.longitude = 22.3;
                newMarker.label = 'A';
 
-               const markerInstance = jasmine.createSpyObj('Marker', ['setMap']);
+               const markerInstance: Marker = jasmine.createSpyObj('Marker', ['setMap']);
                (<any>apiWrapper.createMarker).and.returnValue(Promise.resolve(markerInstance));
 
                markerManager.addMarker(newMarker);
                markerManager.deleteMarker(newMarker)
                    .then(() => { expect(markerInstance.setMap).toHaveBeenCalledWith(null); });
              }));
     });
+
+    describe('set marker icon', () => {
+      it('should update that marker via setIcon method when the markerUrl changes',
+        injectAsync(
+              [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', 'setIcon']);
+                (<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});
+                const iconUrl = 'http://angular-maps.com/icon.png';
+                newMarker.iconUrl = iconUrl;
+                return markerManager.updateIcon(newMarker).then(() => {
+                  expect(markerInstance.setIcon).toHaveBeenCalledWith(iconUrl);
+                });
+              }));
+    });
   });
 }