@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
269 lines • 9.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconDirective = void 0;
const core_1 = require("@angular/core");
const leaflet_1 = require("leaflet");
const consts_1 = require("./consts");
const marker_provider_1 = require("./marker.provider");
const i0 = require("@angular/core");
const i1 = require("./marker.provider");
/**
* Angular2 directive for Leaflet icons.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-marker>
* <yaga-icon
* [iconAnchor]="..."
* [iconSize]="..."
* [popupAnchor]="..."
* [className]="..."
* [iconUrl]="..."
* [iconRetinaUrl]="..."
* [iconSize]="..."
* [iconAnchor]="..."
* [popupAnchor]="..."
* [tooltipAnchor]="..."
* [shadowUrl]="..."
* [shadowRetinaUrl]="..."
* [shadowSize]="..."
* [shadowAnchor]="...">
* </yaga-icon>
* </yaga-marker>
* </yaga-map>
* ```
*
* @link http://leafletjs.com/reference-1.2.0.html#icon Original Leaflet documentation
* @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=Icon%20Directive Unit-Test
* @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/icon.directive.js.html Test coverage
* @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/icondirective.html API documentation
* @example https://leaflet-ng2.yagajs.org/latest/examples/icon-directive/
*/
class IconDirective extends leaflet_1.Icon {
constructor(markerProvider) {
super({
iconUrl: consts_1.TRANSPARENT_PIXEL,
});
this.markerProvider = markerProvider;
/**
* This is an EventEmitter used to notify on any change in this object. It is mainly created to provide reactions
* of the marker directive on changes.
*/
this.updateEvent = new core_1.EventEmitter();
this.markerProvider.ref.setIcon(this);
}
/**
* Input for the DOM class name.
* Use it with `<yaga-icon [className]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-classname Original Leaflet documentation
*/
set className(val) {
this.options.className = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get className() {
return this.options.className;
}
/**
* Input for the icon-url.
* Use it with `<yaga-icon [iconUrl]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-iconurl Original Leaflet documentation
*/
set iconUrl(val) {
this.options.iconUrl = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get iconUrl() {
return this.options.iconUrl;
}
/**
* Input for the icon-retina-url.
* Use it with `<yaga-icon [iconRetinaUrl]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-iconretinaurl Original Leaflet documentation
*/
set iconRetinaUrl(val) {
this.options.iconRetinaUrl = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get iconRetinaUrl() {
return this.options.iconRetinaUrl;
}
/**
* Input for the icon-size.
* Use it with `<yaga-icon [iconSize]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-iconsize Original Leaflet documentation
*/
set iconSize(val) {
this.options.iconSize = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get iconSize() {
return this.options.iconSize;
}
/**
* Input for the icon-anchor.
* Use it with `<yaga-icon [iconAnchor]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-iconanchor Original Leaflet documentation
*/
set iconAnchor(val) {
this.options.iconAnchor = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get iconAnchor() {
return this.options.iconAnchor;
}
/**
* Input for the popup-anchor.
* Use it with `<yaga-icon [popupAnchor]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-popupanchor Original Leaflet documentation
*/
set popupAnchor(val) {
this.options.popupAnchor = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get popupAnchor() {
return this.options.popupAnchor;
}
/**
* Input for the tooltip-anchor.
* Use it with `<yaga-icon [tooltipAnchor]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-tooltipanchor Original Leaflet documentation
*/
set tooltipAnchor(val) {
this.options.tooltipAnchor = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get tooltipAnchor() {
return this.options.tooltipAnchor;
}
/**
* Input for the shadow-url.
* Use it with `<yaga-icon [shadowUrl]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-shadowurl Original Leaflet documentation
*/
set shadowUrl(val) {
this.options.shadowUrl = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get shadowUrl() {
return this.options.shadowUrl;
}
/**
* Input for the shadow-url for retina displays.
* Use it with `<yaga-icon [shadowUrl]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-shadowretinaurl Original Leaflet documentation
*/
set shadowRetinaUrl(val) {
this.options.shadowRetinaUrl = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get shadowRetinaUrl() {
return this.options.shadowRetinaUrl;
}
/**
* Input for the shadow-size.
* Use it with `<yaga-icon [shadowSize]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-shadowsize Original Leaflet documentation
*/
set shadowSize(val) {
this.options.shadowSize = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get shadowSize() {
return this.options.shadowSize;
}
/**
* Input for the shadow-anchor.
* Use it with `<yaga-icon [shadowAnchor]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#icon-shadowanchor Original Leaflet documentation
*/
set shadowAnchor(val) {
this.options.shadowAnchor = val;
this.markerProvider.ref.setIcon(this);
this.updateEvent.emit({
target: this,
type: "update",
});
}
get shadowAnchor() {
return this.options.shadowAnchor;
}
}
exports.IconDirective = IconDirective;
IconDirective.ɵfac = function IconDirective_Factory(t) { return new (t || IconDirective)(i0.ɵɵdirectiveInject(i1.MarkerProvider)); };
IconDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: IconDirective, selectors: [["yaga-icon"]], inputs: { className: "className", iconUrl: "iconUrl", iconRetinaUrl: "iconRetinaUrl", iconSize: "iconSize", iconAnchor: "iconAnchor", popupAnchor: "popupAnchor", tooltipAnchor: "tooltipAnchor", shadowUrl: "shadowUrl", shadowRetinaUrl: "shadowRetinaUrl", shadowSize: "shadowSize", shadowAnchor: "shadowAnchor" }, outputs: { updateEvent: "update" }, features: [i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IconDirective, [{
type: core_1.Directive,
args: [{
selector: "yaga-icon",
}]
}], function () { return [{ type: i1.MarkerProvider }]; }, { updateEvent: [{
type: core_1.Output,
args: ["update"]
}], className: [{
type: core_1.Input
}], iconUrl: [{
type: core_1.Input
}], iconRetinaUrl: [{
type: core_1.Input
}], iconSize: [{
type: core_1.Input
}], iconAnchor: [{
type: core_1.Input
}], popupAnchor: [{
type: core_1.Input
}], tooltipAnchor: [{
type: core_1.Input
}], shadowUrl: [{
type: core_1.Input
}], shadowRetinaUrl: [{
type: core_1.Input
}], shadowSize: [{
type: core_1.Input
}], shadowAnchor: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=icon.directive.js.map