feat(AgmMarker): add animation field to markers

Feature to set animation for map markers Closes #580 Closes #852
sebholstein · Dec 18, 2017 · c57ab39 · c57ab39 · FacundoF1 · Jun 7, 2018
1 parent 422e63b
commit c57ab39
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 7 deletions.
diff --git a/packages/core/directives/marker.ts b/packages/core/directives/marker.ts
@@ -35,7 +35,12 @@ let markerId = 0;
  * ```
  */
 @Directive({
-  selector: 'agm-marker'
+  selector: 'agm-marker',
+  inputs: [
+    'latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable', 'iconUrl',
+    'openInfoWindow', 'opacity', 'visible', 'zIndex', 'animation'
+  ],
+  outputs: ['markerClick', 'dragEnd', 'mouseOver', 'mouseOut']
 })
 export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
   /**
@@ -98,6 +103,12 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
   // tslint:disable-next-line:no-input-rename
   @Input('markerClickable') clickable: boolean = true;
 
+  /**
+   * Which animation to play when marker is added to a map.
+   * This can be 'BOUNCE' or 'DROP'
+   */
+  animation: 'BOUNCE' | 'DROP' | null;
+
   /**
    * This event emitter gets emitted when the user clicks on the marker.
    */
@@ -182,6 +193,9 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
     if (changes['clickable']) {
       this._markerManager.updateClickable(this);
     }
+    if (changes['animation']) {
+      this._markerManager.updateAnimation(this);
+    }
   }
 
   private _addEventListeners() {

diff --git a/packages/core/services/google-maps-types.ts b/packages/core/services/google-maps-types.ts
@@ -33,6 +33,7 @@ export interface Marker extends MVCObject {
   setOpacity(opacity: number): void;
   setVisible(visible: boolean): void;
   setZIndex(zIndex: number): void;
+  setAnimation(animation: any): void;
   getLabel(): MarkerLabel;
   setClickable(clickable: boolean): void;
 }
@@ -48,6 +49,7 @@ export interface MarkerOptions {
   visible?: boolean;
   zIndex?: number;
   clickable: boolean;
+  animation?: any;
 }
 
 export interface MarkerLabel {

diff --git a/packages/core/services/managers/marker-manager.spec.ts b/packages/core/services/managers/marker-manager.spec.ts
@@ -39,7 +39,8 @@ describe('MarkerManager', () => {
                visible: true,
                zIndex: 1,
                title: undefined,
-               clickable: true
+               clickable: true,
+               animation: undefined
              });
            }));
   });
@@ -86,7 +87,8 @@ describe('MarkerManager', () => {
                visible: true,
                zIndex: 1,
                title: undefined,
-               clickable: true
+               clickable: true,
+               animation: undefined
              });
              const iconUrl = 'http://angular-maps.com/icon.png';
              newMarker.iconUrl = iconUrl;
@@ -119,7 +121,8 @@ describe('MarkerManager', () => {
                opacity: 1,
                zIndex: 1,
                title: undefined,
-               clickable: true
+               clickable: true,
+               animation: undefined
              });
              const opacity = 0.4;
              newMarker.opacity = opacity;
@@ -153,7 +156,8 @@ describe('MarkerManager', () => {
                opacity: 1,
                zIndex: 1,
                title: undefined,
-               clickable: true
+               clickable: true,
+               animation: undefined
              });
              newMarker.visible = true;
              return markerManager.updateVisible(newMarker).then(
@@ -185,7 +189,8 @@ describe('MarkerManager', () => {
                opacity: 1,
                zIndex: 1,
                title: undefined,
-               clickable: true
+               clickable: true,
+               animation: undefined
              });
              const zIndex = 10;
              newMarker.zIndex = zIndex;

diff --git a/packages/core/services/managers/marker-manager.ts b/packages/core/services/managers/marker-manager.ts
@@ -7,6 +7,8 @@ import {AgmMarker} from './../../directives/marker';
 import {GoogleMapsAPIWrapper} from './../google-maps-api-wrapper';
 import {Marker} from './../google-maps-types';
 
+declare var google: any;
+
 @Injectable()
 export class MarkerManager {
   protected _markers: Map<AgmMarker, Promise<Marker>> =
@@ -65,6 +67,16 @@ export class MarkerManager {
     return this._markers.get(marker).then((m: Marker) => m.setClickable(marker.clickable));
   }
 
+  updateAnimation(marker: AgmMarker): Promise<void> {
+    return this._markers.get(marker).then((m: Marker) => {
+      if (typeof marker.animation === 'string') {
+        m.setAnimation(google.maps.Animation[marker.animation]);
+      } else {
+        m.setAnimation(marker.animation);
+      }
+    });
+  }
+
   addMarker(marker: AgmMarker) {
     const markerPromise = this._mapsWrapper.createMarker({
       position: {lat: marker.latitude, lng: marker.longitude},
@@ -75,8 +87,10 @@ export class MarkerManager {
       visible: marker.visible,
       zIndex: marker.zIndex,
       title: marker.title,
-      clickable: marker.clickable
+      clickable: marker.clickable,
+      animation: (typeof marker.animation === 'string') ? google.maps.Animation[marker.animation] : marker.animation
     });
+
     this._markers.set(marker, markerPromise);
   }