@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
680 lines • 27.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MarkerDirective = void 0;
const core_1 = require("@angular/core");
const leaflet_1 = require("leaflet");
const layer_group_provider_1 = require("./layer-group.provider");
const layer_provider_1 = require("./layer.provider");
const marker_provider_1 = require("./marker.provider");
const i0 = require("@angular/core");
const i1 = require("./layer-group.provider");
const i2 = require("./layer.provider");
const i3 = require("./marker.provider");
/**
* Angular2 directive for markers of Leaflet.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-marker
* [(draggable)]="..."
* [(display)]="..."
* [(opacity)]="..."
* [(lat)]="..."
* [(lng)]="..."
* [(position)]="..."
* [(zIndexOffset)]="..."
* [(icon)]="..."
*
* (dragend)="..."
* (dragstart)="..."
* (movestart)="..."
* (drag)="..."
* (moveend)="..."
* (add)="..."
* (remove)="..."
* (popupopen)="..."
* (popupclose)="..."
* (tooltipopen)="..."
* (tooltipclose)="..."
* (click)="..."
* (dblclick)="..."
* (mousedown)="..."
* (mouseover)="..."
* (mouseout)="..."
* (contextmenu)="..."
*
* [title]="..."
* [alt]="..."
* >
* </yaga-marker>
* </yaga-map>
* ```
*
* @link http://leafletjs.com/reference-1.2.0.html#marker Original Leaflet documentation
* @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=Marker%20Directive Unit-Test
* @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/marker.directive.js.html
* Test coverage
* @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/marker.directive.js.html API documentation
* @example https://leaflet-ng2.yagajs.org/latest/examples/marker-directive/
*/
class MarkerDirective extends leaflet_1.Marker {
constructor(layerGroupProvider, layerProvider, markerProvider) {
super([0, 0]);
this.layerGroupProvider = layerGroupProvider;
/**
* Two-Way bound property for the latlng-position of the geometry.
* Use it with `<yaga-marker [(position)]="someValue">`
* or `<yaga-marker (positionChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-setlatlng Original Leaflet documentation
*/
this.positionChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the latitude of the geometry.
* Use it with `<yaga-marker [(lat)]="someValue">`
* or `<yaga-marker (latChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-setlatlng Original Leaflet documentation
*/
this.latChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the longitude of the geometry.
* Use it with `<yaga-marker [(lng)]="someValue">`
* or `<yaga-marker (lngChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-setlatlng Original Leaflet documentation
*/
this.lngChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the opacity of the geometry.
* Use it with `<yaga-marker [(opacity)]="someValue">`
* or `<yaga-marker (opacityChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-setopacity Original Leaflet documentation
*/
this.opacityChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the display status of the geometry.
* Use it with `<yaga-marker [(display)]="someValue">`
* or `<yaga-marker (displayChange)="processEvent($event)">`
*/
this.displayChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the offset of the zIndex.
* Use it with `<yaga-marker [(zIndexOffset)]="someValue">`
* or `<yaga-marker (zIndexOffsetChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.3.0.html#marker-zindexoffset Original Leaflet documentation
*/
this.zIndexOffsetChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the draggable state.
* Use it with `<yaga-marker [(draggable)]="someValue">`
* or `<yaga-marker (draggableChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.3.0.html#marker-dragging Original Leaflet documentation
*/
this.draggableChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the icon.
* Use it with `<yaga-marker [(icon)]="someValue">`
* or `<yaga-marker (iconChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.3.0.html#marker-seticon Original Leaflet documentation
*/
this.iconChange = new core_1.EventEmitter();
this.tooltipOpenedChange = new core_1.EventEmitter();
this.popupOpenedChange = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-marker (dragend)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-dragend Original Leaflet documentation
*/
this.dragendEvent = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-marker (dragstart)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-dragstart Original Leaflet documentation
*/
this.dragstartEvent = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-marker (movestart)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-movestart Original Leaflet documentation
*/
this.movestartEvent = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-marker (drag)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-drag Original Leaflet documentation
*/
this.dragEvent = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-marker (moveend)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-moveend Original Leaflet documentation
*/
this.moveendEvent = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-marker (add)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-add Original Leaflet documentation
*/
this.addEvent = new core_1.EventEmitter();
/**
* From leaflet fired remove event.
* Use it with `<yaga-marker (remove)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-remove Original Leaflet documentation
*/
this.removeEvent = new core_1.EventEmitter();
/**
* From leaflet fired popupopen event.
* Use it with `<yaga-marker (popupopen)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-popupopen Original Leaflet documentation
*/
this.popupopenEvent = new core_1.EventEmitter();
/**
* From leaflet fired popupclose event.
* Use it with `<yaga-marker (popupclose)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-popupclose Original Leaflet documentation
*/
this.popupcloseEvent = new core_1.EventEmitter();
/**
* From leaflet fired tooltipopen event.
* Use it with `<yaga-marker (tooltipopen)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-tooltipopen Original Leaflet documentation
*/
this.tooltipopenEvent = new core_1.EventEmitter();
/**
* From leaflet fired tooltipclose event.
* Use it with `<yaga-marker (tooltipclose)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-tooltipclose Original Leaflet documentation
*/
this.tooltipcloseEvent = new core_1.EventEmitter();
/**
* From leaflet fired click event.
* Use it with `<yaga-marker (click)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-click Original Leaflet documentation
*/
this.clickEvent = new core_1.EventEmitter();
/**
* From leaflet fired dblclick event.
* Use it with `<yaga-marker (dblclick)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-dblclick Original Leaflet documentation
*/
this.dblclickEvent = new core_1.EventEmitter();
/**
* From leaflet fired mousedown event.
* Use it with `<yaga-marker (mousedown)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-mousedown Original Leaflet documentation
*/
this.mousedownEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseover event.
* Use it with `<yaga-marker (mouseover)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-mouseover Original Leaflet documentation
*/
this.mouseoverEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseout event.
* Use it with `<yaga-marker (mouseout)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-mouseout Original Leaflet documentation
*/
this.mouseoutEvent = new core_1.EventEmitter();
/**
* From leaflet fired contextmenu event.
* Use it with `<yaga-marker (contextmenu)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-contextmenu Original Leaflet documentation
*/
this.contextmenuEvent = new core_1.EventEmitter();
/**
* Internal property to stop further processing while it is not initialized
*/
this.initialized = false;
layerProvider.ref = this;
markerProvider.ref = this;
this.layerGroupProvider.ref.addLayer(this);
this.on("remove", () => {
this.displayChange.emit(false);
});
this.on("add", () => {
this.displayChange.emit(true);
});
this.on("drag", () => {
this.latChange.emit(this.getLatLng().lat);
this.lngChange.emit(this.getLatLng().lng);
this.positionChange.emit(this.getLatLng());
});
// Events
this.on("dragend", (event) => {
this.dragendEvent.emit(event);
});
this.on("dragstart", (event) => {
this.dragstartEvent.emit(event);
});
this.on("movestart", (event) => {
this.movestartEvent.emit(event);
});
this.on("drag", (event) => {
this.dragEvent.emit(event);
});
this.on("moveend", (event) => {
this.moveendEvent.emit(event);
});
this.on("add", (event) => {
this.addEvent.emit(event);
});
this.on("remove", (event) => {
this.removeEvent.emit(event);
});
this.on("popupopen", (event) => {
this.popupopenEvent.emit(event);
this.popupOpenedChange.emit(true);
});
this.on("popupclose", (event) => {
this.popupcloseEvent.emit(event);
this.popupOpenedChange.emit(false);
});
this.on("tooltipopen", (event) => {
this.tooltipopenEvent.emit(event);
this.tooltipOpenedChange.emit(true);
});
this.on("tooltipclose", (event) => {
this.tooltipcloseEvent.emit(event);
this.tooltipOpenedChange.emit(false);
});
this.on("click", (event) => {
this.clickEvent.emit(event);
});
this.on("dblclick", (event) => {
this.dblclickEvent.emit(event);
});
this.on("mousedown", (event) => {
this.mousedownEvent.emit(event);
});
this.on("mouseover", (event) => {
this.mouseoverEvent.emit(event);
});
this.on("mouseout", (event) => {
this.mouseoutEvent.emit(event);
});
this.on("contextmenu", (event) => {
this.contextmenuEvent.emit(event);
});
const oldDraggingEnable = this.dragging.enable;
const oldDraggingDisable = this.dragging.disable;
this.dragging.enable = () => {
const val = oldDraggingEnable.call(this.dragging);
this.draggableChange.emit(true);
return val;
};
this.dragging.disable = () => {
const val = oldDraggingDisable.call(this.dragging);
this.draggableChange.emit(false);
return val;
};
}
/**
* Internal method that provides the initialization of the directive
*/
ngAfterContentInit() {
this.initialized = true; // Otherwise lng gets overwritten to 0
}
/**
* Internal method to provide the removal of the layer in Leaflet, when removing it from the Angular template
*/
ngOnDestroy() {
this.removeFrom(this.layerGroupProvider.ref);
}
/**
* Two-Way bound property for the display status of the layer.
* Use it with `<yaga-marker [(display)]="someValue">` or `<yaga-marker [display]="someValue">`
*/
set display(val) {
const isDisplayed = this.display;
if (isDisplayed === val) {
return;
}
let pane;
let container;
let map;
let events; // Dictionary of functions
let eventKeys;
try {
pane = this.getPane();
container = this.getElement();
map = this._map;
events = this.getEvents();
eventKeys = Object.keys(events);
}
catch (err) {
/* istanbul ignore next */
return;
}
if (val) {
// show layer
pane.appendChild(container);
for (const eventKey of eventKeys) {
map.on(eventKey, events[eventKey], this);
}
}
else {
// hide layer
pane.removeChild(container);
for (const eventKey of eventKeys) {
map.off(eventKey, events[eventKey], this);
}
}
}
get display() {
let pane;
let container;
try {
pane = this.getPane();
container = this.getElement();
}
catch (err) {
/* istanbul ignore next */
return false;
}
/* tslint:disable:prefer-for-of */
for (let i = 0; i < pane.children.length; i += 1) {
/* tslint:enable */
/* istanbul ignore else */
if (pane.children[i] === container) {
return true;
}
}
return false;
}
/**
* Derived method of the original setLatLng method.
* @link http://leafletjs.com/reference-1.2.0.html#marker-setlatlng Original Leaflet documentation
*/
setLatLng(val) {
super.setLatLng(val);
if (this.initialized) {
this.positionChange.emit(this.getLatLng());
this.latChange.emit(this.getLatLng().lat);
this.lngChange.emit(this.getLatLng().lng);
}
return this;
}
/**
* Two-Way bound property for the position of the marker.
* Use it with `<yaga-marker [(position)]="someValue">` or `<yaga-marker [position]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-setlatlng Original Leaflet documentation
*/
set position(val) {
this.setLatLng(val);
}
get position() {
return this.getLatLng();
}
/**
* Two-Way bound property for the position of the marker.
* Use it with `<yaga-marker [(lat)]="someValue">` or `<yaga-marker [lat]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-setlatlng Original Leaflet documentation
*/
set lat(val) {
this.setLatLng([val, this.lng]);
}
get lat() {
return this.getLatLng().lat;
}
/**
* Two-Way bound property for the position of the marker.
* Use it with `<yaga-marker [(lng)]="someValue">` or `<yaga-marker [lng]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-setlatlng Original Leaflet documentation
*/
set lng(val) {
this.setLatLng([this.lat, val]);
}
get lng() {
return this.getLatLng().lng;
}
/**
* Derived method of the original setOpacity method.
* @link http://leafletjs.com/reference-1.2.0.html#marker-setopacity Original Leaflet documentation
*/
setOpacity(val) {
if (this.opacity === val) {
return this;
}
this.opacityChange.emit(val);
return super.setOpacity(val);
}
/**
* Two-Way bound property for the opacity of the marker.
* Use it with `<yaga-marker [(opacity)]="someValue">` or `<yaga-marker [opacity]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-setopacity Original Leaflet documentation
*/
set opacity(val) {
if (val === undefined) {
val = 1;
}
this.setOpacity(val);
}
get opacity() {
return this.options.opacity;
}
/**
* Two-Way bound property for the state of the popup.
* Use it with `<yaga-marker [(popupOpened)]="someValue">` or `<yaga-marker [popupOpened]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-openpopup Original Leaflet documentation
*/
set popupOpened(val) {
if (val) {
// It would not work without timeout!
this.openPopup();
return;
}
this.closePopup();
}
get popupOpened() {
return this.isPopupOpen();
}
/**
* Two-Way bound property for the state of the popup.
* Use it with `<yaga-marker [(tooltipOpened)]="someValue">` or `<yaga-marker [tooltipOpened]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-opentooltip Original Leaflet documentation
*/
set tooltipOpened(val) {
if (val) {
this.openTooltip();
return;
}
this.closeTooltip();
}
get tooltipOpened() {
return this.isTooltipOpen();
}
/**
* Derived method of the original setIcon method.
* @link http://leafletjs.com/reference-1.2.0.html#marker-seticon Original Leaflet documentation
*/
setIcon(val) {
super.setIcon(val);
this.iconChange.emit(val);
return this;
}
/**
* Two-Way bound property for the state of the popup.
* Use it with `<yaga-marker [(icon)]="someValue">` or `<yaga-marker [icon]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-seticon Original Leaflet documentation
*/
set icon(val) {
this.setIcon(val);
}
get icon() {
return this.options.icon;
}
/**
* Two-Way bound property for the state of the dragging.
* Use it with `<yaga-marker [(draggable)]="someValue">` or `<yaga-marker [draggable]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-dragging Original Leaflet documentation
*/
set draggable(val) {
if (val) {
this.dragging.enable();
return;
}
this.dragging.disable();
return;
}
get draggable() {
return this.dragging.enabled();
}
/**
* Derived method of the original setZIndexOffset method.
* @link http://leafletjs.com/reference-1.2.0.html#marker-zindexoffset Original Leaflet documentation
*/
setZIndexOffset(val) {
if (this.zIndexOffset === val) {
return this;
}
this.zIndexOffsetChange.emit(val);
return super.setZIndexOffset(val);
}
/**
* Two-Way bound property for the offset of the zIndex.
* Use it with `<yaga-marker [(draggable)]="someValue">` or `<yaga-marker [draggable]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-zindexoffset Original Leaflet documentation
*/
set zIndexOffset(val) {
this.setZIndexOffset(val);
}
get zIndexOffset() {
return this.options.zIndexOffset || 0;
}
/**
* Input for the title.
* Use it with `<yaga-marker [title]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-title Original Leaflet documentation
*/
set title(val) {
this.options.title = val;
this.getElement().setAttribute("title", val);
}
get title() {
return this.getElement().getAttribute("title") || "";
}
/**
* Input for the alternative text.
* Use it with `<yaga-marker [alt]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#marker-title Original Leaflet documentation
*/
set alt(val) {
this.options.alt = val;
if (typeof val === "string") {
this.getElement().setAttribute("alt", val);
return;
}
this.getElement().removeAttribute("alt");
}
get alt() {
return this.getElement().getAttribute("alt") || undefined;
}
}
exports.MarkerDirective = MarkerDirective;
MarkerDirective.ɵfac = function MarkerDirective_Factory(t) { return new (t || MarkerDirective)(i0.ɵɵdirectiveInject(i1.LayerGroupProvider), i0.ɵɵdirectiveInject(i2.LayerProvider), i0.ɵɵdirectiveInject(i3.MarkerProvider)); };
MarkerDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MarkerDirective, selectors: [["yaga-marker"]], inputs: { display: "display", position: "position", lat: "lat", lng: "lng", opacity: "opacity", popupOpened: "popupOpened", tooltipOpened: "tooltipOpened", icon: "icon", draggable: "draggable", zIndexOffset: "zIndexOffset", title: "title", alt: "alt" }, outputs: { positionChange: "positionChange", latChange: "latChange", lngChange: "lngChange", opacityChange: "opacityChange", displayChange: "displayChange", zIndexOffsetChange: "zIndexOffsetChange", draggableChange: "draggableChange", iconChange: "iconChange", tooltipOpenedChange: "tooltipOpenedChange", popupOpenedChange: "popupOpenedChange", dragendEvent: "dragend", dragstartEvent: "dragstart", movestartEvent: "movestart", dragEvent: "drag", moveendEvent: "moveend", addEvent: "add", removeEvent: "remove", popupopenEvent: "popupopen", popupcloseEvent: "popupclose", tooltipopenEvent: "tooltipopen", tooltipcloseEvent: "tooltipclose", clickEvent: "click", dblclickEvent: "dblclick", mousedownEvent: "mousedown", mouseoverEvent: "mouseover", mouseoutEvent: "mouseout", contextmenuEvent: "contextmenu" }, features: [i0.ɵɵProvidersFeature([layer_provider_1.LayerProvider, marker_provider_1.MarkerProvider]), i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MarkerDirective, [{
type: core_1.Directive,
args: [{
providers: [layer_provider_1.LayerProvider, marker_provider_1.MarkerProvider],
selector: "yaga-marker",
}]
}], function () { return [{ type: i1.LayerGroupProvider }, { type: i2.LayerProvider }, { type: i3.MarkerProvider }]; }, { positionChange: [{
type: core_1.Output
}], latChange: [{
type: core_1.Output
}], lngChange: [{
type: core_1.Output
}], opacityChange: [{
type: core_1.Output
}], displayChange: [{
type: core_1.Output
}], zIndexOffsetChange: [{
type: core_1.Output
}], draggableChange: [{
type: core_1.Output
}], iconChange: [{
type: core_1.Output
}], tooltipOpenedChange: [{
type: core_1.Output
}], popupOpenedChange: [{
type: core_1.Output
}], dragendEvent: [{
type: core_1.Output,
args: ["dragend"]
}], dragstartEvent: [{
type: core_1.Output,
args: ["dragstart"]
}], movestartEvent: [{
type: core_1.Output,
args: ["movestart"]
}], dragEvent: [{
type: core_1.Output,
args: ["drag"]
}], moveendEvent: [{
type: core_1.Output,
args: ["moveend"]
}], addEvent: [{
type: core_1.Output,
args: ["add"]
}], removeEvent: [{
type: core_1.Output,
args: ["remove"]
}], popupopenEvent: [{
type: core_1.Output,
args: ["popupopen"]
}], popupcloseEvent: [{
type: core_1.Output,
args: ["popupclose"]
}], tooltipopenEvent: [{
type: core_1.Output,
args: ["tooltipopen"]
}], tooltipcloseEvent: [{
type: core_1.Output,
args: ["tooltipclose"]
}], clickEvent: [{
type: core_1.Output,
args: ["click"]
}], dblclickEvent: [{
type: core_1.Output,
args: ["dblclick"]
}], mousedownEvent: [{
type: core_1.Output,
args: ["mousedown"]
}], mouseoverEvent: [{
type: core_1.Output,
args: ["mouseover"]
}], mouseoutEvent: [{
type: core_1.Output,
args: ["mouseout"]
}], contextmenuEvent: [{
type: core_1.Output,
args: ["contextmenu"]
}], display: [{
type: core_1.Input
}], position: [{
type: core_1.Input
}], lat: [{
type: core_1.Input
}], lng: [{
type: core_1.Input
}], opacity: [{
type: core_1.Input
}], popupOpened: [{
type: core_1.Input
}], tooltipOpened: [{
type: core_1.Input
}], icon: [{
type: core_1.Input
}], draggable: [{
type: core_1.Input
}], zIndexOffset: [{
type: core_1.Input
}], title: [{
type: core_1.Input
}], alt: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=marker.directive.js.map