angular2-google-maps
Version:
Angular 2 components for Google Maps
1,238 lines (1,216 loc) • 86.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/Observable')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/Observable'], factory) :
(factory((global.ngmaps = global.ngmaps || {}, global.ngmaps.core = global.ngmaps.core || {}),global.ng.core,global.Rx));
}(this, (function (exports,_angular_core,rxjs_Observable) { 'use strict';
var MapsAPILoader = (function () {
function MapsAPILoader() {
}
MapsAPILoader.decorators = [
{ type: _angular_core.Injectable },
];
/** @nocollapse */
MapsAPILoader.ctorParameters = function () { return []; };
return MapsAPILoader;
}());
/**
* Wrapper class that handles the communication with the Google Maps Javascript
* API v3
*/
var GoogleMapsAPIWrapper = (function () {
function GoogleMapsAPIWrapper(_loader, _zone) {
var _this = this;
this._loader = _loader;
this._zone = _zone;
this._map =
new Promise(function (resolve) { _this._mapResolver = resolve; });
}
GoogleMapsAPIWrapper.prototype.createMap = function (el, mapOptions) {
var _this = this;
return this._loader.load().then(function () {
var map = new google.maps.Map(el, mapOptions);
_this._mapResolver(map);
return;
});
};
GoogleMapsAPIWrapper.prototype.setMapOptions = function (options) {
this._map.then(function (m) { m.setOptions(options); });
};
/**
* Creates a google map marker with the map context
*/
GoogleMapsAPIWrapper.prototype.createMarker = function (options) {
if (options === void 0) { options = {}; }
return this._map.then(function (map) {
options.map = map;
return new google.maps.Marker(options);
});
};
GoogleMapsAPIWrapper.prototype.createInfoWindow = function (options) {
return this._map.then(function () { return new google.maps.InfoWindow(options); });
};
/**
* Creates a google.map.Circle for the current map.
*/
GoogleMapsAPIWrapper.prototype.createCircle = function (options) {
return this._map.then(function (map) {
options.map = map;
return new google.maps.Circle(options);
});
};
GoogleMapsAPIWrapper.prototype.createPolyline = function (options) {
return this.getNativeMap().then(function (map) {
var line = new google.maps.Polyline(options);
line.setMap(map);
return line;
});
};
GoogleMapsAPIWrapper.prototype.createPolygon = function (options) {
return this.getNativeMap().then(function (map) {
var polygon = new google.maps.Polygon(options);
polygon.setMap(map);
return polygon;
});
};
/**
* Determines if given coordinates are insite a Polygon path.
*/
GoogleMapsAPIWrapper.prototype.containsLocation = function (latLng, polygon) {
return google.maps.geometry.poly.containsLocation(latLng, polygon);
};
GoogleMapsAPIWrapper.prototype.subscribeToMapEvent = function (eventName) {
var _this = this;
return rxjs_Observable.Observable.create(function (observer) {
_this._map.then(function (m) {
m.addListener(eventName, function (arg) { _this._zone.run(function () { return observer.next(arg); }); });
});
});
};
GoogleMapsAPIWrapper.prototype.setCenter = function (latLng) {
return this._map.then(function (map) { return map.setCenter(latLng); });
};
GoogleMapsAPIWrapper.prototype.getZoom = function () { return this._map.then(function (map) { return map.getZoom(); }); };
GoogleMapsAPIWrapper.prototype.getBounds = function () {
return this._map.then(function (map) { return map.getBounds(); });
};
GoogleMapsAPIWrapper.prototype.setZoom = function (zoom) {
return this._map.then(function (map) { return map.setZoom(zoom); });
};
GoogleMapsAPIWrapper.prototype.getCenter = function () {
return this._map.then(function (map) { return map.getCenter(); });
};
GoogleMapsAPIWrapper.prototype.panTo = function (latLng) {
return this._map.then(function (map) { return map.panTo(latLng); });
};
GoogleMapsAPIWrapper.prototype.fitBounds = function (latLng) {
return this._map.then(function (map) { return map.fitBounds(latLng); });
};
GoogleMapsAPIWrapper.prototype.panToBounds = function (latLng) {
return this._map.then(function (map) { return map.panToBounds(latLng); });
};
/**
* Returns the native Google Maps Map instance. Be careful when using this instance directly.
*/
GoogleMapsAPIWrapper.prototype.getNativeMap = function () { return this._map; };
/**
* Triggers the given event name on the map instance.
*/
GoogleMapsAPIWrapper.prototype.triggerMapEvent = function (eventName) {
return this._map.then(function (m) { return google.maps.event.trigger(m, eventName); });
};
GoogleMapsAPIWrapper.decorators = [
{ type: _angular_core.Injectable },
];
/** @nocollapse */
GoogleMapsAPIWrapper.ctorParameters = function () { return [
{ type: MapsAPILoader, },
{ type: _angular_core.NgZone, },
]; };
return GoogleMapsAPIWrapper;
}());
var CircleManager = (function () {
function CircleManager(_apiWrapper, _zone) {
this._apiWrapper = _apiWrapper;
this._zone = _zone;
this._circles = new Map();
}
CircleManager.prototype.addCircle = function (circle) {
this._circles.set(circle, this._apiWrapper.createCircle({
center: { lat: circle.latitude, lng: circle.longitude },
clickable: circle.clickable,
draggable: circle.draggable,
editable: circle.editable,
fillColor: circle.fillColor,
fillOpacity: circle.fillOpacity,
radius: circle.radius,
strokeColor: circle.strokeColor,
strokeOpacity: circle.strokeOpacity,
strokePosition: circle.strokePosition,
strokeWeight: circle.strokeWeight,
visible: circle.visible,
zIndex: circle.zIndex
}));
};
/**
* Removes the given circle from the map.
*/
CircleManager.prototype.removeCircle = function (circle) {
var _this = this;
return this._circles.get(circle).then(function (c) {
c.setMap(null);
_this._circles.delete(circle);
});
};
CircleManager.prototype.setOptions = function (circle, options) {
return this._circles.get(circle).then(function (c) { return c.setOptions(options); });
};
CircleManager.prototype.getBounds = function (circle) {
return this._circles.get(circle).then(function (c) { return c.getBounds(); });
};
CircleManager.prototype.getCenter = function (circle) {
return this._circles.get(circle).then(function (c) { return c.getCenter(); });
};
CircleManager.prototype.getRadius = function (circle) {
return this._circles.get(circle).then(function (c) { return c.getRadius(); });
};
CircleManager.prototype.setCenter = function (circle) {
return this._circles.get(circle).then(function (c) { return c.setCenter({ lat: circle.latitude, lng: circle.longitude }); });
};
CircleManager.prototype.setEditable = function (circle) {
return this._circles.get(circle).then(function (c) { return c.setEditable(circle.editable); });
};
CircleManager.prototype.setDraggable = function (circle) {
return this._circles.get(circle).then(function (c) { return c.setDraggable(circle.draggable); });
};
CircleManager.prototype.setVisible = function (circle) {
return this._circles.get(circle).then(function (c) { return c.setVisible(circle.visible); });
};
CircleManager.prototype.setRadius = function (circle) {
return this._circles.get(circle).then(function (c) { return c.setRadius(circle.radius); });
};
CircleManager.prototype.createEventObservable = function (eventName, circle) {
var _this = this;
return rxjs_Observable.Observable.create(function (observer) {
var listener = null;
_this._circles.get(circle).then(function (c) {
listener = c.addListener(eventName, function (e) { return _this._zone.run(function () { return observer.next(e); }); });
});
return function () {
if (listener !== null) {
listener.remove();
}
};
});
};
CircleManager.decorators = [
{ type: _angular_core.Injectable },
];
/** @nocollapse */
CircleManager.ctorParameters = function () { return [
{ type: GoogleMapsAPIWrapper, },
{ type: _angular_core.NgZone, },
]; };
return CircleManager;
}());
var MarkerManager = (function () {
function MarkerManager(_mapsWrapper, _zone) {
this._mapsWrapper = _mapsWrapper;
this._zone = _zone;
this._markers = new Map();
}
MarkerManager.prototype.deleteMarker = function (marker) {
var _this = this;
var m = this._markers.get(marker);
if (m == null) {
// marker already deleted
return Promise.resolve();
}
return m.then(function (m) {
return _this._zone.run(function () {
m.setMap(null);
_this._markers.delete(marker);
});
});
};
MarkerManager.prototype.updateMarkerPosition = function (marker) {
return this._markers.get(marker).then(function (m) { return m.setPosition({ lat: marker.latitude, lng: marker.longitude }); });
};
MarkerManager.prototype.updateTitle = function (marker) {
return this._markers.get(marker).then(function (m) { return m.setTitle(marker.title); });
};
MarkerManager.prototype.updateLabel = function (marker) {
return this._markers.get(marker).then(function (m) { m.setLabel(marker.label); });
};
MarkerManager.prototype.updateDraggable = function (marker) {
return this._markers.get(marker).then(function (m) { return m.setDraggable(marker.draggable); });
};
MarkerManager.prototype.updateIcon = function (marker) {
return this._markers.get(marker).then(function (m) { return m.setIcon(marker.iconUrl); });
};
MarkerManager.prototype.updateOpacity = function (marker) {
return this._markers.get(marker).then(function (m) { return m.setOpacity(marker.opacity); });
};
MarkerManager.prototype.updateVisible = function (marker) {
return this._markers.get(marker).then(function (m) { return m.setVisible(marker.visible); });
};
MarkerManager.prototype.updateZIndex = function (marker) {
return this._markers.get(marker).then(function (m) { return m.setZIndex(marker.zIndex); });
};
MarkerManager.prototype.addMarker = function (marker) {
var 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,
zIndex: marker.zIndex,
title: marker.title
});
this._markers.set(marker, markerPromise);
};
MarkerManager.prototype.getNativeMarker = function (marker) {
return this._markers.get(marker);
};
MarkerManager.prototype.createEventObservable = function (eventName, marker) {
var _this = this;
return rxjs_Observable.Observable.create(function (observer) {
_this._markers.get(marker).then(function (m) {
m.addListener(eventName, function (e) { return _this._zone.run(function () { return observer.next(e); }); });
});
});
};
MarkerManager.decorators = [
{ type: _angular_core.Injectable },
];
/** @nocollapse */
MarkerManager.ctorParameters = function () { return [
{ type: GoogleMapsAPIWrapper, },
{ type: _angular_core.NgZone, },
]; };
return MarkerManager;
}());
var InfoWindowManager = (function () {
function InfoWindowManager(_mapsWrapper, _zone, _markerManager) {
this._mapsWrapper = _mapsWrapper;
this._zone = _zone;
this._markerManager = _markerManager;
this._infoWindows = new Map();
}
InfoWindowManager.prototype.deleteInfoWindow = function (infoWindow) {
var _this = this;
var iWindow = this._infoWindows.get(infoWindow);
if (iWindow == null) {
// info window already deleted
return Promise.resolve();
}
return iWindow.then(function (i) {
return _this._zone.run(function () {
i.close();
_this._infoWindows.delete(infoWindow);
});
});
};
InfoWindowManager.prototype.setPosition = function (infoWindow) {
return this._infoWindows.get(infoWindow).then(function (i) { return i.setPosition({
lat: infoWindow.latitude,
lng: infoWindow.longitude
}); });
};
InfoWindowManager.prototype.setZIndex = function (infoWindow) {
return this._infoWindows.get(infoWindow)
.then(function (i) { return i.setZIndex(infoWindow.zIndex); });
};
InfoWindowManager.prototype.open = function (infoWindow) {
var _this = this;
return this._infoWindows.get(infoWindow).then(function (w) {
if (infoWindow.hostMarker != null) {
return _this._markerManager.getNativeMarker(infoWindow.hostMarker).then(function (marker) {
return _this._mapsWrapper.getNativeMap().then(function (map) { return w.open(map, marker); });
});
}
return _this._mapsWrapper.getNativeMap().then(function (map) { return w.open(map); });
});
};
InfoWindowManager.prototype.close = function (infoWindow) {
return this._infoWindows.get(infoWindow).then(function (w) { return w.close(); });
};
InfoWindowManager.prototype.setOptions = function (infoWindow, options) {
return this._infoWindows.get(infoWindow).then(function (i) { return i.setOptions(options); });
};
InfoWindowManager.prototype.addInfoWindow = function (infoWindow) {
var options = {
content: infoWindow.content,
maxWidth: infoWindow.maxWidth,
zIndex: infoWindow.zIndex,
};
if (typeof infoWindow.latitude === 'number' && typeof infoWindow.longitude === 'number') {
options.position = { lat: infoWindow.latitude, lng: infoWindow.longitude };
}
var infoWindowPromise = this._mapsWrapper.createInfoWindow(options);
this._infoWindows.set(infoWindow, infoWindowPromise);
};
/**
* Creates a Google Maps event listener for the given InfoWindow as an Observable
*/
InfoWindowManager.prototype.createEventObservable = function (eventName, infoWindow) {
var _this = this;
return rxjs_Observable.Observable.create(function (observer) {
_this._infoWindows.get(infoWindow).then(function (i) {
i.addListener(eventName, function (e) { return _this._zone.run(function () { return observer.next(e); }); });
});
});
};
InfoWindowManager.decorators = [
{ type: _angular_core.Injectable },
];
/** @nocollapse */
InfoWindowManager.ctorParameters = function () { return [
{ type: GoogleMapsAPIWrapper, },
{ type: _angular_core.NgZone, },
{ type: MarkerManager, },
]; };
return InfoWindowManager;
}());
var PolygonManager = (function () {
function PolygonManager(_mapsWrapper, _zone) {
this._mapsWrapper = _mapsWrapper;
this._zone = _zone;
this._polygons = new Map();
}
PolygonManager.prototype.addPolygon = function (path) {
var polygonPromise = this._mapsWrapper.createPolygon({
clickable: path.clickable,
draggable: path.draggable,
editable: path.editable,
fillColor: path.fillColor,
fillOpacity: path.fillOpacity,
geodesic: path.geodesic,
paths: path.paths,
strokeColor: path.strokeColor,
strokeOpacity: path.strokeOpacity,
strokeWeight: path.strokeWeight,
visible: path.visible,
zIndex: path.zIndex,
});
this._polygons.set(path, polygonPromise);
};
PolygonManager.prototype.updatePolygon = function (polygon) {
var _this = this;
var m = this._polygons.get(polygon);
if (m == null) {
return Promise.resolve();
}
return m.then(function (l) { return _this._zone.run(function () { l.setPaths(polygon.paths); }); });
};
PolygonManager.prototype.setPolygonOptions = function (path, options) {
return this._polygons.get(path).then(function (l) { l.setOptions(options); });
};
PolygonManager.prototype.deletePolygon = function (paths) {
var _this = this;
var m = this._polygons.get(paths);
if (m == null) {
return Promise.resolve();
}
return m.then(function (l) {
return _this._zone.run(function () {
l.setMap(null);
_this._polygons.delete(paths);
});
});
};
PolygonManager.prototype.createEventObservable = function (eventName, path) {
var _this = this;
return rxjs_Observable.Observable.create(function (observer) {
_this._polygons.get(path).then(function (l) {
l.addListener(eventName, function (e) { return _this._zone.run(function () { return observer.next(e); }); });
});
});
};
PolygonManager.decorators = [
{ type: _angular_core.Injectable },
];
/** @nocollapse */
PolygonManager.ctorParameters = function () { return [
{ type: GoogleMapsAPIWrapper, },
{ type: _angular_core.NgZone, },
]; };
return PolygonManager;
}());
var PolylineManager = (function () {
function PolylineManager(_mapsWrapper, _zone) {
this._mapsWrapper = _mapsWrapper;
this._zone = _zone;
this._polylines = new Map();
}
PolylineManager._convertPoints = function (line) {
var path = line._getPoints().map(function (point) {
return { lat: point.latitude, lng: point.longitude };
});
return path;
};
PolylineManager.prototype.addPolyline = function (line) {
var path = PolylineManager._convertPoints(line);
var polylinePromise = this._mapsWrapper.createPolyline({
clickable: line.clickable,
draggable: line.draggable,
editable: line.editable,
geodesic: line.geodesic,
strokeColor: line.strokeColor,
strokeOpacity: line.strokeOpacity,
strokeWeight: line.strokeWeight,
visible: line.visible,
zIndex: line.zIndex,
path: path
});
this._polylines.set(line, polylinePromise);
};
PolylineManager.prototype.updatePolylinePoints = function (line) {
var _this = this;
var path = PolylineManager._convertPoints(line);
var m = this._polylines.get(line);
if (m == null) {
return Promise.resolve();
}
return m.then(function (l) { return _this._zone.run(function () { l.setPath(path); }); });
};
PolylineManager.prototype.setPolylineOptions = function (line, options) {
return this._polylines.get(line).then(function (l) { l.setOptions(options); });
};
PolylineManager.prototype.deletePolyline = function (line) {
var _this = this;
var m = this._polylines.get(line);
if (m == null) {
return Promise.resolve();
}
return m.then(function (l) {
return _this._zone.run(function () {
l.setMap(null);
_this._polylines.delete(line);
});
});
};
PolylineManager.prototype.createEventObservable = function (eventName, line) {
var _this = this;
return rxjs_Observable.Observable.create(function (observer) {
_this._polylines.get(line).then(function (l) {
l.addListener(eventName, function (e) { return _this._zone.run(function () { return observer.next(e); }); });
});
});
};
PolylineManager.decorators = [
{ type: _angular_core.Injectable },
];
/** @nocollapse */
PolylineManager.ctorParameters = function () { return [
{ type: GoogleMapsAPIWrapper, },
{ type: _angular_core.NgZone, },
]; };
return PolylineManager;
}());
/**
* Manages all KML Layers for a Google Map instance.
*/
var KmlLayerManager = (function () {
function KmlLayerManager(_wrapper, _zone) {
this._wrapper = _wrapper;
this._zone = _zone;
this._layers = new Map();
}
/**
* Adds a new KML Layer to the map.
*/
KmlLayerManager.prototype.addKmlLayer = function (layer) {
var newLayer = this._wrapper.getNativeMap().then(function (m) {
return new google.maps.KmlLayer({
clickable: layer.clickable,
map: m,
preserveViewport: layer.preserveViewport,
screenOverlays: layer.screenOverlays,
suppressInfoWindows: layer.suppressInfoWindows,
url: layer.url,
zIndex: layer.zIndex
});
});
this._layers.set(layer, newLayer);
};
KmlLayerManager.prototype.setOptions = function (layer, options) {
this._layers.get(layer).then(function (l) { return l.setOptions(options); });
};
KmlLayerManager.prototype.deleteKmlLayer = function (layer) {
var _this = this;
this._layers.get(layer).then(function (l) {
l.setMap(null);
_this._layers.delete(layer);
});
};
/**
* Creates a Google Maps event listener for the given KmlLayer as an Observable
*/
KmlLayerManager.prototype.createEventObservable = function (eventName, layer) {
var _this = this;
return rxjs_Observable.Observable.create(function (observer) {
_this._layers.get(layer).then(function (m) {
m.addListener(eventName, function (e) { return _this._zone.run(function () { return observer.next(e); }); });
});
});
};
KmlLayerManager.decorators = [
{ type: _angular_core.Injectable },
];
/** @nocollapse */
KmlLayerManager.ctorParameters = function () { return [
{ type: GoogleMapsAPIWrapper, },
{ type: _angular_core.NgZone, },
]; };
return KmlLayerManager;
}());
/**
* SebMGoogleMap renders a Google Map.
* **Important note**: To be able see a map in the browser, you have to define a height for the CSS
* class `sebm-google-map-container`.
*
* ### Example
* ```typescript
* import { Component } from '@angular/core';
* import { SebmGoogleMap } from 'angular2-google-maps/core';
*
* @Component({
* selector: 'my-map-cmp',
* directives: [SebmGoogleMap],
* styles: [`
* .sebm-google-map-container {
* height: 300px;
* }
* `],
* template: `
* <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
* </sebm-google-map>
* `
* })
* ```
*/
var SebmGoogleMap = (function () {
function SebmGoogleMap(_elem, _mapsWrapper) {
this._elem = _elem;
this._mapsWrapper = _mapsWrapper;
/**
* The longitude that defines the center of the map.
*/
this.longitude = 0;
/**
* The latitude that defines the center of the map.
*/
this.latitude = 0;
/**
* The zoom level of the map. The default zoom level is 8.
*/
this.zoom = 8;
/**
* Enables/disables if map is draggable.
*/
this.draggable = true;
/**
* Enables/disables zoom and center on double click. Enabled by default.
*/
this.disableDoubleClickZoom = false;
/**
* Enables/disables all default UI of the Google map. Please note: When the map is created, this
* value cannot get updated.
*/
this.disableDefaultUI = false;
/**
* If false, disables scrollwheel zooming on the map. The scrollwheel is enabled by default.
*/
this.scrollwheel = true;
/**
* If false, prevents the map from being controlled by the keyboard. Keyboard shortcuts are
* enabled by default.
*/
this.keyboardShortcuts = true;
/**
* The enabled/disabled state of the Zoom control.
*/
this.zoomControl = true;
/**
* 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.
*/
this.styles = [];
/**
* When true and the latitude and/or longitude values changes, the Google Maps panTo method is
* used to
* center the map. See: https://developers.google.com/maps/documentation/javascript/reference#Map
*/
this.usePanning = false;
/**
* The initial enabled/disabled state of the Street View Pegman control.
* This control is part of the default UI, and should be set to false when displaying a map type
* on which the Street View road overlay should not appear (e.g. a non-Earth map type).
*/
this.streetViewControl = true;
/**
* Sets the viewport to contain the given bounds.
*/
this.fitBounds = null;
/**
* The initial enabled/disabled state of the Scale control. This is disabled by default.
*/
this.scaleControl = false;
/**
* The initial enabled/disabled state of the Map type control.
*/
this.mapTypeControl = false;
this._observableSubscriptions = [];
/**
* This event emitter gets emitted when the user clicks on the map (but not when they click on a
* marker or infoWindow).
*/
this.mapClick = new _angular_core.EventEmitter();
/**
* This event emitter gets emitted when the user right-clicks on the map (but not when they click
* on a marker or infoWindow).
*/
this.mapRightClick = new _angular_core.EventEmitter();
/**
* This event emitter gets emitted when the user double-clicks on the map (but not when they click
* on a marker or infoWindow).
*/
this.mapDblClick = new _angular_core.EventEmitter();
/**
* This event emitter is fired when the map center changes.
*/
this.centerChange = new _angular_core.EventEmitter();
/**
* This event is fired when the viewport bounds have changed.
*/
this.boundsChange = new _angular_core.EventEmitter();
/**
* This event is fired when the map becomes idle after panning or zooming.
*/
this.idle = new _angular_core.EventEmitter();
/**
* This event is fired when the zoom level has changed.
*/
this.zoomChange = new _angular_core.EventEmitter();
}
/** @internal */
SebmGoogleMap.prototype.ngOnInit = function () {
// todo: this should be solved with a new component and a viewChild decorator
var container = this._elem.nativeElement.querySelector('.sebm-google-map-container-inner');
this._initMapInstance(container);
};
SebmGoogleMap.prototype._initMapInstance = function (el) {
this._mapsWrapper.createMap(el, {
center: { lat: this.latitude || 0, lng: this.longitude || 0 },
zoom: this.zoom,
minZoom: this.minZoom,
maxZoom: this.maxZoom,
disableDefaultUI: this.disableDefaultUI,
backgroundColor: this.backgroundColor,
draggable: this.draggable,
draggableCursor: this.draggableCursor,
draggingCursor: this.draggingCursor,
keyboardShortcuts: this.keyboardShortcuts,
zoomControl: this.zoomControl,
styles: this.styles,
streetViewControl: this.streetViewControl,
scaleControl: this.scaleControl,
mapTypeControl: this.mapTypeControl
});
// register event listeners
this._handleMapCenterChange();
this._handleMapZoomChange();
this._handleMapMouseEvents();
this._handleBoundsChange();
this._handleIdleEvent();
};
/** @internal */
SebmGoogleMap.prototype.ngOnDestroy = function () {
// unsubscribe all registered observable subscriptions
this._observableSubscriptions.forEach(function (s) { return s.unsubscribe(); });
};
/* @internal */
SebmGoogleMap.prototype.ngOnChanges = function (changes) {
this._updateMapOptionsChanges(changes);
this._updatePosition(changes);
};
SebmGoogleMap.prototype._updateMapOptionsChanges = function (changes) {
var options = {};
var optionKeys = Object.keys(changes).filter(function (k) { return SebmGoogleMap._mapOptionsAttributes.indexOf(k) !== -1; });
optionKeys.forEach(function (k) { options[k] = changes[k].currentValue; });
this._mapsWrapper.setMapOptions(options);
};
/**
* Triggers a resize event on the google map instance.
* Returns a promise that gets resolved after the event was triggered.
*/
SebmGoogleMap.prototype.triggerResize = function () {
var _this = this;
// Note: When we would trigger the resize event and show the map in the same turn (which is a
// common case for triggering a resize event), then the resize event would not
// work (to show the map), so we trigger the event in a timeout.
return new Promise(function (resolve) {
setTimeout(function () { return _this._mapsWrapper.triggerMapEvent('resize').then(function () { return resolve(); }); });
});
};
SebmGoogleMap.prototype._updatePosition = function (changes) {
if (changes['latitude'] == null && changes['longitude'] == null &&
changes['fitBounds'] == null) {
// no position update needed
return;
}
// we prefer fitBounds in changes
if (changes['fitBounds'] && this.fitBounds != null) {
this._fitBounds();
return;
}
if (typeof this.latitude !== 'number' || typeof this.longitude !== 'number') {
return;
}
var newCenter = {
lat: this.latitude,
lng: this.longitude,
};
if (this.usePanning) {
this._mapsWrapper.panTo(newCenter);
}
else {
this._mapsWrapper.setCenter(newCenter);
}
};
SebmGoogleMap.prototype._fitBounds = function () {
if (this.usePanning) {
this._mapsWrapper.panToBounds(this.fitBounds);
return;
}
this._mapsWrapper.fitBounds(this.fitBounds);
};
SebmGoogleMap.prototype._handleMapCenterChange = function () {
var _this = this;
var s = this._mapsWrapper.subscribeToMapEvent('center_changed').subscribe(function () {
_this._mapsWrapper.getCenter().then(function (center) {
_this.latitude = center.lat();
_this.longitude = center.lng();
_this.centerChange.emit({ lat: _this.latitude, lng: _this.longitude });
});
});
this._observableSubscriptions.push(s);
};
SebmGoogleMap.prototype._handleBoundsChange = function () {
var _this = this;
var s = this._mapsWrapper.subscribeToMapEvent('bounds_changed').subscribe(function () {
_this._mapsWrapper.getBounds().then(function (bounds) { _this.boundsChange.emit(bounds); });
});
this._observableSubscriptions.push(s);
};
SebmGoogleMap.prototype._handleMapZoomChange = function () {
var _this = this;
var s = this._mapsWrapper.subscribeToMapEvent('zoom_changed').subscribe(function () {
_this._mapsWrapper.getZoom().then(function (z) {
_this.zoom = z;
_this.zoomChange.emit(z);
});
});
this._observableSubscriptions.push(s);
};
SebmGoogleMap.prototype._handleIdleEvent = function () {
var _this = this;
var s = this._mapsWrapper.subscribeToMapEvent('idle').subscribe(function () { _this.idle.emit(void 0); });
this._observableSubscriptions.push(s);
};
SebmGoogleMap.prototype._handleMapMouseEvents = function () {
var _this = this;
var events = [
{ name: 'click', emitter: this.mapClick },
{ name: 'rightclick', emitter: this.mapRightClick },
];
events.forEach(function (e) {
var s = _this._mapsWrapper.subscribeToMapEvent(e.name).subscribe(function (event) {
var value = { coords: { lat: event.latLng.lat(), lng: event.latLng.lng() } };
e.emitter.emit(value);
});
_this._observableSubscriptions.push(s);
});
};
/**
* Map option attributes that can change over time
*/
SebmGoogleMap._mapOptionsAttributes = [
'disableDoubleClickZoom', 'scrollwheel', 'draggable', 'draggableCursor', 'draggingCursor',
'keyboardShortcuts', 'zoomControl', 'styles', 'streetViewControl', 'zoom', 'mapTypeControl',
'minZoom', 'maxZoom'
];
SebmGoogleMap.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'sebm-google-map',
providers: [
GoogleMapsAPIWrapper, MarkerManager, InfoWindowManager, CircleManager, PolylineManager,
PolygonManager, KmlLayerManager
],
inputs: [
'longitude', 'latitude', 'zoom', 'minZoom', 'maxZoom', 'draggable: mapDraggable',
'disableDoubleClickZoom', 'disableDefaultUI', 'scrollwheel', 'backgroundColor', 'draggableCursor',
'draggingCursor', 'keyboardShortcuts', 'zoomControl', 'styles', 'usePanning', 'streetViewControl',
'fitBounds', 'scaleControl', 'mapTypeControl'
],
outputs: [
'mapClick', 'mapRightClick', 'mapDblClick', 'centerChange', 'idle', 'boundsChange', 'zoomChange'
],
host: { '[class.sebm-google-map-container]': 'true' },
styles: ["\n .sebm-google-map-container-inner {\n width: inherit;\n height: inherit;\n }\n .sebm-google-map-content {\n display:none;\n }\n "],
template: "\n <div class='sebm-google-map-container-inner'></div>\n <div class='sebm-google-map-content'>\n <ng-content></ng-content>\n </div>\n "
},] },
];
/** @nocollapse */
SebmGoogleMap.ctorParameters = function () { return [
{ type: _angular_core.ElementRef, },
{ type: GoogleMapsAPIWrapper, },
]; };
return SebmGoogleMap;
}());
var SebmGoogleMapCircle = (function () {
function SebmGoogleMapCircle(_manager) {
this._manager = _manager;
/**
* Indicates whether this Circle handles mouse events. Defaults to true.
*/
this.clickable = true;
/**
* If set to true, the user can drag this circle over the map. Defaults to false.
*/
this.draggable = false;
/**
* If set to true, the user can edit this circle by dragging the control points shown at
* the center and around the circumference of the circle. Defaults to false.
*/
this.editable = false;
/**
* The radius in meters on the Earth's surface.
*/
this.radius = 0;
/**
* The stroke position. Defaults to CENTER.
* This property is not supported on Internet Explorer 8 and earlier.
*/
this.strokePosition = 'CENTER';
/**
* The stroke width in pixels.
*/
this.strokeWeight = 0;
/**
* Whether this circle is visible on the map. Defaults to true.
*/
this.visible = true;
/**
* This event is fired when the circle's center is changed.
*/
this.centerChange = new _angular_core.EventEmitter();
/**
* This event emitter gets emitted when the user clicks on the circle.
*/
this.circleClick = new _angular_core.EventEmitter();
/**
* This event emitter gets emitted when the user clicks on the circle.
*/
this.circleDblClick = new _angular_core.EventEmitter();
/**
* This event is repeatedly fired while the user drags the circle.
*/
this.drag = new _angular_core.EventEmitter();
/**
* This event is fired when the user stops dragging the circle.
*/
this.dragEnd = new _angular_core.EventEmitter();
/**
* This event is fired when the user starts dragging the circle.
*/
this.dragStart = new _angular_core.EventEmitter();
/**
* This event is fired when the DOM mousedown event is fired on the circle.
*/
this.mouseDown = new _angular_core.EventEmitter();
/**
* This event is fired when the DOM mousemove event is fired on the circle.
*/
this.mouseMove = new _angular_core.EventEmitter();
/**
* This event is fired on circle mouseout.
*/
this.mouseOut = new _angular_core.EventEmitter();
/**
* This event is fired on circle mouseover.
*/
this.mouseOver = new _angular_core.EventEmitter();
/**
* This event is fired when the DOM mouseup event is fired on the circle.
*/
this.mouseUp = new _angular_core.EventEmitter();
/**
* This event is fired when the circle's radius is changed.
*/
this.radiusChange = new _angular_core.EventEmitter();
/**
* This event is fired when the circle is right-clicked on.
*/
this.rightClick = new _angular_core.EventEmitter();
this._circleAddedToManager = false;
this._eventSubscriptions = [];
}
/** @internal */
SebmGoogleMapCircle.prototype.ngOnInit = function () {
this._manager.addCircle(this);
this._circleAddedToManager = true;
this._registerEventListeners();
};
/** @internal */
SebmGoogleMapCircle.prototype.ngOnChanges = function (changes) {
if (!this._circleAddedToManager) {
return;
}
if (changes['latitude'] || changes['longitude']) {
this._manager.setCenter(this);
}
if (changes['editable']) {
this._manager.setEditable(this);
}
if (changes['draggable']) {
this._manager.setDraggable(this);
}
if (changes['visible']) {
this._manager.setVisible(this);
}
if (changes['radius']) {
this._manager.setRadius(this);
}
this._updateCircleOptionsChanges(changes);
};
SebmGoogleMapCircle.prototype._updateCircleOptionsChanges = function (changes) {
var options = {};
var optionKeys = Object.keys(changes).filter(function (k) { return SebmGoogleMapCircle._mapOptions.indexOf(k) !== -1; });
optionKeys.forEach(function (k) { options[k] = changes[k].currentValue; });
if (optionKeys.length > 0) {
this._manager.setOptions(this, options);
}
};
SebmGoogleMapCircle.prototype._registerEventListeners = function () {
var _this = this;
var events = new Map();
events.set('center_changed', this.centerChange);
events.set('click', this.circleClick);
events.set('dblclick', this.circleDblClick);
events.set('drag', this.drag);
events.set('dragend', this.dragEnd);
events.set('dragStart', this.dragStart);
events.set('mousedown', this.mouseDown);
events.set('mousemove', this.mouseMove);
events.set('mouseout', this.mouseOut);
events.set('mouseover', this.mouseOver);
events.set('mouseup', this.mouseUp);
events.set('radius_changed', this.radiusChange);
events.set('rightclick', this.rightClick);
events.forEach(function (eventEmitter, eventName) {
_this._eventSubscriptions.push(_this._manager.createEventObservable(eventName, _this).subscribe(function (value) {
switch (eventName) {
case 'radius_changed':
_this._manager.getRadius(_this).then(function (radius) { return eventEmitter.emit(radius); });
break;
case 'center_changed':
_this._manager.getCenter(_this).then(function (center) {
return eventEmitter.emit({ lat: center.lat(), lng: center.lng() });
});
break;
default:
eventEmitter.emit({ coords: { lat: value.latLng.lat(), lng: value.latLng.lng() } });
}
}));
});
};
/** @internal */
SebmGoogleMapCircle.prototype.ngOnDestroy = function () {
this._eventSubscriptions.forEach(function (s) { s.unsubscribe(); });
this._eventSubscriptions = null;
this._manager.removeCircle(this);
};
/**
* Gets the LatLngBounds of this Circle.
*/
SebmGoogleMapCircle.prototype.getBounds = function () { return this._manager.getBounds(this); };
SebmGoogleMapCircle.prototype.getCenter = function () { return this._manager.getCenter(this); };
SebmGoogleMapCircle._mapOptions = [
'fillColor', 'fillOpacity', 'strokeColor', 'strokeOpacity', 'strokePosition', 'strokeWeight',
'visible', 'zIndex'
];
SebmGoogleMapCircle.decorators = [
{ type: _angular_core.Directive, args: [{
selector: 'sebm-google-map-circle',
inputs: [
'latitude', 'longitude', 'clickable', 'draggable: circleDraggable', 'editable', 'fillColor',
'fillOpacity', 'radius', 'strokeColor', 'strokeOpacity', 'strokePosition', 'strokeWeight',
'visible', 'zIndex'
],
outputs: [
'centerChange', 'circleClick', 'circleDblClick', 'drag', 'dragEnd', 'dragStart', 'mouseDown',
'mouseMove', 'mouseOut', 'mouseOver', 'mouseUp', 'radiusChange', 'rightClick'
]
},] },
];
/** @nocollapse */
SebmGoogleMapCircle.ctorParameters = function () { return [
{ type: CircleManager, },
]; };
return SebmGoogleMapCircle;
}());
var infoWindowId = 0;
/**
* SebmGoogleMapInfoWindow renders a info window inside a {@link SebmGoogleMapMarker} or standalone.
*
* ### Example
* ```typescript
* import { Component } from 'angular2/core';
* import { SebmGoogleMap, SebmGoogleMapMarker, SebmGoogleMapInfoWindow } from
* 'angular2-google-maps/core';
*
* @Component({
* selector: 'my-map-cmp',
* directives: [SebmGoogleMap, SebmGoogleMapMarker, SebmGoogleMapInfoWindow],
* styles: [`
* .sebm-google-map-container {
* height: 300px;
* }
* `],
* template: `
* <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
* <sebm-google-map-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
* <sebm-google-map-info-window [disableAutoPan]="true">
* Hi, this is the content of the <strong>info window</strong>
* </sebm-google-map-info-window>
* </sebm-google-map-marker>
* </sebm-google-map>
* `
* })
* ```
*/
var SebmGoogleMapInfoWindow = (function () {
function SebmGoogleMapInfoWindow(_infoWindowManager, _el) {
this._infoWindowManager = _infoWindowManager;
this._el = _el;
/**
* Sets the open state for the InfoWindow. You can also call the open() and close() methods.
*/
this.isOpen = false;
/**
* Emits an event when the info window is closed.
*/
this.infoWindowClose = new _angular_core.EventEmitter();
this._infoWindowAddedToManager = false;
this._id = (infoWindowId++).toString();
}
SebmGoogleMapInfoWindow.prototype.ngOnInit = function () {
this.content = this._el.nativeElement.querySelector('.sebm-google-map-info-window-content');
this._infoWindowManager.addInfoWindow(this);
this._infoWindowAddedToManager = true;
this._updateOpenState();
this._registerEventListeners();
};
/** @internal */
SebmGoogleMapInfoWindow.prototype.ngOnChanges = function (changes) {
if (!this._infoWindowAddedToManager) {
return;
}
if ((changes['latitude'] || changes['longitude']) && typeof this.latitude === 'number' &&
typeof this.longitude === 'number') {
this._infoWindowManager.setPosition(this);
}
if (changes['zIndex']) {
this._infoWindowManager.setZIndex(this);
}
if (changes['isOpen']) {
this._updateOpenState();
}
this._setInfoWindowOptions(changes);
};
SebmGoogleMapInfoWindow.prototype._registerEventListeners = function () {
var _this = this;
this._infoWindowManager.createEventObservable('closeclick', this).subscribe(function () {
_this.isOpen = false;
_this.infoWindowClose.emit();
});
};
SebmGoogleMapInfoWindow.prototype._updateOpenState = function () {
this.isOpen ? this.open() : this.close();
};
SebmGoogleMapInfoWindow.prototype._setInfoWindowOptions = function (changes) {
var options = {};
var optionKeys = Object.keys(changes).filter(function (k) { return SebmGoogleMapInfoWindow._infoWindowOptionsInputs.indexOf(k) !== -1; });
optionKeys.forEach(function (k) { options[k] = changes[k].currentValue; });
this._infoWindowManager.setOptions(this, options);
};
/**
* Opens the info window.
*/
SebmGoogleMapInfoWindow.prototype.open = function () { return this._infoWindowManager.open(this); };
/**
* Closes the info window.
*/
SebmGoogleMapInfoWindow.prototype.close = function () {
var _this = this;
return this._infoWindowManager.close(this).then(function () { _this.infoWindowClose.emit(); });
};
/** @internal */
SebmGoogleMapInfoWindow.prototype.id = function () { return this._id; };
/** @internal */
SebmGoogleMapInfoWindow.prototype.toString = function () { return 'SebmGoogleMapInfoWindow-' + this._id.toString(); };
/** @internal */
SebmGoogleMapInfoWindow.prototype.ngOnDestroy = function () { this._infoWindowManager.deleteInfoWindow(this); };
SebmGoogleMapInfoWindow._infoWindowOptionsInputs = ['disableAutoPan', 'maxWidth'];
SebmGoogleMapInfoWindow.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'sebm-google-map-info-window',
inputs: ['latitude', 'longitude', 'disableAutoPan', 'isOpen', 'zIndex', 'maxWidth'],
outputs: ['infoWindowClose'],
template: "<div class='sebm-google-map-info-window-content'>\n <ng-content></ng-content>\n </div>\n "
},] },
];
/** @nocollapse */
SebmGoogleMapInfoWindow.ctorParameters = function () { return [
{ type: InfoWindowManager, },
{ type: _angular_core.ElementRef, },
]; };
return SebmGoogleMapInfoWindow;
}());
var layerId = 0;
var SebmGoogleMapKmlLayer = (function () {
function SebmGoogleMapKmlLayer(_manager) {
this._manager = _manager;
this._addedToManager = false;
this._id = (layerId++).toString();
this._subscriptions = [];
/**
* If true, the layer receives mouse events. Default value is true.
*/
this.clickable = true;
/**
* By default, the input map is centered and zoomed to the bounding box of the contents of the
* layer.
* If this option is set to true, the viewport is left unchanged, unless the map's center and zoom
* were never set.
*/
this.preserveViewport = false;
/**
* Whether to render the screen overlays. Default true.
*/
this.screenOverlays = true;
/**
* Suppress the rendering of info windows when layer features are clicked.
*/
this.suppressInfoWindows = false;
/**
* The URL of the KML document to display.
*/
this.url = null;
/**
* The z-index of the layer.
*/
this.zIndex = null;
/**