ng2-heremaps
Version:
Here Maps for Angular 6
271 lines • 8.19 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';
/**
* Holds instance of the heremap marker. Please note that directive must be placed inside
* map component, otherwise it will never be rendered.
*/
export class MapMakerDirective extends BaseMapComponent {
/**
* @param {?} _mapsManager
*/
constructor(_mapsManager) {
super();
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;
}
/**
* Marker position
* @param {?} point
* @return {?}
*/
set position(point) {
const /** @type {?} */ position = toLatLng(point);
this._mapsManager
.createMarker({ position })
.then((marker) => {
this.bindEvents(marker);
this.proxyResolver(marker);
});
this.proxy.then(marker => {
marker.setPosition(toLatLng(point));
});
}
/**
* If true, the marker receives mouse and touch events.
* Default value is true.
* @param {?} mode
* @return {?}
*/
set clickable(mode) {
// this.proxy.then(marker => marker.setClickable(mode));
this._clickable = mode;
}
/**
* 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 {?}
*/
set icon(value) {
this.proxy.then(marker => {
if (typeof value === 'string') {
value = new H.map.Icon(value, {
size: { w: 20, h: 20 },
crossOrigin: false
});
}
marker.setIcon(value);
});
}
/**
* The marker's opacity between 0.0 and 1.0.
* @param {?} value
* @return {?}
*/
set opacity(value) {
// this.proxy.then(marker => marker.setOpacity(value));
}
/**
* Rollover text
* @param {?} value
* @return {?}
*/
set title(value) {
// this.proxy.then(marker => marker.setTitle(value));
}
/**
* If true, the marker is visible
* @param {?} mode
* @return {?}
*/
set visible(mode) {
this.proxy.then(marker => marker.setVisibility(mode));
}
/**
* Set marker zIndex for displayed on the map
* @param {?} value
* @return {?}
*/
set zIndex(value) {
this.proxy.then(marker => marker.setZIndex(value));
}
/**
* @param {?} value
* @return {?}
*/
set setDelay(value) {
this.delay = value;
}
/**
* @return {?}
*/
ngOnDestroy() {
this.proxy.then(marker => {
marker.dispose();
this.mapComponent.getMap().then(map => {
if (map.getObjects().indexOf(marker) >= 0) {
map.removeObject(marker);
}
});
});
}
/**
* @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));
}
/**
* @param {?} marker
* @return {?}
*/
bindEvents(marker) {
marker.addEventListener('tap', e => {
if (this._clickable) {
this.click.emit(e);
}
});
marker.addEventListener('dbltap', 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', e => this.visible_changed.emit(e));
}
}
MapMakerDirective.decorators = [
{ type: Directive, args: [{
selector: 'map-marker',
providers: [
{
provide: BaseMapComponent,
useExisting: forwardRef(() => MapMakerDirective)
}
]
},] }
];
/** @nocollapse */
MapMakerDirective.ctorParameters = () => [
{ 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',] },],
};
function MapMakerDirective_tsickle_Closure_declarations() {
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
MapMakerDirective.decorators;
/**
* @nocollapse
* @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
*/
MapMakerDirective.ctorParameters;
/** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
MapMakerDirective.propDecorators;
/**
* This event is fired when the marker icon was clicked.
* @type {?}
*/
MapMakerDirective.prototype.click;
/**
* This event is fired when the marker icon was double clicked.
* @type {?}
*/
MapMakerDirective.prototype.dblclick;
/**
* This event is fired for a rightclick on the marker.
* @type {?}
*/
MapMakerDirective.prototype.rightclick;
/**
* This event is fired when the marker position property changes.
* @type {?}
*/
MapMakerDirective.prototype.position_changed;
/**
* This event is fired when the marker icon property changes.
* @type {?}
*/
MapMakerDirective.prototype.icon_changed;
/**
* This event is fired when the marker title property changes.
* @type {?}
*/
MapMakerDirective.prototype.title_changed;
/**
* This event is fired when the marker visible property changes.
* @type {?}
*/
MapMakerDirective.prototype.visible_changed;
/** @type {?} */
MapMakerDirective.prototype.mapComponent;
/** @type {?} */
MapMakerDirective.prototype._clickable;
/** @type {?} */
MapMakerDirective.prototype._mapsManager;
}
//# sourceMappingURL=map-marker.js.map