Skip to content

Commit 7843368

Browse files
timhoviustimhovius
authored
feat(Marker) (sebholstein#1208)
add functionality to create a complex marker icon
1 parent 04df6d2 commit 7843368

File tree

6 files changed

+103
-21
lines changed

6 files changed

+103
-21
lines changed

‎packages/core/directives/marker.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
6565
@Input('markerDraggable') draggable: boolean = false;
6666

6767
/**
68-
* Icon (the URL of the image) for the foreground.
68+
* Icon (the URL or a complex icon) for the foreground.
6969
*/
70-
@Input() iconUrl: string;
70+
@Input() icon: mapTypes.Icon | string;
7171

7272
/**
7373
* If true, the marker is visible
@@ -167,7 +167,7 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
167167
if (changes['draggable']) {
168168
this._markerManager.updateDraggable(this);
169169
}
170-
if (changes['iconUrl']) {
170+
if (changes['icon']) {
171171
this._markerManager.updateIcon(this);
172172
}
173173
if (changes['opacity']) {

‎packages/core/services/google-maps-types.ts

+11-7
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export interface Marker extends MVCObject {
2929
setTitle(title: string): void;
3030
setLabel(label: string|MarkerLabel): void;
3131
setDraggable(draggable: boolean): void;
32-
setIcon(icon: string): void;
32+
setIcon(icon: string|Icon): void;
3333
setOpacity(opacity: number): void;
3434
setVisible(visible: boolean): void;
3535
setZIndex(zIndex: number): void;
@@ -43,7 +43,7 @@ export interface MarkerOptions {
4343
map?: GoogleMap;
4444
label?: string|MarkerLabel;
4545
draggable?: boolean;
46-
icon?: string;
46+
icon?: string|Icon;
4747
opacity?: number;
4848
visible?: boolean;
4949
zIndex?: number;
@@ -203,9 +203,6 @@ export interface MapsEventListener { remove(): void; }
203203
export interface Size {
204204
height: number;
205205
width: number;
206-
constructor(width: number, height: number, widthUnit?: string, heightUnit?: string): void;
207-
equals(other: Size): boolean;
208-
toString(): string;
209206
}
210207

211208
export interface InfoWindowOptions {
@@ -220,8 +217,15 @@ export interface InfoWindowOptions {
220217
export interface Point {
221218
x: number;
222219
y: number;
223-
equals(other: Point): boolean;
224-
toString(): string;
220+
}
221+
222+
export interface Icon {
223+
anchor?: Point;
224+
labelOrigin?: Point;
225+
origin?: Point;
226+
scaledSize?: Size;
227+
size?: Size;
228+
url: string;
225229
}
226230

227231
export interface GoogleSymbol {

‎packages/core/services/managers/marker-manager.spec.ts

+43-4
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ describe('MarkerManager', () => {
6363
}));
6464
});
6565

66-
describe('set marker icon', () => {
66+
describe('set url marker icon', () => {
6767
it('should update that marker via setIcon method when the markerUrl changes',
6868
async(inject(
6969
[MarkerManager, GoogleMapsAPIWrapper],
@@ -88,13 +88,52 @@ describe('MarkerManager', () => {
8888
title: undefined,
8989
clickable: true
9090
});
91-
const iconUrl = 'http://angular-maps.com/icon.png';
92-
newMarker.iconUrl = iconUrl;
91+
const url = 'http://angular-maps.com/icon.png';
92+
newMarker.icon = url;
9393
return markerManager.updateIcon(newMarker).then(
94-
() => { expect(markerInstance.setIcon).toHaveBeenCalledWith(iconUrl); });
94+
() => { expect(markerInstance.setIcon).toHaveBeenCalledWith(url); });
9595
})));
9696
});
9797

98+
describe('set complex marker icon', () => {
99+
it('should update that marker via setIcon method when the markerUrl changes',
100+
async(inject(
101+
[MarkerManager, GoogleMapsAPIWrapper],
102+
(markerManager: MarkerManager, apiWrapper: GoogleMapsAPIWrapper) => {
103+
const newMarker = new AgmMarker(markerManager);
104+
newMarker.latitude = 34.4;
105+
newMarker.longitude = 22.3;
106+
newMarker.label = 'A';
107+
108+
const markerInstance: Marker = jasmine.createSpyObj('Marker', ['setMap', 'setIcon']);
109+
(<any>apiWrapper.createMarker).and.returnValue(Promise.resolve(markerInstance));
110+
111+
markerManager.addMarker(newMarker);
112+
expect(apiWrapper.createMarker).toHaveBeenCalledWith({
113+
position: {lat: 34.4, lng: 22.3},
114+
label: 'A',
115+
draggable: false,
116+
icon: undefined,
117+
opacity: 1,
118+
visible: true,
119+
zIndex: 1,
120+
title: undefined,
121+
clickable: true
122+
});
123+
const icon = {
124+
anchor: {x: 16, y: 16},
125+
labelOrigin: {x: 0, y: 0},
126+
origin: {x: 0, y: 0},
127+
scaledSize: {height: 32, width: 32},
128+
size: {height: 32, width: 32},
129+
url: 'http://angular-maps.com/icon.png'
130+
};
131+
newMarker.icon = icon;
132+
return markerManager.updateIcon(newMarker).then(
133+
() => { expect(markerInstance.setIcon).toHaveBeenCalledWith(icon); });
134+
})));
135+
});
136+
98137
describe('set marker opacity', () => {
99138
it('should update that marker via setOpacity method when the markerOpacity changes',
100139
async(inject(

‎packages/core/services/managers/marker-manager.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export class MarkerManager {
4646
}
4747

4848
updateIcon(marker: AgmMarker): Promise<void> {
49-
return this._markers.get(marker).then((m: Marker) => m.setIcon(marker.iconUrl));
49+
return this._markers.get(marker).then((m: Marker) => m.setIcon(marker.icon));
5050
}
5151

5252
updateOpacity(marker: AgmMarker): Promise<void> {
@@ -70,7 +70,7 @@ export class MarkerManager {
7070
position: {lat: marker.latitude, lng: marker.longitude},
7171
label: marker.label,
7272
draggable: marker.draggable,
73-
icon: marker.iconUrl,
73+
icon: marker.icon,
7474
opacity: marker.opacity,
7575
visible: marker.visible,
7676
zIndex: marker.zIndex,

‎packages/js-marker-clusterer/services/managers/cluster-manager.spec.ts

+43-4
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ describe('ClusterManager', () => {
6363
}));
6464
});
6565

66-
describe('set marker icon', () => {
66+
describe('set url marker icon', () => {
6767
it('should update that marker via setIcon method when the markerUrl changes',
6868
async(inject(
6969
[ClusterManager, GoogleMapsAPIWrapper],
@@ -88,13 +88,52 @@ describe('ClusterManager', () => {
8888
title: undefined,
8989
clickable: true
9090
}, false);
91-
const iconUrl = 'http://angular-maps.com/icon.png';
92-
newMarker.iconUrl = iconUrl;
91+
const url = 'http://angular-maps.com/icon.png';
92+
newMarker.icon = url;
9393
return markerManager.updateIcon(newMarker).then(
94-
() => { expect(markerInstance.setIcon).toHaveBeenCalledWith(iconUrl); });
94+
() => { expect(markerInstance.setIcon).toHaveBeenCalledWith(url); });
9595
})));
9696
});
9797

98+
describe('set complex marker icon', () => {
99+
it('should update that marker via setIcon method when the markerUrl changes',
100+
async(inject(
101+
[ClusterManager, GoogleMapsAPIWrapper],
102+
(markerManager: ClusterManager, apiWrapper: GoogleMapsAPIWrapper) => {
103+
const newMarker = new AgmMarker(markerManager);
104+
newMarker.latitude = 34.4;
105+
newMarker.longitude = 22.3;
106+
newMarker.label = 'A';
107+
108+
const markerInstance: Marker = jasmine.createSpyObj('Marker', ['setMap', 'setIcon']);
109+
(<any>apiWrapper.createMarker).and.returnValue(Promise.resolve(markerInstance));
110+
111+
markerManager.addMarker(newMarker);
112+
expect(apiWrapper.createMarker).toHaveBeenCalledWith({
113+
position: {lat: 34.4, lng: 22.3},
114+
label: 'A',
115+
draggable: false,
116+
icon: undefined,
117+
opacity: 1,
118+
visible: true,
119+
zIndex: 1,
120+
title: undefined,
121+
clickable: true
122+
}, false);
123+
const icon = {
124+
anchor: {x: 16, y: 16},
125+
labelOrigin: {x: 0, y: 0},
126+
origin: {x: 0, y: 0},
127+
scaledSize: {height: 32, width: 32},
128+
size: {height: 32, width: 32},
129+
url: 'http://angular-maps.com/icon.png'
130+
};
131+
newMarker.icon = icon;
132+
return markerManager.updateIcon(newMarker).then(
133+
() => { expect(markerInstance.setIcon).toHaveBeenCalledWith(icon); });
134+
})));
135+
});
136+
98137
describe('set marker opacity', () => {
99138
it('should update that marker via setOpacity method when the markerOpacity changes',
100139
async(inject(

‎packages/js-marker-clusterer/services/managers/cluster-manager.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export class ClusterManager extends MarkerManager {
4040
},
4141
label: marker.label,
4242
draggable: marker.draggable,
43-
icon: marker.iconUrl,
43+
icon: marker.icon,
4444
opacity: marker.opacity,
4545
visible: marker.visible,
4646
zIndex: marker.zIndex,

0 commit comments

Comments
 (0)