ng2-heremaps
Version:
Here Maps for Angular 6
326 lines • 9.85 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Directive, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { HereMapsManager } from '../services/maps-manager';
import { BaseMapComponent } from './base-map-component';
import { toLatLng } from '../utils/position';
/**
* Renders directions on heremap. Please note that directive must be placed inside
* map component, otherwise it will never be rendered.
*/
export class MapDirectionsDirective extends BaseMapComponent {
/**
* @param {?} _mapsManager
*/
constructor(_mapsManager) {
super();
this._mapsManager = _mapsManager;
/**
* This event is fired when the directions route changes.
*/
this.directions_changed = new EventEmitter();
/**
* By default, the input map is centered and zoomed to the bounding box of this set of directions.
* If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.
*/
this.preserveViewport = true;
this._intermediatePoints = [];
this._mapsManager.onApiLoad().then(() => {
const /** @type {?} */ lineString = new H.geo.LineString([
44.09,
-116.9,
3000,
44.082305,
-116.776059,
2000
]);
const /** @type {?} */ route = new H.map.Polyline(lineString);
this.proxyResolver(route);
});
}
/**
* @param {?} value
* @return {?}
*/
set route(value) {
if (this._route !== value) {
this._route = value;
this.tryShowRoute();
}
}
/**
* @return {?}
*/
get route() {
return this._route;
}
/**
* Origin of directions
* @param {?} value can be google.maps.LatLngLiteral or Coordinates or {latitude: number, longitude: number}
* @return {?}
*/
set origin(value) {
if (this._origin !== value) {
this._origin = value;
this.tryShowRoute();
}
}
/**
* @return {?}
*/
get origin() {
return this._origin;
}
/**
* Destination of directions
* @param {?} value can be google.maps.LatLngLiteral or Coordinates or {latitude: number, longitude: number}
* @return {?}
*/
set destination(value) {
if (this._destination !== value) {
this._destination = value;
this.tryShowRoute();
}
}
/**
* @return {?}
*/
get destination() {
return this._destination;
}
/**
* Destination of directions
* @param {?} value can be google.maps.LatLngLiteral or Coordinates or {latitude: number, longitude: number}
* @return {?}
*/
set intermediatePoints(value) {
if (this._intermediatePoints !== value) {
this._intermediatePoints = value;
this.tryShowRoute();
}
}
/**
* @return {?}
*/
get intermediatePoints() {
return this._intermediatePoints;
}
/**
* @param {?} value
* @return {?}
*/
set lineWidth(value) {
if (this._lineWidth !== value) {
this._lineWidth = value;
this.proxy.then(route => {
let /** @type {?} */ style = route.getStyle();
style = new H.map.SpatialStyle();
style.lineWidth = this._lineWidth;
route.setStyle(style);
});
}
}
/**
* @return {?}
*/
get lineWidth() {
return this._lineWidth;
}
/**
* @param {?} value
* @return {?}
*/
set strokeColor(value) {
if (this._strokeColor !== value) {
this._strokeColor = value;
this.proxy.then(route => {
let /** @type {?} */ style = route.getStyle();
style = new H.map.SpatialStyle();
style.strokeColor = value;
route.setStyle(style);
});
}
}
/**
* @return {?}
*/
get strokeColor() {
return this._strokeColor;
}
/**
* @param {?} value
* @return {?}
*/
set fillColor(value) {
if (this._fillColor !== value) {
this._fillColor = value;
this.proxy.then(route => {
let /** @type {?} */ style = route.getStyle();
style = new H.map.SpatialStyle();
style.fillColor = value;
route.setStyle(style);
});
}
}
/**
* @return {?}
*/
get fillColor() {
return this._fillColor;
}
/**
* @return {?}
*/
hasMapComponent() {
return !!this.mapComponent;
}
/**
* @param {?} component
* @param {?} map
* @param {?} ui
* @return {?}
*/
setMapComponent(component, map, ui) {
this.mapComponent = component;
this.proxy.then((mapObject) => setTimeout(() => {
if (mapObject instanceof H.map.Object) {
map.addObject(mapObject);
}
}, this.delay || 0));
}
/**
* @return {?}
*/
ngOnDestroy() {
this.mapComponent.getMap().then(map => {
this.proxy.then(polyline => {
polyline.dispose();
});
});
}
/**
* @return {?}
*/
tryShowRoute() {
const /** @type {?} */ route = this._route || [];
if (route instanceof Array && route.length > 0) {
this.renderRoute(route);
}
else if (this.origin && this.destination) {
this.renderRoute([]);
this._mapsManager
.getDirections(toLatLng(this.origin), toLatLng(this.destination), this.intermediatePoints || [])
.then(r => {
if (r && r.response && r.response.route) {
const /** @type {?} */ newRoute = r.response.route[0].shape.map(str => {
const /** @type {?} */ parts = str.split(',');
return { lat: parseFloat(parts[0]), lng: parseFloat(parts[1]) };
});
this.renderRoute(newRoute || []);
}
else {
this.renderRoute([]);
}
})
.catch(e => {
this.renderRoute([]);
});
}
else {
this.renderRoute([]);
}
}
/**
* @param {?} route
* @return {?}
*/
renderRoute(route) {
this.proxy.then(polyline => {
if (route instanceof Array && route.length > 0) {
const /** @type {?} */ lineString = new H.geo.LineString([]);
route.forEach(point => {
lineString.pushPoint(toLatLng(point));
});
polyline.setGeometry(lineString);
polyline.setVisibility(route.length > 0);
}
else {
polyline.setVisibility(false);
return;
}
});
}
/**
* @return {?}
*/
bindEvents() {
// this.proxy.then()
// directions.addListener('directions_changed', (e) => this.directions_changed.emit(e));
}
}
MapDirectionsDirective.decorators = [
{ type: Directive, args: [{
selector: 'map-directions',
providers: [
{
provide: BaseMapComponent,
useExisting: forwardRef(() => MapDirectionsDirective)
}
]
},] }
];
/** @nocollapse */
MapDirectionsDirective.ctorParameters = () => [
{ type: HereMapsManager, },
];
MapDirectionsDirective.propDecorators = {
"route": [{ type: Input },],
"origin": [{ type: Input },],
"destination": [{ type: Input },],
"intermediatePoints": [{ type: Input },],
"directions_changed": [{ type: Output },],
"preserveViewport": [{ type: Input },],
};
function MapDirectionsDirective_tsickle_Closure_declarations() {
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
MapDirectionsDirective.decorators;
/**
* @nocollapse
* @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
*/
MapDirectionsDirective.ctorParameters;
/** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
MapDirectionsDirective.propDecorators;
/** @type {?} */
MapDirectionsDirective.prototype.mapComponent;
/**
* This event is fired when the directions route changes.
* @type {?}
*/
MapDirectionsDirective.prototype.directions_changed;
/**
* By default, the input map is centered and zoomed to the bounding box of this set of directions.
* If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.
* @type {?}
*/
MapDirectionsDirective.prototype.preserveViewport;
/** @type {?} */
MapDirectionsDirective.prototype._origin;
/** @type {?} */
MapDirectionsDirective.prototype._destination;
/** @type {?} */
MapDirectionsDirective.prototype._intermediatePoints;
/** @type {?} */
MapDirectionsDirective.prototype._lineWidth;
/** @type {?} */
MapDirectionsDirective.prototype._strokeColor;
/** @type {?} */
MapDirectionsDirective.prototype._fillColor;
/** @type {?} */
MapDirectionsDirective.prototype._route;
/** @type {?} */
MapDirectionsDirective.prototype._mapsManager;
}
//# sourceMappingURL=map-directions.js.map