UNPKG

@boldadmin/angular-google-maps

Version:
879 lines (866 loc) 27.2 kB
import { Injectable, Component, Output, NgModule } from '@angular/core'; import { EventPublisher } from '@boldadmin/event-publisher'; import { utc } from 'moment'; import { MatIconRegistry, MatIconModule } from '@angular/material'; import { DomSanitizer } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import GoogleMapsApi from 'load-google-maps-api'; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var mapsText = { searchBox: 'Search Box' }; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var Coordinates = /** @class */ (function () { function Coordinates(latitude, longitude) { this.latitude = latitude; this.longitude = longitude; } return Coordinates; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var Location = /** @class */ (function () { function Location(coordinates, radiusInMeters) { this.coordinates = coordinates; this.radiusInMeters = radiusInMeters; } return Location; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var GoogleMapsFactory = /** @class */ (function () { function GoogleMapsFactory() { } /** * @return {?} */ GoogleMapsFactory.prototype.getGoogleMaps = /** * @return {?} */ function () { return google.maps; }; /** * @param {?} options * @return {?} */ GoogleMapsFactory.prototype.createMap = /** * @param {?} options * @return {?} */ function (options) { return new google.maps.Map(document.getElementById('map'), options); }; /** * @param {?} options * @return {?} */ GoogleMapsFactory.prototype.createCircle = /** * @param {?} options * @return {?} */ function (options) { return new google.maps.Circle(options); }; /** * @param {?} options * @return {?} */ GoogleMapsFactory.prototype.createMarker = /** * @param {?} options * @return {?} */ function (options) { return new google.maps.Marker(options); }; /** * @param {?} options * @return {?} */ GoogleMapsFactory.prototype.createPolyline = /** * @param {?} options * @return {?} */ function (options) { return new google.maps.Polyline(options); }; /** * @return {?} */ GoogleMapsFactory.prototype.createSearchBox = /** * @return {?} */ function () { return new google.maps.places.SearchBox((/** @type {?} */ (document.getElementById('search-input')))); }; /** * @param {?} coordinates * @return {?} */ GoogleMapsFactory.prototype.createLatLng = /** * @param {?} coordinates * @return {?} */ function (coordinates) { return new google.maps.LatLng(coordinates.latitude, coordinates.longitude); }; /** * @return {?} */ GoogleMapsFactory.prototype.createGeocoder = /** * @return {?} */ function () { return new google.maps.Geocoder(); }; /** * @return {?} */ GoogleMapsFactory.prototype.getSearchBoxInput = /** * @return {?} */ function () { return (/** @type {?} */ (document.getElementById('search-input'))); }; /** * @param {?} width * @param {?} height * @return {?} */ GoogleMapsFactory.prototype.createSize = /** * @param {?} width * @param {?} height * @return {?} */ function (width, height) { return new google.maps.Size(width, height); }; /** * @param {?} x * @param {?} y * @return {?} */ GoogleMapsFactory.prototype.createPoint = /** * @param {?} x * @param {?} y * @return {?} */ function (x, y) { return new google.maps.Point(x, y); }; GoogleMapsFactory.decorators = [ { type: Injectable } ]; return GoogleMapsFactory; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var AngularGoogleMapsGeocoder = /** @class */ (function () { function AngularGoogleMapsGeocoder(googleMaps) { this.googleMaps = googleMaps; } /** * @param {?} address * @param {?} callback * @return {?} */ AngularGoogleMapsGeocoder.prototype.geocode = /** * @param {?} address * @param {?} callback * @return {?} */ function (address, callback) { return this.googleMaps.createGeocoder().geocode({ 'address': address }, (/** * @param {?} results * @return {?} */ function (results) { if (results !== null && results[0]) callback(new Coordinates(results[0].geometry.location.lat(), results[0].geometry.location.lng())); else callback(new Coordinates(59.9139, 10.7522)); })); }; /** * @param {?} coordinates * @param {?} callback * @return {?} */ AngularGoogleMapsGeocoder.prototype.reverseGeocode = /** * @param {?} coordinates * @param {?} callback * @return {?} */ function (coordinates, callback) { /** @type {?} */ var latLng = this.googleMaps.createLatLng(coordinates); this.googleMaps.createGeocoder().geocode({ 'location': latLng }, (/** * @param {?} results * @return {?} */ function (results) { if (results !== null && results[0]) callback(results[0].formatted_address); else callback(latLng.toString()); })); }; AngularGoogleMapsGeocoder.decorators = [ { type: Injectable } ]; /** @nocollapse */ AngularGoogleMapsGeocoder.ctorParameters = function () { return [ { type: GoogleMapsFactory } ]; }; return AngularGoogleMapsGeocoder; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var AngularGoogleMapsBuilder = /** @class */ (function () { function AngularGoogleMapsBuilder(googleMapsFactory, geocoder, eventPublisher) { this.googleMapsFactory = googleMapsFactory; this.geocoder = geocoder; this.eventPublisher = eventPublisher; } /** * @template THIS * @this {THIS} * @param {?} mapOptions * @return {THIS} */ AngularGoogleMapsBuilder.prototype.createMap = /** * @template THIS * @this {THIS} * @param {?} mapOptions * @return {THIS} */ function (mapOptions) { (/** @type {?} */ (this)).map = (/** @type {?} */ (this)).googleMapsFactory.createMap(mapOptions); return (/** @type {?} */ (this)); }; /** * @template THIS * @this {THIS} * @param {?} markerOptions * @return {THIS} */ AngularGoogleMapsBuilder.prototype.addCenterMarker = /** * @template THIS * @this {THIS} * @param {?} markerOptions * @return {THIS} */ function (markerOptions) { (/** @type {?} */ (this)).marker = (/** @type {?} */ (this)).googleMapsFactory.createMarker(markerOptions); (/** @type {?} */ (this)).marker.setPosition((/** @type {?} */ (this)).map.getCenter()); (/** @type {?} */ (this)).marker.setMap((/** @type {?} */ (this)).map); (/** @type {?} */ (this)).addMarkerListeners(); return (/** @type {?} */ (this)); }; /** * @template THIS * @this {THIS} * @param {?} circleOptions * @return {THIS} */ AngularGoogleMapsBuilder.prototype.addCircle = /** * @template THIS * @this {THIS} * @param {?} circleOptions * @return {THIS} */ function (circleOptions) { var _this = this; (/** @type {?} */ (this)).circle = (/** @type {?} */ (this)).googleMapsFactory.createCircle(circleOptions); (/** @type {?} */ (this)).circle.setMap((/** @type {?} */ (this)).map); (/** @type {?} */ (this)).circle.addListener('radius_changed', (/** * @return {?} */ function () { return (/** @type {?} */ (_this)).notifyLocationChange(); })); return (/** @type {?} */ (this)); }; /** * @template THIS * @this {THIS} * @param {?} polylineOptions * @return {THIS} */ AngularGoogleMapsBuilder.prototype.addPolyline = /** * @template THIS * @this {THIS} * @param {?} polylineOptions * @return {THIS} */ function (polylineOptions) { /** @type {?} */ var polyline = (/** @type {?} */ (this)).googleMapsFactory.createPolyline(polylineOptions); polyline.setMap((/** @type {?} */ (this)).map); return (/** @type {?} */ (this)); }; /** * @template THIS * @this {THIS} * @param {?} markerOptions * @return {THIS} */ AngularGoogleMapsBuilder.prototype.addMarker = /** * @template THIS * @this {THIS} * @param {?} markerOptions * @return {THIS} */ function (markerOptions) { /** @type {?} */ var marker = (/** @type {?} */ (this)).googleMapsFactory.createMarker(markerOptions); marker.setMap((/** @type {?} */ (this)).map); return (/** @type {?} */ (this)); }; /** * @template THIS * @this {THIS} * @return {THIS} */ AngularGoogleMapsBuilder.prototype.bindCircleToMarker = /** * @template THIS * @this {THIS} * @return {THIS} */ function () { (/** @type {?} */ (this)).circle.bindTo('center', (/** @type {?} */ (this)).marker, 'position'); return (/** @type {?} */ (this)); }; /** * @template THIS * @this {THIS} * @return {THIS} */ AngularGoogleMapsBuilder.prototype.hideMarker = /** * @template THIS * @this {THIS} * @return {THIS} */ function () { (/** @type {?} */ (this)).marker.setMap(null); return (/** @type {?} */ (this)); }; /** * @template THIS * @this {THIS} * @return {THIS} */ AngularGoogleMapsBuilder.prototype.hideCircle = /** * @template THIS * @this {THIS} * @return {THIS} */ function () { (/** @type {?} */ (this)).circle.setMap(null); return (/** @type {?} */ (this)); }; /** * @template THIS * @this {THIS} * @return {THIS} */ AngularGoogleMapsBuilder.prototype.addSearchBox = /** * @template THIS * @this {THIS} * @return {THIS} */ function () { var _this = this; /** @type {?} */ var box = (/** @type {?} */ (this)).googleMapsFactory.createSearchBox(); box.addListener('places_changed', (/** * @return {?} */ function () { /** @type {?} */ var places = box.getPlaces(); if (places[0]) { (/** @type {?} */ (_this)).changeMapLocationAndZoom(places[0].geometry.location); (/** @type {?} */ (_this)).changeMarkerLocation(places[0].geometry.location); /** @type {?} */ var loc = places[0].geometry.location; /** @type {?} */ var coordinates = new Coordinates(loc.lat(), loc.lng()); (/** @type {?} */ (_this)).eventPublisher.notify('locationChanged', new Location(coordinates, (/** @type {?} */ (_this)).circle.getRadius())); } })); return (/** @type {?} */ (this)); }; /** * @private * @return {?} */ AngularGoogleMapsBuilder.prototype.addMarkerListeners = /** * @private * @return {?} */ function () { var _this = this; this.marker.addListener('dragend', (/** * @return {?} */ function () { return _this.notifyLocationChange(); })); this.marker.addListener('dragend', (/** * @param {?} mouseEvent * @return {?} */ function (mouseEvent) { return _this.reverseGeocode(mouseEvent); })); this.map.addListener('click', (/** * @param {?} mouseEvent * @return {?} */ function (mouseEvent) { return _this.changeMarkerLocation(mouseEvent.latLng); })); this.map.addListener('click', (/** * @return {?} */ function () { return _this.notifyLocationChange(); })); this.map.addListener('click', (/** * @param {?} mouseEvent * @return {?} */ function (mouseEvent) { return _this.reverseGeocode(mouseEvent); })); }; /** * @private * @return {?} */ AngularGoogleMapsBuilder.prototype.notifyLocationChange = /** * @private * @return {?} */ function () { this.eventPublisher.notify('locationChanged', new Location(this.getCoordinates(), this.getRadius())); }; /** * @private * @return {?} */ AngularGoogleMapsBuilder.prototype.getRadius = /** * @private * @return {?} */ function () { /** @type {?} */ var radiusInMeters = 0; if (this.circle !== undefined) radiusInMeters = this.circle.getRadius(); return radiusInMeters; }; /** * @private * @return {?} */ AngularGoogleMapsBuilder.prototype.getCoordinates = /** * @private * @return {?} */ function () { /** @type {?} */ var coordinates = new Coordinates(0, 0); if (this.marker !== undefined) coordinates = new Coordinates(this.marker.getPosition().lat(), this.marker.getPosition().lng()); return coordinates; }; /** * @private * @param {?} location * @return {?} */ AngularGoogleMapsBuilder.prototype.changeMapLocationAndZoom = /** * @private * @param {?} location * @return {?} */ function (location) { this.map.panTo(location); this.map.setZoom(16); }; /** * @private * @param {?} location * @return {?} */ AngularGoogleMapsBuilder.prototype.changeMarkerLocation = /** * @private * @param {?} location * @return {?} */ function (location) { this.circle.setMap(this.map); this.marker.setMap(this.map); this.marker.setPosition(location); }; /** * @private * @param {?} e * @return {?} */ AngularGoogleMapsBuilder.prototype.reverseGeocode = /** * @private * @param {?} e * @return {?} */ function (e) { var _this = this; this.geocoder.reverseGeocode(new Coordinates(e.latLng.lat(), e.latLng.lng()), (/** * @param {?} address * @return {?} */ function (address) { return _this.eventPublisher.notify('addressReverseGeocoded', address); })); }; AngularGoogleMapsBuilder.decorators = [ { type: Injectable } ]; /** @nocollapse */ AngularGoogleMapsBuilder.ctorParameters = function () { return [ { type: GoogleMapsFactory }, { type: AngularGoogleMapsGeocoder }, { type: EventPublisher } ]; }; return AngularGoogleMapsBuilder; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var IconRegistry = /** @class */ (function () { function IconRegistry(iconRegistry, sanitizer) { this.iconRegistry = iconRegistry; this.sanitizer = sanitizer; } /** * @param {?} iconName * @param {?} resourceUrl * @return {?} */ IconRegistry.prototype.register = /** * @param {?} iconName * @param {?} resourceUrl * @return {?} */ function (iconName, resourceUrl) { this.iconRegistry.addSvgIcon(iconName, this.sanitizer.bypassSecurityTrustResourceUrl(resourceUrl)); }; IconRegistry.decorators = [ { type: Injectable } ]; /** @nocollapse */ IconRegistry.ctorParameters = function () { return [ { type: MatIconRegistry }, { type: DomSanitizer } ]; }; return IconRegistry; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var AngularGoogleMapsComponent = /** @class */ (function () { function AngularGoogleMapsComponent(googleMapsFactory, googleMapsBuilder, googleMapsGeocoder, eventPublisher, iconRegistry) { this.googleMapsFactory = googleMapsFactory; this.googleMapsBuilder = googleMapsBuilder; this.googleMapsGeocoder = googleMapsGeocoder; this.eventPublisher = eventPublisher; this.iconRegistry = iconRegistry; this.mapsText = mapsText; this.address = ''; this.mapOptions = { center: { lat: 0, lng: 0 }, mapTypeControlOptions: { mapTypeIds: ['roadmap', 'satellite'], position: this.googleMapsFactory.getGoogleMaps().ControlPosition.LEFT_BOTTOM }, zoom: 16, controlSize: 22, fullscreenControl: false }; this.markerOptions = { position: { lat: 0, lng: 0 }, draggable: true, animation: this.googleMapsFactory.getGoogleMaps().Animation.DROP }; this.circleOptions = { strokeColor: '#448aff', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#448aff', fillOpacity: 0.35, editable: true, radius: 70 }; this.previousMarkerIcon = { url: 'http://cdn.boldadmin.com.s3-website-eu-west-1.amazonaws.com/previous-marker.png' }; this.currentMarkerIcon = { url: 'http://cdn.boldadmin.com.s3-website-eu-west-1.amazonaws.com/current-marker.png' }; } /** * @return {?} */ AngularGoogleMapsComponent.prototype.ngOnInit = /** * @return {?} */ function () { var _this = this; this.eventPublisher.subscribe('addressReverseGeocoded', (/** * @param {?} address * @return {?} */ function (address) { return _this.address = address; })); this.iconRegistry.register('expand', './assets/expand.svg'); this.iconRegistry.register('collapse', './assets/collapse.svg'); }; /** * @return {?} */ AngularGoogleMapsComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this.eventPublisher.unsubscribeAll('addressReverseGeocoded'); }; /** * @param {?} focusLocation * @return {?} */ AngularGoogleMapsComponent.prototype.createMapByLocation = /** * @param {?} focusLocation * @return {?} */ function (focusLocation) { var _this = this; this.googleMapsGeocoder.reverseGeocode(focusLocation.coordinates, (/** * @param {?} address * @return {?} */ function (address) { return _this.address = address; })); this.circleOptions.radius = focusLocation.radiusInMeters; this.changeMapCenter(focusLocation.coordinates); this.googleMapsBuilder .createMap(this.mapOptions) .addCenterMarker(this.markerOptions) .addCircle(this.circleOptions) .bindCircleToMarker() .addSearchBox(); }; /** * @param {?} address * @return {?} */ AngularGoogleMapsComponent.prototype.createMapByAddress = /** * @param {?} address * @return {?} */ function (address) { var _this = this; this.googleMapsGeocoder.geocode(address, (/** * @param {?} coordinates * @return {?} */ function (coordinates) { _this.changeMapCenter(coordinates); _this.googleMapsBuilder .createMap(_this.mapOptions) .addCenterMarker(_this.markerOptions) .addCircle(_this.circleOptions) .bindCircleToMarker() .hideMarker() .hideCircle() .addSearchBox(); })); }; /** * @return {?} */ AngularGoogleMapsComponent.prototype.notifyMapResize = /** * @return {?} */ function () { this.eventPublisher.notify('resizeMap'); }; /** * @param {?} timestampCoordinatesList * @param {?} name * @return {?} */ AngularGoogleMapsComponent.prototype.addTravelPath = /** * @param {?} timestampCoordinatesList * @param {?} name * @return {?} */ function (timestampCoordinatesList, name) { var _this = this; timestampCoordinatesList.forEach((/** * @param {?} timestampCoordinates * @param {?} index * @return {?} */ function (timestampCoordinates, index) { /** @type {?} */ var icon = index === 0 ? _this.currentMarkerIcon : _this.previousMarkerIcon; /** @type {?} */ var dateTime = utc(timestampCoordinates.timestamp).format('YYYY.MM.DD HH:mm'); _this.googleMapsBuilder.addMarker({ position: _this.googleMapsFactory.createLatLng(timestampCoordinates.coordinates), title: "Name: " + name + ", Time: " + dateTime, icon: icon }); })); /** @type {?} */ var latLngs = timestampCoordinatesList.map((/** * @param {?} value * @return {?} */ function (value) { return _this.googleMapsFactory.createLatLng(value.coordinates); })); this.addPolyline(latLngs, '#' + Math.random().toString(16).substr(2, 6)); }; /** * @private * @param {?} path * @param {?} colorCode * @return {?} */ AngularGoogleMapsComponent.prototype.addPolyline = /** * @private * @param {?} path * @param {?} colorCode * @return {?} */ function (path, colorCode) { this.googleMapsBuilder.addPolyline({ geodesic: true, strokeOpacity: 0.8, strokeWeight: 1, path: path, strokeColor: colorCode }); }; /** * @private * @param {?} coordinates * @return {?} */ AngularGoogleMapsComponent.prototype.changeMapCenter = /** * @private * @param {?} coordinates * @return {?} */ function (coordinates) { this.mapOptions.center = { lat: coordinates.latitude, lng: coordinates.longitude }; }; AngularGoogleMapsComponent.decorators = [ { type: Component, args: [{ selector: 'google-maps', template: "<input id=\"search-input\" name=\"searchBox\" class=\"controls\" type=\"text\"\n placeholder=\"{{mapsText.searchBox}}\"\n [ngModelOptions]=\"{standalone: true}\"\n [(ngModel)]=\"address\"/>\n<mat-icon id=\"expand-icon\" class=\"resize-control\" svgIcon=\"expand\" (click)=\"notifyMapResize()\"></mat-icon>\n<mat-icon id=\"collapse-icon\" class=\"resize-control\" svgIcon=\"collapse\" (click)=\"notifyMapResize()\"></mat-icon>\n\n<div id=\"map\"></div>\n", providers: [AngularGoogleMapsBuilder] }] } ]; /** @nocollapse */ AngularGoogleMapsComponent.ctorParameters = function () { return [ { type: GoogleMapsFactory }, { type: AngularGoogleMapsBuilder }, { type: AngularGoogleMapsGeocoder }, { type: EventPublisher }, { type: IconRegistry } ]; }; AngularGoogleMapsComponent.propDecorators = { mapOptions: [{ type: Output }], markerOptions: [{ type: Output }], circleOptions: [{ type: Output }], previousMarkerIcon: [{ type: Output }], currentMarkerIcon: [{ type: Output }] }; return AngularGoogleMapsComponent; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var GoogleMapsLoader = /** @class */ (function () { function GoogleMapsLoader() { } /** * @param {?} googleMapsApiKey * @return {?} */ GoogleMapsLoader.load = /** * @param {?} googleMapsApiKey * @return {?} */ function (googleMapsApiKey) { return Promise.resolve(GoogleMapsApi({ key: googleMapsApiKey, libraries: ['places'] })); }; GoogleMapsLoader.decorators = [ { type: Injectable } ]; return GoogleMapsLoader; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var AngularGoogleMapsModule = /** @class */ (function () { function AngularGoogleMapsModule() { } AngularGoogleMapsModule.decorators = [ { type: NgModule, args: [{ declarations: [ AngularGoogleMapsComponent ], imports: [ FormsModule, MatIconModule ], exports: [ AngularGoogleMapsComponent ], providers: [ AngularGoogleMapsGeocoder, GoogleMapsLoader, GoogleMapsFactory, IconRegistry ] },] } ]; return AngularGoogleMapsModule; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var TimestampCoordinates = /** @class */ (function () { function TimestampCoordinates(coordinates, timestamp) { this.coordinates = coordinates; this.timestamp = timestamp; } return TimestampCoordinates; }()); export { AngularGoogleMapsComponent, AngularGoogleMapsModule, Coordinates, GoogleMapsLoader, Location, TimestampCoordinates, AngularGoogleMapsBuilder as ɵa, GoogleMapsFactory as ɵb, AngularGoogleMapsGeocoder as ɵc, IconRegistry as ɵd }; //# sourceMappingURL=boldadmin-angular-google-maps.js.map