feat(SebmGoogleMapMarker): support zIndex option

Closes #559
Closes #558

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', 'opacity', 'visible'
+ 'openInfoWindow', 'fitBounds', 'opacity', 'visible', 'zIndex'
  ],
  outputs: ['markerClick', 'dragEnd']
 })
@@ -88,6 +88,14 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn
  */
  opacity: number = 1;
 
+ /**
+ * All markers are displayed on the map in order of their zIndex, with higher values displaying in
+ * front of markers with lower values. By default, markers are displayed according to their
+ * vertical position on screen, with lower markers appearing in front of markers further up the
+ * screen.
+ */
+ zIndex: number = 1;
+
  /**
  * This event emitter gets emitted when the user clicks on the marker.
  */
@@ -145,6 +153,9 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn
  if (changes['visible']) {
  this._markerManager.updateVisible(this);
  }
+ if (changes['zIndex']) {
+ this._markerManager.updateZIndex(this);
+ }
  }
 
  private _addEventListeners() {

src/core/services/google-maps-types.ts

@@ -29,6 +29,7 @@ export interface Marker extends MVCObject {
  setIcon(icon: string): void;
  setOpacity(opacity: number): void;
  setVisible(visible: boolean): void;
+ setZIndex(zIndex: number): void;
  getLabel(): MarkerLabel;
 }
 
@@ -41,6 +42,7 @@ export interface MarkerOptions {
  icon?: string;
  opacity?: number;
  visible?: boolean;
+ zIndex?: number;
 }
 
 export interface MarkerLabel {

src/core/services/managers/marker-manager.ts

@@ -57,14 +57,19 @@ export class MarkerManager {
  return this._markers.get(marker).then((m: Marker) => m.setVisible(marker.visible));
  }
 
+ updateZIndex(marker: SebmGoogleMapMarker): Promise<void> {
+ return this._markers.get(marker).then((m: Marker) => m.setZIndex(marker.zIndex));
+ }
+
  addMarker(marker: SebmGoogleMapMarker) {
  const markerPromise = this._mapsWrapper.createMarker({
  position: {lat: marker.latitude, lng: marker.longitude},
  label: marker.label,
  draggable: marker.draggable,
  icon: marker.iconUrl,
  opacity: marker.opacity,
- visible: marker.visible
+ visible: marker.visible,
+ zIndex: marker.zIndex
  });
  this._markers.set(marker, markerPromise);
  }

test/services/managers/marker-manager.spec.ts

@@ -35,7 +35,8 @@ export function main() {
  draggable: false,
  icon: undefined,
  opacity: 1,
- visible: true
+ visible: true,
+ zIndex: 1
  });
  }));
  });
@@ -79,7 +80,8 @@ export function main() {
  draggable: false,
  icon: undefined,
  opacity: 1,
- visible: true
+ visible: true,
+ zIndex: 1
  });
  const iconUrl = 'http://angular-maps.com/icon.png';
  newMarker.iconUrl = iconUrl;
@@ -109,7 +111,8 @@ export function main() {
  draggable: false,
  icon: undefined,
  visible: true,
- opacity: 1
+ opacity: 1,
+ zIndex: 1
  });
  const opacity = 0.4;
  newMarker.opacity = opacity;
@@ -140,12 +143,45 @@ export function main() {
  draggable: false,
  icon: undefined,
  visible: false,
- opacity: 1
+ opacity: 1,
+ zIndex: 1
  });
  newMarker.visible = true;
  return markerManager.updateVisible(newMarker).then(
  () => { expect(markerInstance.setVisible).toHaveBeenCalledWith(true); });
  })));
  });
+
+ describe('set zIndex option', () => {
+ it('should update that marker via setZIndex method when the zIndex 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';
+ newMarker.visible = false;
+
+ const markerInstance: Marker =
+ jasmine.createSpyObj('Marker', ['setMap', 'setZIndex']);
+ (<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,
+ visible: false,
+ opacity: 1,
+ zIndex: 1
+ });
+ const zIndex = 10;
+ newMarker.zIndex = zIndex;
+ return markerManager.updateZIndex(newMarker).then(
+ () => { expect(markerInstance.setZIndex).toHaveBeenCalledWith(zIndex); });
+ })));
+ });
  });
 }