ng2-heremaps
Version:
Here Maps for Angular 6
411 lines • 12.6 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component, Input, forwardRef, ElementRef, QueryList, Attribute, ContentChildren, Output, EventEmitter } from '@angular/core';
import { HereMapsManager } from '../services/maps-manager';
import { BaseMapComponent } from './base-map-component';
import { MapUIService } from '../services/map-ui.service';
import { toLatLng } from '../utils/position';
/**
* Component that should render and initialize map instance.
* Use it to define point in html document where map should be rendered
*/
export class MapComponent {
/**
* @param {?} _name
* @param {?} _elem
* @param {?} _mapsManager
*/
constructor(_name, _elem, _mapsManager) {
this._name = _name;
this._elem = _elem;
this._mapsManager = _mapsManager;
this.ui = new Promise(resolve => (this._uiResolver = resolve));
/**
* Should map auto resize bounds to current set of markers
*/
this.autoFitMarkers = true;
/**
* Enables/disables zoom and center on double click. Enabled by default.
*/
this.enableDoubleClickZoom = true;
/**
* If false, prevents the map from being dragged.
* Dragging is enabled by default.
*/
this.draggable = true;
/**
* If false, prevents the map from being controlled by the keyboard.
* Keyboard shortcuts are enabled by default.
*/
this.keyboardShortcuts = true;
/**
* If false, disables scrollwheel zooming on the map.
* The scrollwheel is enabled by default.
*/
this.scrollwheel = true;
/**
* Map zoom level.
*/
this.zoom = 5;
/**
* Enables/disables all default UI.
*/
this.disableDefaultUI = false;
/**
* Enabled/Disabled state of the Map type control.
*/
this.mapTypeControl = false;
/**
* Enabled/Disabled state of the Rotate control.
*/
this.rotateControl = false;
/**
* Enabled/Disabled state of the Scale control.
*/
this.scaleControl = true;
/**
* Enabled/Disabled state of the Street View Pegman control.
*/
this.streetViewControl = false;
this.animateZoom = true;
/**
* Enabled/Disabled state of the Zoom control
*/
this.zoomControl = true;
/**
* Notifies subscribers that map is updated
*/
this.update = new EventEmitter();
/**
* Fires when user interacts with map by clicking on it
*/
this.clickMap = new EventEmitter();
this._id = MapComponent.counters++;
this._map = new Promise(resolve => (this._mapResolver = resolve));
}
/**
* Color used for the background of the Map div.
* This color will be visible when tiles have not yet loaded as the user pans.
* Note: This option can only be set when the map is initialized.
* @param {?} value
* @return {?}
*/
set backgroundColor(value) {
if (this._mapBackgroundColor) {
console.warn('Option "backgroundColor" can only be set when the map is initialized');
return;
}
this._mapBackgroundColor = value;
}
/**
* The initial Map center. Required.
* @param {?} value
* @return {?}
*/
set center(value) {
if (!value) {
return;
}
const /** @type {?} */ mapCenter = toLatLng(value);
this._map.then(map => {
if (mapCenter.lat && mapCenter.lng) {
map.setCenter(toLatLng(value));
}
});
if (mapCenter.lat && mapCenter.lng)
this._center = toLatLng(value);
}
/**
* @return {?}
*/
get center() {
return this._center;
}
/**
* When resolved, returns Heremap instance
* @return {?}
*/
getMap() {
return this._map;
}
/**
* @return {?}
*/
ngOnInit() {
this._mapsManager
.createMap(this._elem.nativeElement.querySelector('.heremap-container'), this.getOptions(), this.getControlOptions())
.then(({ map: map, ui: ui, platform: platform }) => {
this._mapsManager.addMap(this.toString(), map);
this._uiResolver(ui);
this._mapResolver(map);
this.attachEvents(map);
});
}
/**
* @return {?}
*/
ngOnDestroy() {
this._mapsManager.removeMap(this.toString());
this._mapComponentsSubscriptions.unsubscribe();
}
/**
* @return {?}
*/
ngAfterContentInit() {
this._mapComponentsSubscriptions = this.mapComponents.changes.subscribe(() => {
this.attachComponentsToMap();
});
this.attachComponentsToMap();
}
/**
* @return {?}
*/
toString() {
return this._name ? this._name : `fh.here-maps-${this._id}`;
}
/**
* Fits map to given bounds
* @param {?} bounds
* @return {?}
*/
fitBounds(bounds) {
this.resetMapBounds(bounds);
}
/**
* @return {?}
*/
attachComponentsToMap() {
this._map.then(map => {
this.ui.then(ui => {
this.mapComponents.filter(v => !v.hasMapComponent()).forEach(v => {
v.setMapComponent(this, map, ui);
});
});
});
}
/**
* @return {?}
*/
getOptions() {
return {
center: this.center ? this.latLngCenter() : { lat: 0, lng: 0 },
zoom: this.zoom || 5
};
}
/**
* @return {?}
*/
getControlOptions() {
return {
mapTypeControl: this.mapTypeControl,
rotateControl: this.rotateControl,
scaleControl: this.scaleControl,
streetViewControl: this.streetViewControl,
zoomControl: this.zoomControl,
enableDoubleClickZoom: this.enableDoubleClickZoom,
draggable: this.draggable,
keyboardShortcuts: this.keyboardShortcuts,
scrollwheel: this.scrollwheel
};
}
/**
* @param {?} bounds
* @return {?}
*/
resetMapBounds(bounds) {
this._map.then(map => {
map.setViewBounds(bounds, this.animateZoom);
});
}
/**
* @param {?} map
* @return {?}
*/
attachEvents(map) {
map.addEventListener('mapviewchangeend', () => {
this.update.emit(map);
});
map.addEventListener('tap', (e) => {
const /** @type {?} */ pointer = e.currentPointer;
const /** @type {?} */ coordinates = map.screenToGeo(pointer.viewportX, pointer.viewportY);
this.clickMap.emit(Object.assign({}, e, { coordinates }));
});
}
/**
* @return {?}
*/
latLngCenter() {
const /** @type {?} */ lat = (/** @type {?} */ (this.center)).lat
? (/** @type {?} */ (this.center)).lat
: (/** @type {?} */ (this.center)).latitude;
const /** @type {?} */ lng = (/** @type {?} */ (this.center)).lng
? (/** @type {?} */ (this.center)).lng
: (/** @type {?} */ (this.center)).longitude;
return { lat, lng };
}
}
MapComponent.counters = 0;
MapComponent.decorators = [
{ type: Component, args: [{
selector: 'heremap',
template: `
<div class="heremap-container" style="width: inherit; height: inherit"></div>
<ng-content></ng-content>
`,
providers: [{ provide: MapUIService, useClass: MapUIService }],
styles: [':host {width: 100%; height: 100%}']
}] }
];
/** @nocollapse */
MapComponent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Attribute, args: ['name',] },] },
{ type: ElementRef, },
{ type: HereMapsManager, },
];
MapComponent.propDecorators = {
"mapComponents": [{ type: ContentChildren, args: [forwardRef(() => BaseMapComponent), {},] },],
"autoFitMarkers": [{ type: Input },],
"backgroundColor": [{ type: Input },],
"center": [{ type: Input },],
"enableDoubleClickZoom": [{ type: Input },],
"draggable": [{ type: Input },],
"keyboardShortcuts": [{ type: Input },],
"scrollwheel": [{ type: Input },],
"zoom": [{ type: Input },],
"minZoom": [{ type: Input },],
"maxZoom": [{ type: Input },],
"disableDefaultUI": [{ type: Input },],
"mapTypeControl": [{ type: Input },],
"rotateControl": [{ type: Input },],
"scaleControl": [{ type: Input },],
"streetViewControl": [{ type: Input },],
"animateZoom": [{ type: Input },],
"zoomControl": [{ type: Input },],
"update": [{ type: Output },],
"clickMap": [{ type: Output },],
};
function MapComponent_tsickle_Closure_declarations() {
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
MapComponent.decorators;
/**
* @nocollapse
* @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
*/
MapComponent.ctorParameters;
/** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
MapComponent.propDecorators;
/** @type {?} */
MapComponent.counters;
/** @type {?} */
MapComponent.prototype.mapComponents;
/** @type {?} */
MapComponent.prototype.ui;
/**
* Should map auto resize bounds to current set of markers
* @type {?}
*/
MapComponent.prototype.autoFitMarkers;
/**
* Enables/disables zoom and center on double click. Enabled by default.
* @type {?}
*/
MapComponent.prototype.enableDoubleClickZoom;
/**
* If false, prevents the map from being dragged.
* Dragging is enabled by default.
* @type {?}
*/
MapComponent.prototype.draggable;
/**
* If false, prevents the map from being controlled by the keyboard.
* Keyboard shortcuts are enabled by default.
* @type {?}
*/
MapComponent.prototype.keyboardShortcuts;
/**
* If false, disables scrollwheel zooming on the map.
* The scrollwheel is enabled by default.
* @type {?}
*/
MapComponent.prototype.scrollwheel;
/**
* Map zoom level.
* @type {?}
*/
MapComponent.prototype.zoom;
/**
* The minimum zoom level which will be displayed on the map.
* @type {?}
*/
MapComponent.prototype.minZoom;
/**
* The maximum zoom level which will be displayed on the map.
* @type {?}
*/
MapComponent.prototype.maxZoom;
/**
* Enables/disables all default UI.
* @type {?}
*/
MapComponent.prototype.disableDefaultUI;
/**
* Enabled/Disabled state of the Map type control.
* @type {?}
*/
MapComponent.prototype.mapTypeControl;
/**
* Enabled/Disabled state of the Rotate control.
* @type {?}
*/
MapComponent.prototype.rotateControl;
/**
* Enabled/Disabled state of the Scale control.
* @type {?}
*/
MapComponent.prototype.scaleControl;
/**
* Enabled/Disabled state of the Street View Pegman control.
* @type {?}
*/
MapComponent.prototype.streetViewControl;
/** @type {?} */
MapComponent.prototype.animateZoom;
/**
* Enabled/Disabled state of the Zoom control
* @type {?}
*/
MapComponent.prototype.zoomControl;
/**
* Notifies subscribers that map is updated
* @type {?}
*/
MapComponent.prototype.update;
/**
* Fires when user interacts with map by clicking on it
* @type {?}
*/
MapComponent.prototype.clickMap;
/** @type {?} */
MapComponent.prototype._uiResolver;
/** @type {?} */
MapComponent.prototype._id;
/** @type {?} */
MapComponent.prototype._map;
/** @type {?} */
MapComponent.prototype._mapResolver;
/** @type {?} */
MapComponent.prototype._mapBackgroundColor;
/** @type {?} */
MapComponent.prototype._mapComponentsSubscriptions;
/** @type {?} */
MapComponent.prototype._center;
/** @type {?} */
MapComponent.prototype._name;
/** @type {?} */
MapComponent.prototype._elem;
/** @type {?} */
MapComponent.prototype._mapsManager;
}
//# sourceMappingURL=map.js.map