Skip to content

Commit

Permalink
feat(SebmGoogleMap): Add control options support
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinder @sebholstein
jinder authored and sebholstein committed Jan 19, 2017
1 parent dc7894b commit 0048ccf
Show file tree
Hide file tree
Showing 2 changed files with 205 additions and 23 deletions.
83 changes: 74 additions & 9 deletions src/core/directives/map.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import {Component, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChange} from '@angular/core';
import {Component, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
import {Subscription} from 'rxjs/Subscription';

import {MouseEvent} from '../map-types';
import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper';
import {LatLng, LatLngLiteral} from '../services/google-maps-types';
import {FullscreenControlOptions, LatLng, LatLngLiteral, MapTypeControlOptions, PanControlOptions,
RotateControlOptions, ScaleControlOptions, StreetViewControlOptions, ZoomControlOptions} from '../services/google-maps-types';
import {LatLngBounds, LatLngBoundsLiteral, MapTypeStyle} from '../services/google-maps-types';
import {CircleManager} from '../services/managers/circle-manager';
import {InfoWindowManager} from '../services/managers/info-window-manager';
Expand Down Expand Up @@ -153,6 +154,11 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
*/
zoomControl: boolean = true;

/**
* Options for the Zoom control.
*/
zoomControlOptions: ZoomControlOptions;

/**
* Styles to apply to each of the default map types. Note that for Satellite/Hybrid and Terrain
* modes, these styles will only apply to labels and geometry.
Expand All @@ -173,6 +179,11 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
*/
streetViewControl: boolean = true;

/**
* Options for the Street View control.
*/
streetViewControlOptions: StreetViewControlOptions;

/**
* Sets the viewport to contain the given bounds.
*/
Expand All @@ -183,18 +194,60 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
*/
scaleControl: boolean = false;

/**
* Options for the scale control.
*/
scaleControlOptions: ScaleControlOptions;

/**
* The initial enabled/disabled state of the Map type control.
*/
mapTypeControl: boolean = false;

/**
* Options for the Map type control.
*/
mapTypeControlOptions: MapTypeControlOptions;

/**
* The initial enabled/disabled state of the Pan control.
*/
panControl: boolean = false;

/**
* Options for the Pan control.
*/
panControlOptions: PanControlOptions;

/**
* The initial enabled/disabled state of the Rotate control.
*/
rotateControl: boolean = false;

/**
* Options for the Rotate control.
*/
rotateControlOptions: RotateControlOptions;

/**
* The initial enabled/disabled state of the Fullscreen control.
*/
fullscreenControl: boolean = false;

/**
* Options for the Fullscreen control.
*/
fullscreenControlOptions: FullscreenControlOptions;

/**
* Map option attributes that can change over time
*/
private static _mapOptionsAttributes: string[] = [
'disableDoubleClickZoom', 'scrollwheel', 'draggable', 'draggableCursor', 'draggingCursor',
'keyboardShortcuts', 'zoomControl', 'styles', 'streetViewControl', 'zoom', 'mapTypeControl',
'minZoom', 'maxZoom'
'keyboardShortcuts', 'zoomControl', 'zoomControlOptions', 'styles', 'streetViewControl',
'streetViewControlOptions', 'zoom', 'mapTypeControl', 'mapTypeControlOptions', 'minZoom',
'maxZoom', 'panControl', 'panControlOptions', 'rotateControl', 'rotateControlOptions',
'fullscreenControl', 'fullscreenControlOptions'
];

private _observableSubscriptions: Subscription[] = [];
Expand Down Expand Up @@ -253,16 +306,28 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
minZoom: this.minZoom,
maxZoom: this.maxZoom,
disableDefaultUI: this.disableDefaultUI,
disableDoubleClickZoom: this.disableDoubleClickZoom,
scrollwheel: this.scrollwheel,
backgroundColor: this.backgroundColor,
draggable: this.draggable,
draggableCursor: this.draggableCursor,
draggingCursor: this.draggingCursor,
keyboardShortcuts: this.keyboardShortcuts,
zoomControl: this.zoomControl,
styles: this.styles,
zoomControl: this.zoomControl,
zoomControlOptions: this.zoomControlOptions,
streetViewControl: this.streetViewControl,
streetViewControlOptions: this.streetViewControlOptions,
scaleControl: this.scaleControl,
mapTypeControl: this.mapTypeControl
scaleControlOptions: this.scaleControlOptions,
mapTypeControl: this.mapTypeControl,
mapTypeControlOptions: this.mapTypeControlOptions,
panControl: this.panControl,
panControlOptions: this.panControlOptions,
rotateControl: this.rotateControl,
rotateControlOptions: this.rotateControlOptions,
fullscreenControl: this.fullscreenControl,
fullscreenControlOptions: this.fullscreenControlOptions,
});

// register event listeners
Expand All @@ -280,12 +345,12 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
}

/* @internal */
ngOnChanges(changes: {[propName: string]: SimpleChange}) {
ngOnChanges(changes: SimpleChanges) {
this._updateMapOptionsChanges(changes);
this._updatePosition(changes);
}

private _updateMapOptionsChanges(changes: {[propName: string]: SimpleChange}) {
private _updateMapOptionsChanges(changes: SimpleChanges) {
let options: {[propName: string]: any} = {};
let optionKeys =
Object.keys(changes).filter(k => AgmMap._mapOptionsAttributes.indexOf(k) !== -1);
Expand All @@ -307,7 +372,7 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
});
}

private _updatePosition(changes: {[propName: string]: SimpleChange}) {
private _updatePosition(changes: SimpleChanges) {
if (changes['latitude'] == null && changes['longitude'] == null &&
changes['fitBounds'] == null) {
// no position update needed
Expand Down
145 changes: 131 additions & 14 deletions src/core/services/google-maps-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,16 +125,27 @@ export interface MapOptions {
maxZoom?: number;
disableDoubleClickZoom?: boolean;
disableDefaultUI?: boolean;
scrollwheel?: boolean;
backgroundColor?: string;
draggable?: boolean;
draggableCursor?: string;
draggingCursor?: string;
keyboardShortcuts?: boolean;
zoomControl?: boolean;
styles?: MapTypeStyle[];
zoomControl?: boolean;
zoomControlOptions?: ZoomControlOptions;
streetViewControl?: boolean;
streetViewControlOptions?: StreetViewControlOptions;
scaleControl?: boolean;
scaleControlOptions?: ScaleControlOptions;
mapTypeControl?: boolean;
mapTypeControlOptions?: MapTypeControlOptions;
panControl?: boolean;
panControlOptions?: PanControlOptions;
rotateControl?: boolean;
rotateControlOptions?: RotateControlOptions;
fullscreenControl?: boolean;
fullscreenControlOptions?: FullscreenControlOptions;
}

export interface MapTypeStyle {
Expand Down Expand Up @@ -404,17 +415,123 @@ export interface Geometry {
type: string;
}

export class ControlPosition{
readonly BOTTOM_CENTER: string = 'BOTTOM_CENTER';
readonly BOTTOM_LEFT: string = 'BOTTOM_LEFT';
readonly BOTTOM_RIGHT: string = 'BOTTOM_RIGHT';
readonly LEFT_BOTTOM: string = 'LEFT_BOTTOM';
readonly LEFT_CENTER: string = 'LEFT_CENTER';
readonly LEFT_TOP: string = 'LEFT_TOP';
readonly RIGHT_BOTTOM: string = 'RIGHT_BOTTOM';
readonly RIGHT_CENTER: string = 'RIGHT_CENTER';
readonly RIGHT_TOP: string = 'RIGHT_TOP';
readonly TOP_CENTER: string = 'TOP_CENTER';
readonly TOP_LEFT: string = 'TOP_LEFT';
readonly TOP_RIGHT: string = 'TOP_RIGHT';
/**
* Identifiers used to specify the placement of controls on the map. Controls are
* positioned relative to other controls in the same layout position. Controls that
* are added first are positioned closer to the edge of the map.
*/
export enum ControlPosition {
BOTTOM_CENTER,
BOTTOM_LEFT,
BOTTOM_RIGHT,
LEFT_BOTTOM,
LEFT_CENTER,
LEFT_TOP,
RIGHT_BOTTOM,
RIGHT_CENTER,
RIGHT_TOP,
TOP_CENTER,
TOP_LEFT,
TOP_RIGHT
}

export enum MapTypeId {
/** This map type displays a transparent layer of major streets on satellite images. */
HYBRID,
/** This map type displays a normal street map. */
ROADMAP,
/** This map type displays satellite images. */
SATELLITE,
/** This map type displays maps with physical features such as terrain and vegetation. */
TERRAIN
}

/***** Controls *****/
/** Options for the rendering of the map type control. */
export interface MapTypeControlOptions {
/** IDs of map types to show in the control. */
mapTypeIds?: (MapTypeId|string)[];
/**
* Position id. Used to specify the position of the control on the map.
* The default position is TOP_RIGHT.
*/
position?: ControlPosition;
/** Style id. Used to select what style of map type control to display. */
style?: MapTypeControlStyle;
}

export enum MapTypeControlStyle {
DEFAULT,
DROPDOWN_MENU,
HORIZONTAL_BAR
}

export interface OverviewMapControlOptions {
opened?: boolean;
}

/** Options for the rendering of the pan control. */
export interface PanControlOptions {
/**
* Position id. Used to specify the position of the control on the map.
* The default position is TOP_LEFT.
*/
position?: ControlPosition;
}

/** Options for the rendering of the rotate control. */
export interface RotateControlOptions {
/**
* Position id. Used to specify the position of the control on the map.
* The default position is TOP_LEFT.
*/
position?: ControlPosition;
}

/** Options for the rendering of the scale control. */
export interface ScaleControlOptions {
/** Style id. Used to select what style of scale control to display. */
style?: ScaleControlStyle;
}

export enum ScaleControlStyle {
DEFAULT
}

/** Options for the rendering of the Street View pegman control on the map. */
export interface StreetViewControlOptions {
/**
* Position id. Used to specify the position of the control on the map. The
* default position is embedded within the navigation (zoom and pan) controls.
* If this position is empty or the same as that specified in the
* zoomControlOptions or panControlOptions, the Street View control will be
* displayed as part of the navigation controls. Otherwise, it will be displayed
* separately.
*/
position?: ControlPosition;
}

/** Options for the rendering of the zoom control. */
export interface ZoomControlOptions {
/**
* Position id. Used to specify the position of the control on the map.
* The default position is TOP_LEFT.
*/
position?: ControlPosition;
style?: ZoomControlStyle;
}

export enum ZoomControlStyle {
DEFAULT,
LARGE,
SMALL
}

/** Options for the rendering of the fullscreen control. */
export interface FullscreenControlOptions {
/**
* Position id. Used to specify the position of the control on the map.
* The default position is RIGHT_TOP.
*/
position?: ControlPosition;
}

0 comments on commit 0048ccf

Please sign in to comment.