ng2-heremaps
Version:
Here Maps for Angular 6
1,580 lines (1,568 loc) • 65.2 kB
JavaScript
/**
* @license ng2-heremaps
* MIT license
*/
import { InjectionToken, Injectable, Inject, Component, Input, forwardRef, ElementRef, Attribute, ContentChildren, Output, EventEmitter, Directive, NgModule } from '@angular/core';
import { __extends, __assign } from 'tslib';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
// unsupported: template constraints.
/**
* Base class used to implement map extensions, e.g. markers, directions ...
* @abstract
* @template T
*/
var
// unsupported: template constraints.
/**
* Base class used to implement map extensions, e.g. markers, directions ...
* @abstract
* @template T
*/
BaseMapComponent = /** @class */ (function () {
function BaseMapComponent() {
var _this = this;
this.proxy = new Promise(function (resolve) { return (_this.proxyResolver = resolve); });
}
/**
* Override this method to notify when map become available to component/directive.
* @return {?}
*/
BaseMapComponent.prototype.hasMapComponent = /**
* Override this method to notify when map become available to component/directive.
* @return {?}
*/
function () {
return false;
};
/**
* Override this method to resolve your internal heremap objects
* @param {?} component instance of map component
* @param {?} map instance of heremap
* @param {?} ui instance of ui overlay that is instanciated during map initialization
* @return {?}
*/
BaseMapComponent.prototype.setMapComponent = /**
* Override this method to resolve your internal heremap objects
* @param {?} component instance of map component
* @param {?} map instance of heremap
* @param {?} ui instance of ui overlay that is instanciated during map initialization
* @return {?}
*/
function (component, map, ui) {
// Placeholder for fixing circular dependency, if not extended is noop.
};
return BaseMapComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ LAZY_LOADER_OPTIONS = new InjectionToken('_heremaps.LazyMapLoaderApiOptions');
/**
* Created by mjaric on 9/28/16.
* @abstract
*/
var /**
* Created by mjaric on 9/28/16.
* @abstract
*/
BaseMapsApiLoader = /** @class */ (function () {
function BaseMapsApiLoader() {
}
return BaseMapsApiLoader;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ ScriptLoaderProtocol = {
AUTO: 'auto',
HTTP: 'http',
HTTPS: 'https'
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var LazyMapsApiLoader = /** @class */ (function (_super) {
__extends(LazyMapsApiLoader, _super);
function LazyMapsApiLoader(options) {
var _this = _super.call(this) || this;
_this.platformReady = new Promise(function (resolve, reject) {
_this._rejectPlatform = reject;
_this._resolvePlatform = resolve;
});
_this._initialized = false;
_this._modules = new Map([
['core', ['js']],
['service', ['js']],
['mapevents', ['js']],
['ui', ['js', 'css']],
['clustering', ['js']],
['data', ['js']],
['places', ['js']],
['pano', ['js']]
]);
_this._options = Object.assign({}, {
apiKey: '',
appId: '',
apiVersion: '3.0',
protocol: ScriptLoaderProtocol.AUTO,
libraries: []
}, options);
var /** @type {?} */ libs = _this._options.libraries.filter(function (l) { return l !== 'core' && l !== 'service'; });
_this._options.libraries = ['service'].concat(libs);
return _this;
}
/**
* @return {?}
*/
LazyMapsApiLoader.prototype.load = /**
* @return {?}
*/
function () {
var _this = this;
if (this._initialized === false) {
this.loadModules()
.then(function (_) {
var /** @type {?} */ platform = new H.service.Platform({
app_id: _this._options.appId,
app_code: _this._options.apiKey,
useHTTPS: (/** @type {?} */ (document.location)).protocol === 'https:'
});
_this._resolvePlatform(platform);
})
.catch(function (error) {
_this._rejectPlatform(error);
});
}
return this.platformReady;
};
/**
* @return {?}
*/
LazyMapsApiLoader.prototype.loadModules = /**
* @return {?}
*/
function () {
var _this = this;
// Load the Core first then the rest of the files
return this.loadModule('core').then(function () {
return Promise.all(_this._options.libraries
.reduce(_this.distinct, [])
.map(function (moduleName) { return _this.loadModule(moduleName); }));
});
};
/**
* @param {?} moduleName
* @return {?}
*/
LazyMapsApiLoader.prototype.loadModule = /**
* @param {?} moduleName
* @return {?}
*/
function (moduleName) {
var _this = this;
var /** @type {?} */ mod = this._modules.get(moduleName);
if (mod === void 0) {
var /** @type {?} */ error = new Error("Unknown module " + moduleName);
return Promise.reject(error);
}
if (mod.indexOf('css') > -1) {
document.body.appendChild(this.createStylesheet(moduleName));
}
return new Promise(function (resolve, reject) {
var /** @type {?} */ el = _this.createScript(moduleName, resolve, reject);
document.body.appendChild(el);
});
};
/**
* @param {?} moduleName
* @return {?}
*/
LazyMapsApiLoader.prototype.createStylesheet = /**
* @param {?} moduleName
* @return {?}
*/
function (moduleName) {
var /** @type {?} */ element = document.createElement('link');
element.rel = 'stylesheet';
element.href = this.createModuleUrl(moduleName, 'css');
if (console !== void 0) {
element.onerror = console.error.bind(console);
}
return element;
};
/**
* @param {?} moduleName
* @param {?} onLoad
* @param {?} onError
* @return {?}
*/
LazyMapsApiLoader.prototype.createScript = /**
* @param {?} moduleName
* @param {?} onLoad
* @param {?} onError
* @return {?}
*/
function (moduleName, onLoad, onError) {
var /** @type {?} */ script = document.createElement('script');
script.type = 'text/javascript';
script.src = this.createModuleUrl(moduleName, 'js');
script.async = true;
script.defer = true;
script.addEventListener('error', onError);
script.addEventListener('load', onLoad);
return script;
};
/**
* @param {?} module
* @param {?=} ext
* @return {?}
*/
LazyMapsApiLoader.prototype.createModuleUrl = /**
* @param {?} module
* @param {?=} ext
* @return {?}
*/
function (module, ext) {
if (ext === void 0) { ext = 'js'; }
var /** @type {?} */ protocol = 'https:', /** @type {?} */
// (document.location as any).protocol,
version = this._options.apiVersion;
return protocol + "//js.api.here.com/v3/" + version + "/mapsjs-" + module + "." + ext;
};
/**
* @param {?} acc
* @param {?} next
* @return {?}
*/
LazyMapsApiLoader.prototype.distinct = /**
* @param {?} acc
* @param {?} next
* @return {?}
*/
function (acc, next) {
if (acc.indexOf(next) > -1) {
return acc;
}
return acc.concat([next]);
};
LazyMapsApiLoader.decorators = [
{ type: Injectable }
];
/** @nocollapse */
LazyMapsApiLoader.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [LAZY_LOADER_OPTIONS,] },] },
]; };
return LazyMapsApiLoader;
}(BaseMapsApiLoader));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ DefaultCoords = {
latitude: 40.73061,
longitude: -73.935242
};
/**
* @return {?}
*/
function noop() {
// noop
}
/**
* Service responsible to execute arbitrary functions in specific google map context
*/
var HereMapsManager = /** @class */ (function () {
function HereMapsManager(loader) {
this.loader = loader;
this._maps = new Map();
// check browser location
this.getBrowserLocation().then(noop);
// preload map immediately
this._loadPromise = this.loader.load();
}
/**
* @return {?}
*/
HereMapsManager.prototype.onApiLoad = /**
* @return {?}
*/
function () {
return this.loader.platformReady;
};
/**
* @param {?} options
* @return {?}
*/
HereMapsManager.prototype.createMarker = /**
* @param {?} options
* @return {?}
*/
function (options) {
return this.loader.platformReady.then(function () {
return new H.map.Marker(/** @type {?} */ (options.position));
});
};
/**
* @param {?} options
* @return {?}
*/
HereMapsManager.prototype.createBubble = /**
* @param {?} options
* @return {?}
*/
function (options) {
return this.loader.platformReady.then(function () {
return new H.ui.InfoBubble(/** @type {?} */ (options.position));
});
};
/**
* @param {?} origin
* @param {?} destination
* @param {?=} intermediatePoints
* @return {?}
*/
HereMapsManager.prototype.getDirections = /**
* @param {?} origin
* @param {?} destination
* @param {?=} intermediatePoints
* @return {?}
*/
function (origin, destination, intermediatePoints) {
var _this = this;
if (intermediatePoints === void 0) { intermediatePoints = []; }
return this.loader.platformReady.then(function (platform) {
var /** @type {?} */ router = platform.getRoutingService();
return new Promise(function (resolve, reject) {
var /** @type {?} */ params = {
mode: 'balanced;truck',
representation: 'navigation'
};
var /** @type {?} */ waypoints = [origin].concat(intermediatePoints, [destination]);
waypoints.forEach(function (waypoint, index) {
return (params["waypoint" + index] = _this.generateWaypointParam(waypoint, index === 0 || index === waypoints.length - 1));
});
router.calculateRoute(params, function (result) { return resolve(result); }, function (error) {
console.error({
message: 'fail to get directions',
error: error
});
reject(error);
});
});
});
};
/**
* @param {?} el
* @param {?=} options
* @param {?=} controls
* @return {?}
*/
HereMapsManager.prototype.createMap = /**
* @param {?} el
* @param {?=} options
* @param {?=} controls
* @return {?}
*/
function (el, options, controls) {
var _this = this;
return this.loader.platformReady.then(function (platform) {
var /** @type {?} */ defaultLayers = _this._defaultLayers || platform.createDefaultLayers();
_this._defaultLayers = defaultLayers;
var /** @type {?} */ map = new H.Map(el, defaultLayers.normal.map, options);
var /** @type {?} */ ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US');
ui.setUnitSystem(H.ui.UnitSystem.IMPERIAL);
var /** @type {?} */ mapEvents = new H.mapevents.MapEvents(map);
var /** @type {?} */ behavior = new H.mapevents.Behavior(mapEvents);
if (controls) {
if (!controls.mapTypeControl) {
ui.removeControl('mapsettings');
}
if (!controls.zoomControl) {
ui.removeControl('zoom');
}
if (!controls.scaleControl) {
ui.removeControl('scalebar');
}
if (!controls.streetViewControl && (/** @type {?} */ (H)).PanoramaView) {
ui.removeControl('panorama');
}
if (!controls.scrollwheel) {
behavior.disable(H.mapevents.Behavior.WHEELZOOM);
}
if (!controls.enableDoubleClickZoom) {
behavior.disable(H.mapevents.Behavior.DBLTAPZOOM);
}
if (!controls.draggable) {
behavior.disable(H.mapevents.Behavior.DRAGGING);
}
}
return { map: map, ui: ui, platform: platform };
});
};
/**
* @param {?} name
* @return {?}
*/
HereMapsManager.prototype.getMap = /**
* @param {?} name
* @return {?}
*/
function (name) {
var _this = this;
return this._loadPromise.then(function () { return _this._maps.get(name); });
};
/**
* @param {?} name
* @param {?} map
* @return {?}
*/
HereMapsManager.prototype.addMap = /**
* @param {?} name
* @param {?} map
* @return {?}
*/
function (name, map) {
this._maps.set(name, map);
};
/**
* @param {?} name
* @return {?}
*/
HereMapsManager.prototype.removeMap = /**
* @param {?} name
* @return {?}
*/
function (name) {
return this._maps.delete(name);
};
/**
* @return {?}
*/
HereMapsManager.prototype.getBrowserLocation = /**
* @return {?}
*/
function () {
if (this._browserLocationPromise) {
return this._browserLocationPromise;
}
return (this._browserLocationPromise = new Promise(function (resolve) {
if (location.protocol === 'https' && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (success) {
resolve(success.coords);
}, function (error) {
console.error(error);
if (error.code !== 1) {
console.warn("Permission is accepted but error encounter with message: " + error.message);
}
// if user didn't answer return default
resolve(DefaultCoords);
});
}
else {
// if browser do not support location API return default (NYC)
resolve(DefaultCoords);
}
}));
};
/**
* @param {?=} points
* @return {?}
*/
HereMapsManager.prototype.calculateMapBounds = /**
* @param {?=} points
* @return {?}
*/
function (points) {
if (points === void 0) { points = []; }
return this.loader.platformReady.then(function (_) {
var /** @type {?} */ bounds = new H.map.Group().getBounds();
if (points && points.length > 1) {
points.forEach(function (m) {
if (m instanceof H.map.AbstractMarker) {
bounds.mergePoint(m.getPosition());
}
else {
bounds.mergePoint({
lat: (/** @type {?} */ (m)).latitude !== void 0
? (/** @type {?} */ (m)).latitude
: (/** @type {?} */ (m)).lat,
lng: (/** @type {?} */ (m)).longitude !== void 0
? (/** @type {?} */ (m)).longitude
: (/** @type {?} */ (m)).lng
});
}
});
return Promise.resolve(bounds);
}
return Promise.resolve(bounds);
});
};
/**
* @param {?} coordinates
* @param {?=} end
* @return {?}
*/
HereMapsManager.prototype.generateWaypointParam = /**
* @param {?} coordinates
* @param {?=} end
* @return {?}
*/
function (coordinates, end) {
if (end === void 0) { end = false; }
var /** @type {?} */ lat = (/** @type {?} */ (coordinates)).lat || (/** @type {?} */ (coordinates)).latitude || 0;
var /** @type {?} */ lng = (/** @type {?} */ (coordinates)).lng ||
(/** @type {?} */ (coordinates)).longitude ||
(/** @type {?} */ (coordinates)).lon ||
0;
return "geo!" + (end ? 'stopOver' : 'passThrough') + "!" + lat + "," + lng;
};
HereMapsManager.decorators = [
{ type: Injectable }
];
/** @nocollapse */
HereMapsManager.ctorParameters = function () { return [
{ type: LazyMapsApiLoader, },
]; };
return HereMapsManager;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MapUIService = /** @class */ (function () {
function MapUIService(mapManager) {
var _this = this;
this.mapManager = mapManager;
this.ui = new Promise(function (resolve) {
_this.setUi = resolve;
});
}
MapUIService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
MapUIService.ctorParameters = function () { return [
{ type: HereMapsManager, },
]; };
return MapUIService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Converts supported type of geo point to LatLong object.
* If geoPoint parameter is null or undefined then function will return geo center
* {lat: 0, lng: 0}
* @param {?} geoPoint Any supported type of geo point
* @return {?}
*/
function toLatLng(geoPoint) {
if (geoPoint) {
return {
lat: 'lat' in geoPoint
? (/** @type {?} */ (geoPoint)).lat
: (/** @type {?} */ (geoPoint)).latitude,
lng: 'lng' in geoPoint
? (/** @type {?} */ (geoPoint)).lng
: 'lon' in geoPoint
? (/** @type {?} */ (geoPoint)).lon
: (/** @type {?} */ (geoPoint)).longitude
};
}
return { lat: 0, lng: 0 };
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Component that should render and initialize map instance.
* Use it to define point in html document where map should be rendered
*/
var MapComponent = /** @class */ (function () {
function MapComponent(_name, _elem, _mapsManager) {
var _this = this;
this._name = _name;
this._elem = _elem;
this._mapsManager = _mapsManager;
this.ui = new Promise(function (resolve) { return (_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(function (resolve) { return (_this._mapResolver = resolve); });
}
Object.defineProperty(MapComponent.prototype, "backgroundColor", {
set: /**
* 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 {?}
*/
function (value) {
if (this._mapBackgroundColor) {
console.warn('Option "backgroundColor" can only be set when the map is initialized');
return;
}
this._mapBackgroundColor = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapComponent.prototype, "center", {
get: /**
* @return {?}
*/
function () {
return this._center;
},
set: /**
* The initial Map center. Required.
* @param {?} value
* @return {?}
*/
function (value) {
if (!value) {
return;
}
var /** @type {?} */ mapCenter = toLatLng(value);
this._map.then(function (map) {
if (mapCenter.lat && mapCenter.lng) {
map.setCenter(toLatLng(value));
}
});
if (mapCenter.lat && mapCenter.lng)
this._center = toLatLng(value);
},
enumerable: true,
configurable: true
});
/**
* When resolved, returns Heremap instance
*/
/**
* When resolved, returns Heremap instance
* @return {?}
*/
MapComponent.prototype.getMap = /**
* When resolved, returns Heremap instance
* @return {?}
*/
function () {
return this._map;
};
/*
* Internal logic
* **********************************************************
*/
/**
* @return {?}
*/
MapComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this._mapsManager
.createMap(this._elem.nativeElement.querySelector('.heremap-container'), this.getOptions(), this.getControlOptions())
.then(function (_a) {
var map = _a.map, ui = _a.ui, platform = _a.platform;
_this._mapsManager.addMap(_this.toString(), map);
_this._uiResolver(ui);
_this._mapResolver(map);
_this.attachEvents(map);
});
};
/**
* @return {?}
*/
MapComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._mapsManager.removeMap(this.toString());
this._mapComponentsSubscriptions.unsubscribe();
};
/**
* @return {?}
*/
MapComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._mapComponentsSubscriptions = this.mapComponents.changes.subscribe(function () {
_this.attachComponentsToMap();
});
this.attachComponentsToMap();
};
/**
* @return {?}
*/
MapComponent.prototype.toString = /**
* @return {?}
*/
function () {
return this._name ? this._name : "fh.here-maps-" + this._id;
};
/**
* Fits map to given bounds
* @param {?} bounds
* @return {?}
*/
MapComponent.prototype.fitBounds = /**
* Fits map to given bounds
* @param {?} bounds
* @return {?}
*/
function (bounds) {
this.resetMapBounds(bounds);
};
/**
* @return {?}
*/
MapComponent.prototype.attachComponentsToMap = /**
* @return {?}
*/
function () {
var _this = this;
this._map.then(function (map) {
_this.ui.then(function (ui) {
_this.mapComponents.filter(function (v) { return !v.hasMapComponent(); }).forEach(function (v) {
v.setMapComponent(_this, map, ui);
});
});
});
};
/**
* @return {?}
*/
MapComponent.prototype.getOptions = /**
* @return {?}
*/
function () {
return {
center: this.center ? this.latLngCenter() : { lat: 0, lng: 0 },
zoom: this.zoom || 5
};
};
/**
* @return {?}
*/
MapComponent.prototype.getControlOptions = /**
* @return {?}
*/
function () {
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 {?}
*/
MapComponent.prototype.resetMapBounds = /**
* @param {?} bounds
* @return {?}
*/
function (bounds) {
var _this = this;
this._map.then(function (map) {
map.setViewBounds(bounds, _this.animateZoom);
});
};
/**
* @param {?} map
* @return {?}
*/
MapComponent.prototype.attachEvents = /**
* @param {?} map
* @return {?}
*/
function (map) {
var _this = this;
map.addEventListener('mapviewchangeend', function () {
_this.update.emit(map);
});
map.addEventListener('tap', function (e) {
var /** @type {?} */ pointer = e.currentPointer;
var /** @type {?} */ coordinates = map.screenToGeo(pointer.viewportX, pointer.viewportY);
_this.clickMap.emit(__assign({}, e, { coordinates: coordinates }));
});
};
/**
* @return {?}
*/
MapComponent.prototype.latLngCenter = /**
* @return {?}
*/
function () {
var /** @type {?} */ lat = (/** @type {?} */ (this.center)).lat
? (/** @type {?} */ (this.center)).lat
: (/** @type {?} */ (this.center)).latitude;
var /** @type {?} */ lng = (/** @type {?} */ (this.center)).lng
? (/** @type {?} */ (this.center)).lng
: (/** @type {?} */ (this.center)).longitude;
return { lat: lat, lng: lng };
};
MapComponent.counters = 0;
MapComponent.decorators = [
{ type: Component, args: [{
selector: 'heremap',
template: "\n <div class=\"heremap-container\" style=\"width: inherit; height: inherit\"></div>\n <ng-content></ng-content>\n ",
providers: [{ provide: MapUIService, useClass: MapUIService }],
styles: [':host {width: 100%; height: 100%}']
}] }
];
/** @nocollapse */
MapComponent.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Attribute, args: ['name',] },] },
{ type: ElementRef, },
{ type: HereMapsManager, },
]; };
MapComponent.propDecorators = {
"mapComponents": [{ type: ContentChildren, args: [forwardRef(function () { return 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 },],
};
return MapComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Renders directions on heremap. Please note that directive must be placed inside
* map component, otherwise it will never be rendered.
*/
var MapDirectionsDirective = /** @class */ (function (_super) {
__extends(MapDirectionsDirective, _super);
function MapDirectionsDirective(_mapsManager) {
var _this = _super.call(this) || this;
_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(function () {
var /** @type {?} */ lineString = new H.geo.LineString([
44.09,
-116.9,
3000,
44.082305,
-116.776059,
2000
]);
var /** @type {?} */ route = new H.map.Polyline(lineString);
_this.proxyResolver(route);
});
return _this;
}
Object.defineProperty(MapDirectionsDirective.prototype, "route", {
get: /**
* @return {?}
*/
function () {
return this._route;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this._route !== value) {
this._route = value;
this.tryShowRoute();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapDirectionsDirective.prototype, "origin", {
get: /**
* @return {?}
*/
function () {
return this._origin;
},
set: /**
* Origin of directions
* @param {?} value can be google.maps.LatLngLiteral or Coordinates or {latitude: number, longitude: number}
* @return {?}
*/
function (value) {
if (this._origin !== value) {
this._origin = value;
this.tryShowRoute();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapDirectionsDirective.prototype, "destination", {
get: /**
* @return {?}
*/
function () {
return this._destination;
},
set: /**
* Destination of directions
* @param {?} value can be google.maps.LatLngLiteral or Coordinates or {latitude: number, longitude: number}
* @return {?}
*/
function (value) {
if (this._destination !== value) {
this._destination = value;
this.tryShowRoute();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapDirectionsDirective.prototype, "intermediatePoints", {
get: /**
* @return {?}
*/
function () {
return this._intermediatePoints;
},
set: /**
* Destination of directions
* @param {?} value can be google.maps.LatLngLiteral or Coordinates or {latitude: number, longitude: number}
* @return {?}
*/
function (value) {
if (this._intermediatePoints !== value) {
this._intermediatePoints = value;
this.tryShowRoute();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapDirectionsDirective.prototype, "lineWidth", {
get: /**
* @return {?}
*/
function () {
return this._lineWidth;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
if (this._lineWidth !== value) {
this._lineWidth = value;
this.proxy.then(function (route) {
var /** @type {?} */ style = route.getStyle();
style = new H.map.SpatialStyle();
style.lineWidth = _this._lineWidth;
route.setStyle(style);
});
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapDirectionsDirective.prototype, "strokeColor", {
get: /**
* @return {?}
*/
function () {
return this._strokeColor;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this._strokeColor !== value) {
this._strokeColor = value;
this.proxy.then(function (route) {
var /** @type {?} */ style = route.getStyle();
style = new H.map.SpatialStyle();
style.strokeColor = value;
route.setStyle(style);
});
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapDirectionsDirective.prototype, "fillColor", {
get: /**
* @return {?}
*/
function () {
return this._fillColor;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this._fillColor !== value) {
this._fillColor = value;
this.proxy.then(function (route) {
var /** @type {?} */ style = route.getStyle();
style = new H.map.SpatialStyle();
style.fillColor = value;
route.setStyle(style);
});
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MapDirectionsDirective.prototype.hasMapComponent = /**
* @return {?}
*/
function () {
return !!this.mapComponent;
};
/**
* @param {?} component
* @param {?} map
* @param {?} ui
* @return {?}
*/
MapDirectionsDirective.prototype.setMapComponent = /**
* @param {?} component
* @param {?} map
* @param {?} ui
* @return {?}
*/
function (component, map, ui) {
var _this = this;
this.mapComponent = component;
this.proxy.then(function (mapObject) {
return setTimeout(function () {
if (mapObject instanceof H.map.Object) {
map.addObject(mapObject);
}
}, _this.delay || 0);
});
};
/**
* @return {?}
*/
MapDirectionsDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _this = this;
this.mapComponent.getMap().then(function (map) {
_this.proxy.then(function (polyline) {
polyline.dispose();
});
});
};
/**
* @return {?}
*/
MapDirectionsDirective.prototype.tryShowRoute = /**
* @return {?}
*/
function () {
var _this = this;
var /** @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(function (r) {
if (r && r.response && r.response.route) {
var /** @type {?} */ newRoute = r.response.route[0].shape.map(function (str) {
var /** @type {?} */ parts = str.split(',');
return { lat: parseFloat(parts[0]), lng: parseFloat(parts[1]) };
});
_this.renderRoute(newRoute || []);
}
else {
_this.renderRoute([]);
}
})
.catch(function (e) {
_this.renderRoute([]);
});
}
else {
this.renderRoute([]);
}
};
/**
* @param {?} route
* @return {?}
*/
MapDirectionsDirective.prototype.renderRoute = /**
* @param {?} route
* @return {?}
*/
function (route) {
this.proxy.then(function (polyline) {
if (route instanceof Array && route.length > 0) {
var /** @type {?} */ lineString_1 = new H.geo.LineString([]);
route.forEach(function (point) {
lineString_1.pushPoint(toLatLng(point));
});
polyline.setGeometry(lineString_1);
polyline.setVisibility(route.length > 0);
}
else {
polyline.setVisibility(false);
return;
}
});
};
/**
* @return {?}
*/
MapDirectionsDirective.prototype.bindEvents = /**
* @return {?}
*/
function () {
// 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(function () { return MapDirectionsDirective; })
}
]
},] }
];
/** @nocollapse */
MapDirectionsDirective.ctorParameters = function () { return [
{ type: HereMapsManager, },
]; };
MapDirectionsDirective.propDecorators = {
"route": [{ type: Input },],
"origin": [{ type: Input },],
"destination": [{ type: Input },],
"intermediatePoints": [{ type: Input },],
"directions_changed": [{ type: Output },],
"preserveViewport": [{ type: Input },],
};
return MapDirectionsDirective;
}(BaseMapComponent));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Holds instance of the heremap marker. Please note that directive must be placed inside
* map component, otherwise it will never be rendered.
*/
var MapMakerDirective = /** @class */ (function (_super) {
__extends(MapMakerDirective, _super);
function MapMakerDirective(_mapsManager) {
var _this = _super.call(this) || this;
_this._mapsManager = _mapsManager;
/**
* This event is fired when the marker icon was clicked.
*/
_this.click = new EventEmitter();
/**
* This event is fired when the marker icon was double clicked.
*/
_this.dblclick = new EventEmitter();
/**
* This event is fired for a rightclick on the marker.
*/
_this.rightclick = new EventEmitter();
/**
* This event is fired when the marker position property changes.
*/
_this.position_changed = new EventEmitter();
/**
* This event is fired when the marker icon property changes.
*/
_this.icon_changed = new EventEmitter();
/**
* This event is fired when the marker title property changes.
*/
_this.title_changed = new EventEmitter();
/**
* This event is fired when the marker visible property changes.
*/
_this.visible_changed = new EventEmitter();
_this._clickable = true;
return _this;
}
Object.defineProperty(MapMakerDirective.prototype, "position", {
set: /**
* Marker position
* @param {?} point
* @return {?}
*/
function (point) {
var _this = this;
var /** @type {?} */ position = toLatLng(point);
this._mapsManager
.createMarker({ position: position })
.then(function (marker) {
_this.bindEvents(marker);
_this.proxyResolver(marker);
});
this.proxy.then(function (marker) {
marker.setPosition(toLatLng(point));
});
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapMakerDirective.prototype, "clickable", {
set: /**
* If true, the marker receives mouse and touch events.
* Default value is true.
* @param {?} mode
* @return {?}
*/
function (mode) {
// this.proxy.then(marker => marker.setClickable(mode));
this._clickable = mode;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapMakerDirective.prototype, "icon", {
set: /**
* Icon for the foreground. If a string is provided,
* it is treated as though it were an Icon with the string as url.
* @param {?} value
* @return {?}
*/
function (value) {
this.proxy.then(function (marker) {
if (typeof value === 'string') {
value = new H.map.Icon(value, {
size: { w: 20, h: 20 },
crossOrigin: false
});
}
marker.setIcon(value);
});
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapMakerDirective.prototype, "opacity", {
set: /**
* The marker's opacity between 0.0 and 1.0.
* @param {?} value
* @return {?}
*/
function (value) {
// this.proxy.then(marker => marker.setOpacity(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapMakerDirective.prototype, "title", {
set: /**
* Rollover text
* @param {?} value
* @return {?}
*/
function (value) {
// this.proxy.then(marker => marker.setTitle(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapMakerDirective.prototype, "visible", {
set: /**
* If true, the marker is visible
* @param {?} mode
* @return {?}
*/
function (mode) {
this.proxy.then(function (marker) { return marker.setVisibility(mode); });
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapMakerDirective.prototype, "zIndex", {
set: /**
* Set marker zIndex for displayed on the map
* @param {?} value
* @return {?}
*/
function (value) {
this.proxy.then(function (marker) { return marker.setZIndex(value); });
},
enumerable: true,
configurable: true
});
Object.defineProperty(MapMakerDirective.prototype, "setDelay", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.delay = value;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MapMakerDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _this = this;
this.proxy.then(function (marker) {
marker.dispose();
_this.mapComponent.getMap().then(function (map) {
if (map.getObjects().indexOf(marker) >= 0) {
map.removeObject(marker);
}
});
});
};
/**
* @return {?}
*/
MapMakerDirective.prototype.hasMapComponent = /**
* @return {?}
*/
function () {
return !!this.mapComponent;
};
/**
* @param {?} component
* @param {?} map
* @param {?} ui
* @return {?}
*/
MapMakerDirective.prototype.setMapComponent = /**
* @param {?} component
* @param {?} map
* @param {?} ui
* @return {?}
*/
function (component, map, ui) {
var _this = this;
this.mapComponent = component;
this.proxy.then(function (mapObject) {
return setTimeout(function () {
if (mapObject instanceof H.map.Object) {
map.addObject(mapObject);
}
}, _this.delay || 0);
});
};
/**
* @param {?} marker
* @return {?}
*/
MapMakerDirective.prototype.bindEvents = /**
* @param {?} marker
* @return {?}
*/
function (marker) {
var _this = this;
marker.addEventListener('tap', function (e) {
if (_this._clickable) {
_this.click.emit(e);
}
});
marker.addEventListener('dbltap', function (e) {
if (_this._clickable) {
_this.dblclick.emit(e);
}
});
// marker.addEventListener('position_changed', e => this.position_changed.emit(e));
// marker.addEventListener('title_changed', e => this.title_changed.emit(e));
// marker.addEventListener('icon_changed', e => this.icon_changed.emit(e));
marker.addEventListener('visibilitychange', function (e) {
return _this.visible_changed.emit(e);
});
};
MapMakerDirective.decorators = [
{ type: Directive, args: [{
selector: 'map-marker',
providers: [
{
provide: BaseMapComponent,
useExisting: forwardRef(function () { return MapMakerDirective; })
}
]
},] }
];
/** @nocollapse */
MapMakerDirective.ctorParameters = function () { return [
{ type: HereMapsManager, },
]; };
MapMakerDirective.propDecorators = {
"click": [{ type: Output },],
"dblclick": [{ type: Output },],
"rightclick": [{ type: Output },],
"position_changed": [{ type: Output },],
"icon_changed": [{ type: Output },],
"title_changed": [{ type: Output },],
"visible_changed": [{ type: Output },],
"position": [{ type: Input },],
"clickable": [{ type: Input },],
"icon": [{ type: Input },],
"opacity": [{ type: Input },],
"title": [{ type: Input },],
"visible": [{ type: Input },],
"zIndex": [{ type: Input },],
"setDelay": [{ type: Input, args: ['delay',] },],
};
return MapMakerDirective;
}(BaseMapComponent));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Directive that will render plyline to map. Please note that directive must be placed inside
* map component, otherwise it will never render polyline.
*/
var MapPolylineDirective = /** @class */ (function (_super) {
__extends(MapPolylineDirective, _super);
function MapPolylineDirective(mapsManager) {
var _this = _super.call(this) || this;
_this._lineWidth = 4;
mapsManager
.onApiLoad()
.then(function () {
var /** @type {?} */ strip = new H.geo.Strip();
_this.polyline = new H.map.Polyline(strip);
_this.proxyResolver(_this.polyline);
});
return _this;
}
Object.defineProperty(MapPolylineDirective.prototype, "fillColor", {
/**
* Fill color that should be used when polyline is rendered on map
*/
get: /**
* Fill color that should be used when polyline is rendered on map
* @return {?}
*/
function () {
return this._fillColor;
},
set: /**
* @param {?} color
* @return {?}
*/
function (color) {
if (this._fillColor !== color) {
this._fillColor = color;
this.proxy.then(function (p) {
var /** @type {?} */ style = Object.assign({}, p.ge