@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
613 lines • 24.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageOverlayDirective = void 0;
const core_1 = require("@angular/core");
const leaflet_1 = require("leaflet");
const consts_1 = require("./consts");
const layer_group_provider_1 = require("./layer-group.provider");
const layer_provider_1 = require("./layer.provider");
const i0 = require("@angular/core");
const i1 = require("./layer-group.provider");
const i2 = require("./layer.provider");
/**
* Angular2 directive for Leaflet image overlays.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-image-overlay
* [(url)]="..."
* [(display)]="..."
* [(opacity)]="..."
* [(zIndex)]="..."
* [(bounds)]="..."
* [(north)]="..."
* [(east)]="..."
* [(south)]="..."
* [(west)]="..."
*
* (add)="..."
* (remove)="..."
* (popupopen)="..."
* (popupclose)="..."
* (tooltipopen)="..."
* (tooltipclose)="..."
* (click)="..."
* (dblclick)="..."
* (mousedown)="..."
* (mouseover)="..."
* (mouseout)="..."
* (contextmenu)="..."
* (load)="..."
* (error)="..."
*
* [crossOrigin]="..."
* [alt]="..."
* [interactive]="..."
* [attribution]="..."
* >
* </yaga-image-overlay>
* </yaga-map>
* ```
*
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay Original Leaflet documentation
* @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=Image-Overlay%20Directive Unit-Test
* @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/image-overlay.directive.js.html Test coverage
* @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/imageoverlaydirective.html API documentation
* @example https://leaflet-ng2.yagajs.org/latest/examples/image-overlay-directive
*/
class ImageOverlayDirective extends leaflet_1.ImageOverlay {
constructor(layerGroupProvider, layerProvider) {
// Transparent 1px image:
super(consts_1.TRANSPARENT_PIXEL, [[0, 0], [1, 1]], {});
this.layerGroupProvider = layerGroupProvider;
/**
* Two-Way bound property for the URL.
* Use it with `<yaga-image-overlay [(url)]="someValue">` or
* `<yaga-image-overlay (urlChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-seturl Original Leaflet documentation
*/
this.urlChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the display status of the layer.
* Use it with `<yaga-image-overlay [(display)]="someValue">`
* or `<yaga-image-overlay (displayChange)="processEvent($event)">`
*/
this.displayChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the opacity of the layer.
* Use it with `<yaga-image-overlay [(opacity)]="someValue">`
* or `<yaga-image-overlay (opacityChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-opacity Original Leaflet documentation
*/
this.opacityChange = new core_1.EventEmitter();
// maybe implement -> @Output() public zIndexChange: EventEmitter<number> = new EventEmitter();
/**
* Two-Way bound property for the bounds of the image.
* Use it with `<yaga-image-overlay [(bounds)]="someValue">`
* or `<yaga-image-overlay (opacityChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
*/
this.boundsChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the north bounds of the image.
* Use it with `<yaga-image-overlay [(north)]="someValue">`
* or `<yaga-image-overlay (northChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
*/
this.northChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the east bounds of the image.
* Use it with `<yaga-image-overlay [(east)]="someValue">`
* or `<yaga-image-overlay (eastChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
*/
this.eastChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the south bounds of the image.
* Use it with `<yaga-image-overlay [(south)]="someValue">`
* or `<yaga-image-overlay (southChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
*/
this.southChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the west bounds of the image.
* Use it with `<yaga-image-overlay [(west)]="someValue">`
* or `<yaga-image-overlay (westChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
*/
this.westChange = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-image-overlay (add)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-add Original Leaflet documentation
*/
this.addEvent = new core_1.EventEmitter();
/**
* From leaflet fired remove event.
* Use it with `<yaga-image-overlay (remove)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-remove Original Leaflet documentation
*/
this.removeEvent = new core_1.EventEmitter();
/**
* From leaflet fired popupopen event.
* Use it with `<yaga-image-overlay (popupopen)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-popupopen Original Leaflet documentation
*/
this.popupopenEvent = new core_1.EventEmitter();
/**
* From leaflet fired popupclose event.
* Use it with `<yaga-image-overlay (popupclose)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-popupclose Original Leaflet documentation
*/
this.popupcloseEvent = new core_1.EventEmitter();
/**
* From leaflet fired tooltipopen event.
* Use it with `<yaga-image-overlay (tooltipopen)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-tooltipopen Original Leaflet documentation
*/
this.tooltipopenEvent = new core_1.EventEmitter();
/**
* From leaflet fired tooltipclose event.
* Use it with `<yaga-image-overlay (tooltipclose)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-tooltipclose Original Leaflet documentation
*/
this.tooltipcloseEvent = new core_1.EventEmitter();
/**
* From leaflet fired click event.
* Use it with `<yaga-image-overlay (click)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-click Original Leaflet documentation
*/
this.clickEvent = new core_1.EventEmitter();
/**
* From leaflet fired dblclick event.
* Use it with `<yaga-image-overlay (dblclick)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-dblclick Original Leaflet documentation
*/
this.dblclickEvent = new core_1.EventEmitter();
/**
* From leaflet fired mousedown event.
* Use it with `<yaga-image-overlay (mousedown)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-mousedown Original Leaflet documentation
*/
this.mousedownEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseover event.
* Use it with `<yaga-image-overlay (mouseover)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-mouseover Original Leaflet documentation
*/
this.mouseoverEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseout event.
* Use it with `<yaga-image-overlay (mouseout)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-mouseout Original Leaflet documentation
*/
this.mouseoutEvent = new core_1.EventEmitter();
/**
* From leaflet fired contextmenu event.
* Use it with `<yaga-image-overlay (contextmenu)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-contextmenu Original Leaflet documentation
*/
this.contextmenuEvent = new core_1.EventEmitter();
/**
* From leaflet fired load event.
* Use it with `<yaga-image-overlay (load)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-load Original Leaflet documentation
*/
this.loadEvent = new core_1.EventEmitter();
/**
* From leaflet fired error event.
* Use it with `<yaga-image-overlay (error)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-error Original Leaflet documentation
*/
this.errorEvent = new core_1.EventEmitter();
layerProvider.ref = this;
this.on("remove", () => {
this.displayChange.emit(false);
});
this.on("add", () => {
this.displayChange.emit(true);
});
this.layerGroupProvider.ref.addLayer(this);
// Events
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.on("popupclose", (event) => {
this.popupcloseEvent.emit(event);
});
this.on("tooltipopen", (event) => {
this.tooltipopenEvent.emit(event);
});
this.on("tooltipclose", (event) => {
this.tooltipcloseEvent.emit(event);
});
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);
});
this.on("load", (event) => {
this.loadEvent.emit(event);
});
this.on("error", (event) => {
this.errorEvent.emit(event);
});
}
/**
* This function gets called from Angular on destroy of the html-component.
* @link https://angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html
*/
ngOnDestroy() {
this.removeFrom(this.layerGroupProvider.ref);
}
/**
* Derived method of the original setUrl method.
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-seturl Original Leaflet documentation
*/
setUrl(url) {
if (this.url === url) {
return this;
}
this.urlChange.emit(url);
return super.setUrl(url);
}
/**
* Two-Way bound property for the URL.
* Use it with `<yaga-image-overlay [(url)]="someValue">` or `<yaga-image-overlay [url]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-seturl Original Leaflet documentation
*/
set url(val) {
this.setUrl(val);
}
get url() {
return this._url;
}
/**
* Derived method of the original setOpacity method.
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-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.
* Use it with `<yaga-image-overlay [(opacity)]="someValue">` or `<yaga-image-overlay [opacity]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setopacity Original Leaflet documentation
*/
set opacity(val) {
this.setOpacity(val);
}
get opacity() {
if (this.options.hasOwnProperty("opacity") && this.options.opacity !== undefined) {
return this.options.opacity;
}
return 1;
}
/**
* Two-Way bound property for the display status of the layer.
* Use it with `<yaga-image-overlay [(display)]="someValue">` or `<yaga-image-overlay [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);
}
}
}
/**
* Two-Way bound property for the display status of the layer.
* Use it with `<yaga-image-overlay [(display)]="someValue">` or `<yaga-image-overlay [display]="someValue">`
*/
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 setBounds method.
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
*/
setBounds(val) {
super.setBounds(leaflet_1.latLngBounds(val));
this.boundsChange.emit(this.bounds);
this.northChange.emit(this.north);
this.eastChange.emit(this.east);
this.southChange.emit(this.south);
this.westChange.emit(this.west);
return this;
}
/**
* Two-Way bound property for the bounds of the image.
* Use it with `<yaga-image-overlay [(bounds)]="someValue">` or `<yaga-image-overlay [bounds]="someValue">`
*/
set bounds(val) {
this.setBounds(val);
}
get bounds() {
return this.getBounds();
}
/**
* Two-Way bound property for the north bounds of the image.
* Use it with `<yaga-image-overlay [(north)]="someValue">` or `<yaga-image-overlay [north]="someValue">`
*/
set north(val) {
const oldBounds = this.getBounds();
// super because we call the change listeners ourselves
super.setBounds(leaflet_1.latLngBounds([
[oldBounds.getSouth(), oldBounds.getWest()],
[val, oldBounds.getEast()],
]));
this.boundsChange.emit(this.bounds);
this.northChange.emit(val);
}
get north() {
return this.getBounds().getNorth();
}
/**
* Two-Way bound property for the east bounds of the image.
* Use it with `<yaga-image-overlay [(east)]="someValue">` or `<yaga-image-overlay [east]="someValue">`
*/
set east(val) {
const oldBounds = this.getBounds();
super.setBounds(leaflet_1.latLngBounds([
[oldBounds.getSouth(), oldBounds.getWest()],
[oldBounds.getNorth(), val],
]));
this.boundsChange.emit(this.bounds);
this.eastChange.emit(val);
}
get east() {
return this.getBounds().getEast();
}
/**
* Two-Way bound property for the south bounds of the image.
* Use it with `<yaga-image-overlay [(south)]="someValue">` or `<yaga-image-overlay [south]="someValue">`
*/
set south(val) {
const oldBounds = this.getBounds();
super.setBounds(leaflet_1.latLngBounds([
[val, oldBounds.getWest()],
[oldBounds.getNorth(), oldBounds.getEast()],
]));
this.boundsChange.emit(this.bounds);
this.southChange.emit(val);
}
get south() {
return this.getBounds().getSouth();
}
/**
* Two-Way bound property for the west bounds of the image.
* Use it with `<yaga-image-overlay [(west)]="someValue">` or `<yaga-image-overlay [west]="someValue">`
*/
set west(val) {
const oldBounds = this.getBounds();
super.setBounds(leaflet_1.latLngBounds([
[oldBounds.getSouth(), val],
[oldBounds.getNorth(), oldBounds.getEast()],
]));
this.boundsChange.emit(this.bounds);
this.westChange.emit(val);
}
get west() {
return this.getBounds().getWest();
}
/**
* Input for the crossOrigin.
* Use it with `<yaga-image-overlay [crossOrigin]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-crossorigin Original Leaflet documentation
*/
set crossOrigin(val) {
this.options.crossOrigin = val;
this.getElement().crossOrigin = val ? "" : null;
}
get crossOrigin() {
return !!this.options.crossOrigin;
}
/**
* Input for the alternative text.
* Use it with `<yaga-image-overlay [alt]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-alt Original Leaflet documentation
*/
set alt(val) {
this.options.alt = val;
this.getElement().alt = val;
}
get alt() {
return this.getElement().alt;
}
/**
* Input for the state of interaction.
* Use it with `<yaga-image-overlay [interactive]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-interactive Original Leaflet documentation
*/
set interactive(val) {
this.options.interactive = val;
this.onRemove(this._map);
this.onAdd(this._map);
}
get interactive() {
return !!this.options.interactive;
}
/**
* Input for the attribution.
* Use it with `<yaga-image-overlay [attribution]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-attribution Original Leaflet documentation
*/
set attribution(val) {
if (this._map && this._map.attributionControl) {
const oldAttribution = this.getAttribution();
if (oldAttribution) {
this._map.attributionControl.removeAttribution(oldAttribution);
}
this._map.attributionControl.addAttribution(val);
}
this.options.attribution = val;
}
get attribution() {
return this.getAttribution() || "";
}
}
exports.ImageOverlayDirective = ImageOverlayDirective;
ImageOverlayDirective.ɵfac = function ImageOverlayDirective_Factory(t) { return new (t || ImageOverlayDirective)(i0.ɵɵdirectiveInject(i1.LayerGroupProvider), i0.ɵɵdirectiveInject(i2.LayerProvider)); };
ImageOverlayDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ImageOverlayDirective, selectors: [["yaga-image-overlay"]], inputs: { url: "url", opacity: "opacity", display: "display", bounds: "bounds", north: "north", east: "east", south: "south", west: "west", crossOrigin: "crossOrigin", alt: "alt", interactive: "interactive", attribution: "attribution" }, outputs: { urlChange: "urlChange", displayChange: "displayChange", opacityChange: "opacityChange", boundsChange: "boundsChange", northChange: "northChange", eastChange: "eastChange", southChange: "southChange", westChange: "westChange", addEvent: "add", removeEvent: "remove", popupopenEvent: "popupopen", popupcloseEvent: "popupclose", tooltipopenEvent: "tooltipopen", tooltipcloseEvent: "tooltipclose", clickEvent: "click", dblclickEvent: "dblclick", mousedownEvent: "mousedown", mouseoverEvent: "mouseover", mouseoutEvent: "mouseout", contextmenuEvent: "contextmenu", loadEvent: "load", errorEvent: "error" }, features: [i0.ɵɵProvidersFeature([layer_provider_1.LayerProvider]), i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImageOverlayDirective, [{
type: core_1.Directive,
args: [{
providers: [layer_provider_1.LayerProvider],
selector: "yaga-image-overlay",
}]
}], function () { return [{ type: i1.LayerGroupProvider }, { type: i2.LayerProvider }]; }, { urlChange: [{
type: core_1.Output
}], displayChange: [{
type: core_1.Output
}], opacityChange: [{
type: core_1.Output
}], boundsChange: [{
type: core_1.Output
}], northChange: [{
type: core_1.Output
}], eastChange: [{
type: core_1.Output
}], southChange: [{
type: core_1.Output
}], westChange: [{
type: core_1.Output
}], 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"]
}], loadEvent: [{
type: core_1.Output,
args: ["load"]
}], errorEvent: [{
type: core_1.Output,
args: ["error"]
}], url: [{
type: core_1.Input
}], opacity: [{
type: core_1.Input
}], display: [{
type: core_1.Input
}], bounds: [{
type: core_1.Input
}], north: [{
type: core_1.Input
}], east: [{
type: core_1.Input
}], south: [{
type: core_1.Input
}], west: [{
type: core_1.Input
}], crossOrigin: [{
type: core_1.Input
}], alt: [{
type: core_1.Input
}], interactive: [{
type: core_1.Input
}], attribution: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=image-overlay.directive.js.map