@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
825 lines • 35 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CircleMarkerDirective = 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 lng2lat_1 = require("./lng2lat");
const i0 = require("@angular/core");
const i1 = require("./layer-group.provider");
const i2 = require("./layer.provider");
/**
* Angular2 directive for circle-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-circle-marker
* [(display)]="..."
* [(stroke)]="..."
* [(color)]="..."
* [(weight)]="..."
* [(opacity)]="..."
* [(lineCap)]="..."
* [(lineJoin)]="..."
* [(dashArray)]="..."
* [(dashOffset)]="..."
* [(fill)]="..."
* [(fillColor)]="..."
* [(fillOpacity)]="..."
* [(fillRule)]="..."
* [(className)]="..."
* [(lat)]="..."
* [(lng)]="..."
* [(radius)]="..."
*
* (click)="..."
* (dblclick)="..."
* (mousedown)="..."
* (mouseup)="..."
* (mouseover)="..."
* (mouseout)="..."
* (mousemove)="..."
* (contextmenu)="..."
* (keypress)="..."
* (preclick)="..."
*
* [interactive]="..."
* [properties]="..."
* >
* </yaga-circle-marker>
* </yaga-map>
* ```
*
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker Original Leaflet documentation
* @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=Circle-Marker%20Directive Unit-Test
* @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/circle-marker.directive.js.html
* Test coverage
* @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/circle-marker.directive.js.html API documentation
* @example https://leaflet-ng2.yagajs.org/latest/examples/circle-marker-directive/
*/
class CircleMarkerDirective extends leaflet_1.CircleMarker {
constructor(layerGroupProvider, layerProvider) {
super([0, 0]);
this.layerGroupProvider = layerGroupProvider;
/**
* Two-Way bound property for the display status of the geometry.
* Use it with `<yaga-circle-marker [(display)]="someValue">`
* or `<yaga-circle-marker (displayChange)="processEvent($event)">`
*/
this.displayChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the stroke state of the geometry.
* Use it with `<yaga-circle-marker [(stroke)]="someValue">`
* or `<yaga-circle-marker (strokeChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-stroke Original Leaflet documentation
*/
this.strokeChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the line-color of the geometry.
* Use it with `<yaga-circle-marker [(color)]="someValue">`
* or `<yaga-circle-marker (colorChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-color Original Leaflet documentation
*/
this.colorChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the weight of the geometry.
* Use it with `<yaga-circle-marker [(weight)]="someValue">`
* or `<yaga-circle-marker (weightChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-weight Original Leaflet documentation
*/
this.weightChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the opacity of the geometry.
* Use it with `<yaga-circle-marker [(opacity)]="someValue">`
* or `<yaga-circle-marker (opacityChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-opacity Original Leaflet documentation
*/
this.opacityChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the lineCap of the geometry.
* Use it with `<yaga-circle-marker [(lineCap)]="someValue">`
* or `<yaga-circle-marker (lineCapChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-linecap Original Leaflet documentation
*/
this.lineCapChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the lineJoin of the geometry.
* Use it with `<yaga-circle-marker [(lineJoin)]="someValue">`
* or `<yaga-circle-marker (lineJoinChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-linejoin Original Leaflet documentation
*/
this.lineJoinChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the dashArray of the geometry.
* Use it with `<yaga-circle-marker [(dashArray)]="someValue">`
* or `<yaga-circle-marker (dashArrayChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-dasharray Original Leaflet documentation
*/
this.dashArrayChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the dashOffset of the geometry.
* Use it with `<yaga-circle-marker [(dashOffset)]="someValue">`
* or `<yaga-circle-marker (dashOffsetChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-dashoffset Original Leaflet documentation
*/
this.dashOffsetChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the fill state of the geometry.
* Use it with `<yaga-circle-marker [(fill)]="someValue">`
* or `<yaga-circle-marker (fillChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-fill Original Leaflet documentation
*/
this.fillChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the fill-color of the geometry.
* Use it with `<yaga-circle-marker [(fillColor)]="someValue">`
* or `<yaga-circle-marker (fillColorChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-fillcolor Original Leaflet documentation
*/
this.fillColorChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the fill-opacity of the geometry.
* Use it with `<yaga-circle-marker [(fillOpacity)]="someValue">`
* or `<yaga-circle-marker (fillOpacityChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-fillopacity Original Leaflet documentation
*/
this.fillOpacityChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the fill-rule of the geometry.
* Use it with `<yaga-circle-marker [(fillRule)]="someValue">`
* or `<yaga-circle-marker (fillRuleChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-fillrule Original Leaflet documentation
*/
this.fillRuleChange = new core_1.EventEmitter();
// @Output() public rendererChange: EventEmitter<number> = new EventEmitter();
/**
* Two-Way bound property for the className of the geometry.
* Use it with `<yaga-circle-marker [(className)]="someValue">`
* or `<yaga-circle-marker (classNameChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-classname Original Leaflet documentation
*/
this.classNameChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the css-style of the geometry.
* Use it with `<yaga-circle-marker [(style)]="someValue">`
* or `<yaga-circle-marker (styleChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-setstyle Original Leaflet documentation
*/
this.styleChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the latlng-position of the geometry.
* Use it with `<yaga-circle-marker [(position)]="someValue">`
* or `<yaga-circle-marker (positionChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-setlatlng Original Leaflet documentation
*/
this.positionChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the latitude of the geometry.
* Use it with `<yaga-circle-marker [(lat)]="someValue">`
* or `<yaga-circle-marker (latChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-setlatlng Original Leaflet documentation
*/
this.latChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the longitude of the geometry.
* Use it with `<yaga-circle-marker [(lng)]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-setlatlng Original Leaflet documentation
* or `<yaga-circle-marker (lngChange)="processEvent($event)">`
*/
this.lngChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the radius of the geometry.
* Use it with `<yaga-circle-marker [(radius)]="someValue">`
* or `<yaga-circle-marker (radiusChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-setradius Original Leaflet documentation
*/
this.radiusChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the geometry represented as GeoJSON.
* Use it with `<yaga-circle-marker [(geoJSON)]="someValue">`
* or `<yaga-circle-marker (geoJSONChange)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-togeojson Original Leaflet documentation
*/
this.geoJSONChange = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-circle-marker (add)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-add Original Leaflet documentation
*/
this.addEvent = new core_1.EventEmitter();
/**
* From leaflet fired remove event.
* Use it with `<yaga-circle-marker (remove)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-remove Original Leaflet documentation
*/
this.removeEvent = new core_1.EventEmitter();
/**
* From leaflet fired popupopen event.
* Use it with `<yaga-circle-marker (popupopen)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-popupopen Original Leaflet documentation
*/
this.popupopenEvent = new core_1.EventEmitter();
/**
* From leaflet fired popupclose event.
* Use it with `<yaga-circle-marker (popupclose)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-popupclose Original Leaflet documentation
*/
this.popupcloseEvent = new core_1.EventEmitter();
/**
* From leaflet fired tooltipopen event.
* Use it with `<yaga-circle-marker (tooltipopen)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-tooltipopen Original Leaflet documentation
*/
this.tooltipopenEvent = new core_1.EventEmitter();
/**
* From leaflet fired tooltipclose event.
* Use it with `<yaga-circle-marker (tooltipclose)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-tooltipclose Original Leaflet documentation
*/
this.tooltipcloseEvent = new core_1.EventEmitter();
/**
* From leaflet fired click event.
* Use it with `<yaga-circle-marker (click)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-click Original Leaflet documentation
*/
this.clickEvent = new core_1.EventEmitter();
/**
* From leaflet fired dblclick event.
* Use it with `<yaga-circle-marker (dblclick)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-dblclick Original Leaflet documentation
*/
this.dblclickEvent = new core_1.EventEmitter();
/**
* From leaflet fired mousedown event.
* Use it with `<yaga-circle-marker (mousedown)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-mousedown Original Leaflet documentation
*/
this.mousedownEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseover event.
* Use it with `<yaga-circle-marker (mouseover)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-mouseover Original Leaflet documentation
*/
this.mouseoverEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseout event.
* Use it with `<yaga-circle-marker (mouseout)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-mouseout Original Leaflet documentation
*/
this.mouseoutEvent = new core_1.EventEmitter();
/**
* From leaflet fired contextmenu event.
* Use it with `<yaga-circle-marker (contextmenu)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-contextmenu Original Leaflet documentation
*/
this.contextmenuEvent = new core_1.EventEmitter();
this.initialized = false;
layerProvider.ref = this;
this.feature = this.feature || {
geometry: { type: "Point", coordinates: [] },
properties: {},
type: "Feature",
};
this.feature.properties = this.feature.properties || {};
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);
});
}
/**
* Internal method that provides the initialization of the child popup or tooltip
*/
ngAfterContentInit() {
this.initialized = true;
}
/**
* Internal method to provide the removal of the layer in Leaflet, when removing it from the Angular template
*/
ngOnDestroy() {
this.removeFrom(this.layerGroupProvider.ref);
}
/**
* Derived method of the original setLatLng.
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-setlatlng Original Leaflet documentation
*/
setLatLng(val) {
super.setLatLng(val);
if (!this.initialized) {
return this;
}
this.positionChange.emit(this._latlng);
this.latChange.emit(this._latlng.lat);
this.lngChange.emit(this._latlng.lng);
this.geoJSONChange.emit(this.geoJSON);
return this;
}
/**
* Two-Way bound property for the position of the circle.
* Use it with `<yaga-circle-marker [(position)]="someValue">` or `<yaga-circle-marker [position]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-l-circlemarker Original Leaflet documentation
*/
set position(val) {
this.setLatLng(val);
}
get position() {
return this._latlng;
}
/**
* Two-Way bound property for the latitude (position) of the circle.
* Use it with `<yaga-circle-marker [(lat)]="someValue">` or `<yaga-circle-marker [lat]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-l-circlemarker Original Leaflet documentation
*/
set lat(val) {
this.setLatLng([val, this.lng]);
}
get lat() {
return this._latlng.lat;
}
/**
* Two-Way bound property for the longitude (position) of the circle.
* Use it with `<yaga-circle-marker [(lng)]="someValue">` or `<yaga-circle-marker [lng]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-l-circlemarker Original Leaflet documentation
*/
set lng(val) {
this.setLatLng([this.lat, val]);
}
get lng() {
return this._latlng.lng;
}
/**
* Derived method of the original setRadius.
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-setradius Original Leaflet documentation
*/
setRadius(val) {
super.setRadius(val);
this.radiusChange.emit(val);
return this;
}
/**
* Two-Way bound property for the radius of the circle.
* Use it with `<yaga-circle-marker [(radius)]="someValue">` or `<yaga-circle-marker [radius]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-radius Original Leaflet documentation
*/
set radius(val) {
this.setRadius(val);
}
get radius() {
return this.getRadius();
}
/**
* Two-Way bound property for the geoJSON data.
* Use it with `<yaga-circle-marker [(geoJSON)]="someValue">` or `<yaga-circle-marker [geoJSONChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-togeojson Original Leaflet documentation
*/
set geoJSON(val) {
this.feature.properties = val.properties;
const geomType = val.geometry.type; // Normally "Point"
/* istanbul ignore if */
if (geomType !== "Point") {
throw new Error("Unsupported geometry type: " + geomType);
}
this.setLatLng(lng2lat_1.lng2lat(val.geometry.coordinates));
}
get geoJSON() {
return this.toGeoJSON();
}
/**
* Derived method of the original setStyle.
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-setstyle Original Leaflet documentation
*/
setStyle(style) {
super.setStyle(style);
if (style.hasOwnProperty("stroke")) {
this.strokeChange.emit(style.stroke);
}
if (style.hasOwnProperty("color")) {
this.colorChange.emit(style.color);
}
if (style.hasOwnProperty("weight")) {
this.weightChange.emit(style.weight);
}
if (style.hasOwnProperty("opacity")) {
this.opacityChange.emit(style.opacity);
}
if (style.hasOwnProperty("lineCap")) {
this.lineCapChange.emit(style.lineCap);
}
if (style.hasOwnProperty("lineJoin")) {
this.lineJoinChange.emit(style.lineJoin);
}
if (style.hasOwnProperty("dashArray")) {
this.dashArrayChange.emit(style.dashArray);
}
if (style.hasOwnProperty("dashOffset")) {
this.dashOffsetChange.emit(style.dashOffset);
}
if (style.hasOwnProperty("fill")) {
this.fillChange.emit(style.fill);
}
if (style.hasOwnProperty("fillColor")) {
this.fillColorChange.emit(style.fillColor);
}
if (style.hasOwnProperty("fillOpacity")) {
this.fillOpacityChange.emit(style.fillOpacity);
}
if (style.hasOwnProperty("fillRule")) {
this.fillRuleChange.emit(style.fillRule);
}
if (style.hasOwnProperty("className")) {
this.classNameChange.emit(style.className);
}
this.styleChange.emit(style);
return this;
}
/**
* Two-Way bound property for the opacity.
* Use it with `<yaga-circle-marker [(opacity)]="someValue">` or `<yaga-circle-marker [opacityChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-opacity Original Leaflet documentation
*/
set opacity(val) {
this.setStyle({ opacity: val });
}
get opacity() {
return this.options.opacity;
}
/**
* Two-Way bound property for the stroke.
* Use it with `<yaga-circle-marker [(stroke)]="someValue">` or `<yaga-circle-marker [strokeChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-stroke Original Leaflet documentation
*/
set stroke(val) {
this.setStyle({ stroke: val });
}
get stroke() {
if (this.options.hasOwnProperty("stroke") && this.options.stroke !== undefined) {
return this.options.stroke;
}
return true;
}
/**
* Two-Way bound property for the color.
* Use it with `<yaga-circle-marker [(color)]="someValue">` or `<yaga-circle-marker [colorChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-color Original Leaflet documentation
*/
set color(val) {
this.setStyle({ color: val });
}
get color() {
return this.options.color;
}
/**
* Two-Way bound property for the weight.
* Use it with `<yaga-circle-marker [(weight)]="someValue">` or `<yaga-circle-marker [weightChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-weight Original Leaflet documentation
*/
set weight(val) {
this.setStyle({ weight: val });
}
get weight() {
return this.options.weight;
}
/**
* Two-Way bound property for the lineCap.
* Use it with `<yaga-circle-marker [(lineCap)]="someValue">` or `<yaga-circle-marker [lineCapChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-linecap Original Leaflet documentation
*/
set lineCap(val) {
this.setStyle({ lineCap: val });
}
get lineCap() {
return this.options.lineCap;
}
/**
* Two-Way bound property for the lineJoin.
* Use it with `<yaga-circle-marker [(lineJoin)]="someValue">`
* or `<yaga-circle-marker [lineJoinChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-linejoin Original Leaflet documentation
*/
set lineJoin(val) {
this.setStyle({ lineJoin: val });
}
get lineJoin() {
return this.options.lineJoin;
}
/**
* Two-Way bound property for the dashArray.
* Use it with `<yaga-circle-marker [(dashArray)]="someValue">`
* or `<yaga-circle-marker [dashArrayChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-dasharray Original Leaflet documentation
*/
set dashArray(val) {
this.setStyle({ dashArray: val });
}
get dashArray() {
return this.options.dashArray;
}
/**
* Two-Way bound property for the dashOffset.
* Use it with `<yaga-circle-marker [(dashOffset)]="someValue">`
* or `<yaga-circle-marker [dashOffsetChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-dashoffset Original Leaflet documentation
*/
set dashOffset(val) {
this.setStyle({ dashOffset: val });
}
get dashOffset() {
return this.options.dashOffset;
}
/**
* Two-Way bound property for the fill.
* Use it with `<yaga-circle-marker [(fill)]="someValue">` or `<yaga-circle-marker [fillChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-fill Original Leaflet documentation
*/
set fill(val) {
this.setStyle({ fill: val });
}
get fill() {
return this.options.fill || false;
}
/**
* Two-Way bound property for the fillColor.
* Use it with `<yaga-circle-marker [(fillColor)]="someValue">`
* or `<yaga-circle-marker [fillColorChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-fillcolor Original Leaflet documentation
*/
set fillColor(val) {
this.setStyle({ fillColor: val });
}
get fillColor() {
return this.options.fillColor;
}
/**
* Two-Way bound property for the fillOpacity.
* Use it with `<yaga-circle-marker [(fillOpacity)]="someValue">`
* or `<yaga-circle-marker [fillOpacityChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-fillopacity Original Leaflet documentation
*/
set fillOpacity(val) {
this.setStyle({ fillOpacity: val });
}
get fillOpacity() {
return this.options.fillOpacity;
}
/**
* Two-Way bound property for the fillRule.
* Use it with `<yaga-circle-marker [(fillRule)]="someValue">`
* or `<yaga-circle-marker [fillRuleChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-fillrule Original Leaflet documentation
*/
set fillRule(val) {
this.setStyle({ fillRule: val });
}
get fillRule() {
return this.options.fillRule;
}
/**
* Two-Way bound property for the className.
* Use it with `<yaga-circle-marker [(className)]="someValue">`
* or `<yaga-circle-marker [classNameChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-classname Original Leaflet documentation
*/
set className(val) {
this.setStyle({ className: val });
}
get className() {
return this.options.className;
}
/**
* Two-Way bound property for the opacity.
* Use it with `<yaga-circle-marker [(style)]="someValue">` or `<yaga-circle-marker [styleChange]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#circlemarker-style Original Leaflet documentation
*/
set style(val) {
this.setStyle(val);
}
get style() {
return this.options;
}
/**
* Two-Way bound property for the display state.
* Use it with `<yaga-circle-marker [(display)]="someValue">` or `<yaga-circle-marker [displayChange]="someValue">`
*/
set display(val) {
const isDisplayed = this.display;
if (isDisplayed === val) {
return;
}
let container;
try {
container = this.getElement();
}
catch (err) {
/* istanbul ignore next */
return;
}
this.displayChange.emit(val);
container.style.display = val ? "" : "none";
}
get display() {
let container;
try {
container = this.getElement();
}
catch (err) {
/* istanbul ignore next */
return false;
}
return container.style.display !== "none" && !!container.parentElement;
}
/**
* Input for the GeoJSON properties.
* Use it with `<yaga-circle-marker [interactive]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#tilelayer-interactive Original Leaflet documentation
*/
set interactive(val) {
const map = this._map;
this.options.interactive = val;
this.onRemove(map);
this.onAdd(map);
}
get interactive() {
return !!this.options.interactive;
}
set properties(val) {
this.feature.properties = val;
this.geoJSONChange.emit(this.geoJSON);
}
get properties() {
return this.feature.properties;
}
}
exports.CircleMarkerDirective = CircleMarkerDirective;
CircleMarkerDirective.ɵfac = function CircleMarkerDirective_Factory(t) { return new (t || CircleMarkerDirective)(i0.ɵɵdirectiveInject(i1.LayerGroupProvider), i0.ɵɵdirectiveInject(i2.LayerProvider)); };
CircleMarkerDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CircleMarkerDirective, selectors: [["yaga-circle-marker"]], inputs: { position: "position", lat: "lat", lng: "lng", radius: "radius", geoJSON: "geoJSON", opacity: "opacity", stroke: "stroke", color: "color", weight: "weight", lineCap: "lineCap", lineJoin: "lineJoin", dashArray: "dashArray", dashOffset: "dashOffset", fill: "fill", fillColor: "fillColor", fillOpacity: "fillOpacity", fillRule: "fillRule", className: "className", style: "style", display: "display", interactive: "interactive", properties: "properties" }, outputs: { displayChange: "displayChange", strokeChange: "strokeChange", colorChange: "colorChange", weightChange: "weightChange", opacityChange: "opacityChange", lineCapChange: "lineCapChange", lineJoinChange: "lineJoinChange", dashArrayChange: "dashArrayChange", dashOffsetChange: "dashOffsetChange", fillChange: "fillChange", fillColorChange: "fillColorChange", fillOpacityChange: "fillOpacityChange", fillRuleChange: "fillRuleChange", classNameChange: "classNameChange", styleChange: "styleChange", positionChange: "positionChange", latChange: "latChange", lngChange: "lngChange", radiusChange: "radiusChange", geoJSONChange: "geoJSONChange", 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]), i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CircleMarkerDirective, [{
type: core_1.Directive,
args: [{
providers: [layer_provider_1.LayerProvider],
selector: "yaga-circle-marker",
}]
}], function () { return [{ type: i1.LayerGroupProvider }, { type: i2.LayerProvider }]; }, { displayChange: [{
type: core_1.Output
}], strokeChange: [{
type: core_1.Output
}], colorChange: [{
type: core_1.Output
}], weightChange: [{
type: core_1.Output
}], opacityChange: [{
type: core_1.Output
}], lineCapChange: [{
type: core_1.Output
}], lineJoinChange: [{
type: core_1.Output
}], dashArrayChange: [{
type: core_1.Output
}], dashOffsetChange: [{
type: core_1.Output
}], fillChange: [{
type: core_1.Output
}], fillColorChange: [{
type: core_1.Output
}], fillOpacityChange: [{
type: core_1.Output
}], fillRuleChange: [{
type: core_1.Output
}], classNameChange: [{
type: core_1.Output
}], styleChange: [{
type: core_1.Output
}], positionChange: [{
type: core_1.Output
}], latChange: [{
type: core_1.Output
}], lngChange: [{
type: core_1.Output
}], radiusChange: [{
type: core_1.Output
}], geoJSONChange: [{
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"]
}], position: [{
type: core_1.Input
}], lat: [{
type: core_1.Input
}], lng: [{
type: core_1.Input
}], radius: [{
type: core_1.Input
}], geoJSON: [{
type: core_1.Input
}], opacity: [{
type: core_1.Input
}], stroke: [{
type: core_1.Input
}], color: [{
type: core_1.Input
}], weight: [{
type: core_1.Input
}], lineCap: [{
type: core_1.Input
}], lineJoin: [{
type: core_1.Input
}], dashArray: [{
type: core_1.Input
}], dashOffset: [{
type: core_1.Input
}], fill: [{
type: core_1.Input
}], fillColor: [{
type: core_1.Input
}], fillOpacity: [{
type: core_1.Input
}], fillRule: [{
type: core_1.Input
}], className: [{
type: core_1.Input
}], style: [{
type: core_1.Input
}], display: [{
type: core_1.Input
}], interactive: [{
type: core_1.Input
}], properties: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=circle-marker.directive.js.map