From 75f37a62a9f87c5ac66bf59e89a3e320515999f1 Mon Sep 17 00:00:00 2001 From: TSHiYK Date: Thu, 11 Aug 2016 07:04:47 +0900 Subject: [PATCH] feat(SebmGoogleMapMarker): support zIndex option Closes #559 Closes #558 --- src/core/directives/google-map-marker.ts | 13 +++++- src/core/services/google-maps-types.ts | 2 + src/core/services/managers/marker-manager.ts | 7 ++- test/services/managers/marker-manager.spec.ts | 44 +++++++++++++++++-- 4 files changed, 60 insertions(+), 6 deletions(-) diff --git a/src/core/directives/google-map-marker.ts b/src/core/directives/google-map-marker.ts index 36bc877b1..a2cb6681b 100644 --- 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', '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() { diff --git a/src/core/services/google-maps-types.ts b/src/core/services/google-maps-types.ts index aa8473774..918839350 100644 --- a/src/core/services/google-maps-types.ts +++ b/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 { diff --git a/src/core/services/managers/marker-manager.ts b/src/core/services/managers/marker-manager.ts index 7e8d3e68b..265e21fc6 100644 --- a/src/core/services/managers/marker-manager.ts +++ b/src/core/services/managers/marker-manager.ts @@ -57,6 +57,10 @@ export class MarkerManager { return this._markers.get(marker).then((m: Marker) => m.setVisible(marker.visible)); } + updateZIndex(marker: SebmGoogleMapMarker): Promise { + 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}, @@ -64,7 +68,8 @@ export class MarkerManager { draggable: marker.draggable, icon: marker.iconUrl, opacity: marker.opacity, - visible: marker.visible + visible: marker.visible, + zIndex: marker.zIndex }); this._markers.set(marker, markerPromise); } diff --git a/test/services/managers/marker-manager.spec.ts b/test/services/managers/marker-manager.spec.ts index 099077e22..26cd13788 100644 --- a/test/services/managers/marker-manager.spec.ts +++ b/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']); + (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); }); + }))); + }); }); }