@mcp-b/geo-openlayers 0.2.21 → 0.3.0

package/dist/components/overlay/overlay.js

@@ -1,2 +1,57 @@
-import { t as SigveloOlOverlay } from "../../overlay-BFXjnhLj.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { fromLonLat } from "ol/proj.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+import Overlay from "ol/Overlay.js";
+//#region src/components/overlay/overlay.ts
+let SigveloOlOverlay = class SigveloOlOverlay extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.latitude = 0;
+		this.longitude = 0;
+		this.positioning = "bottom-center";
+		this._overlay = null;
+		this._contentEl = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-ol-map");
+		await this._mapEl?.whenMapReady(this, () => this._addOverlay());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._overlay && this._mapEl?.map) this._mapEl.map.removeOverlay(this._overlay);
+		this._overlay = null;
+	}
+	/** @internal */
+	_addOverlay() {
+		if (!this._mapEl?.map) return;
+		this._contentEl = document.createElement("div");
+		for (const node of Array.from(this.childNodes)) this._contentEl.appendChild(node.cloneNode(true));
+		this._overlay = new Overlay({
+			position: fromLonLat([this.longitude, this.latitude]),
+			positioning: this.positioning,
+			element: this._contentEl,
+			stopEvent: false
+		});
+		this._mapEl.map.addOverlay(this._overlay);
+	}
+	updated() {
+		if (this._overlay) this._overlay.setPosition(fromLonLat([this.longitude, this.latitude]));
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({ type: Number })], SigveloOlOverlay.prototype, "latitude", void 0);
+__decorate([property({ type: Number })], SigveloOlOverlay.prototype, "longitude", void 0);
+__decorate([property()], SigveloOlOverlay.prototype, "positioning", void 0);
+SigveloOlOverlay = __decorate([customElement("sigvelo-ol-overlay")], SigveloOlOverlay);
+//#endregion
 export { SigveloOlOverlay };

package/dist/components/polygon/polygon.d.ts

@@ -30,8 +30,6 @@ declare class SigveloOlPolygon extends LitElement {
   /** @internal */
   private _toCoords;
   /** @internal */
-  private _hexToRgba;
-  /** @internal */
   private _addPolygon;
   protected updated(changed: PropertyValues): void;
   render(): import("lit-html").TemplateResult<1>;

package/dist/components/polygon/polygon.js

@@ -1,2 +1,94 @@
-import { t as SigveloOlPolygon } from "../../polygon-BaKBzEHK.js";
+import { hexToRgba } from "../../hex-to-rgba.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { fromLonLat } from "ol/proj.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import { Fill, Stroke, Style } from "ol/style.js";
+import Feature from "ol/Feature.js";
+import Polygon from "ol/geom/Polygon.js";
+//#region src/components/polygon/polygon.ts
+let SigveloOlPolygon = class SigveloOlPolygon extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.positions = [];
+		this.fillColor = "#3388ff";
+		this.fillOpacity = .2;
+		this.strokeColor = "#3388ff";
+		this.strokeWidth = 2;
+		this._layer = null;
+		this._feature = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-ol-map");
+		await this._mapEl?.whenMapReady(this, () => this._addPolygon());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._layer && this._mapEl?.map) this._mapEl.map.removeLayer(this._layer);
+		this._layer = null;
+		this._feature = null;
+	}
+	/** @internal */
+	_toCoords() {
+		const ring = this.positions.map(([lat, lng]) => fromLonLat([lng, lat]));
+		if (ring.length > 0) {
+			const first = ring[0];
+			const last = ring[ring.length - 1];
+			if (first[0] !== last[0] || first[1] !== last[1]) ring.push([...first]);
+		}
+		return [ring];
+	}
+	/** @internal */
+	_addPolygon() {
+		if (!this._mapEl?.map || this.positions.length < 3) return;
+		this._feature = new Feature({ geometry: new Polygon(this._toCoords()) });
+		this._layer = new VectorLayer({
+			source: new VectorSource({ features: [this._feature] }),
+			style: new Style({
+				fill: new Fill({ color: hexToRgba(this.fillColor, this.fillOpacity) }),
+				stroke: new Stroke({
+					color: this.strokeColor,
+					width: this.strokeWidth
+				})
+			})
+		});
+		this._mapEl.map.addLayer(this._layer);
+	}
+	updated(changed) {
+		if (!this._feature || !this._layer) return;
+		if (changed.has("positions")) this._feature.getGeometry().setCoordinates(this._toCoords());
+		if (changed.has("fillColor") || changed.has("fillOpacity") || changed.has("strokeColor") || changed.has("strokeWidth")) this._layer.setStyle(new Style({
+			fill: new Fill({ color: hexToRgba(this.fillColor, this.fillOpacity) }),
+			stroke: new Stroke({
+				color: this.strokeColor,
+				width: this.strokeWidth
+			})
+		}));
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloOlPolygon.prototype, "positions", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloOlPolygon.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloOlPolygon.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloOlPolygon.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloOlPolygon.prototype, "strokeWidth", void 0);
+SigveloOlPolygon = __decorate([customElement("sigvelo-ol-polygon")], SigveloOlPolygon);
+//#endregion
 export { SigveloOlPolygon };

package/dist/components/polyline/polyline.d.ts

@@ -30,8 +30,6 @@ declare class SigveloOlPolyline extends LitElement {
   /** @internal */
   private _toCoords;
   /** @internal */
-  private _hexToRgba;
-  /** @internal */
   private _addLine;
   protected updated(changed: PropertyValues): void;
   render(): import("lit-html").TemplateResult<1>;

package/dist/components/polyline/polyline.js

@@ -1,2 +1,78 @@
-import { t as SigveloOlPolyline } from "../../polyline-DXXHbwfm.js";
+import { hexToRgba } from "../../hex-to-rgba.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { fromLonLat } from "ol/proj.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import { Stroke, Style } from "ol/style.js";
+import Feature from "ol/Feature.js";
+import LineString from "ol/geom/LineString.js";
+//#region src/components/polyline/polyline.ts
+let SigveloOlPolyline = class SigveloOlPolyline extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.positions = [];
+		this.color = "#3388ff";
+		this.width = 3;
+		this.opacity = 1;
+		this.dashArray = [];
+		this._layer = null;
+		this._feature = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-ol-map");
+		await this._mapEl?.whenMapReady(this, () => this._addLine());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._layer && this._mapEl?.map) this._mapEl.map.removeLayer(this._layer);
+		this._layer = null;
+		this._feature = null;
+	}
+	/** @internal */
+	_toCoords() {
+		return this.positions.map(([lat, lng]) => fromLonLat([lng, lat]));
+	}
+	/** @internal */
+	_addLine() {
+		if (!this._mapEl?.map || this.positions.length < 2) return;
+		this._feature = new Feature({ geometry: new LineString(this._toCoords()) });
+		this._layer = new VectorLayer({
+			source: new VectorSource({ features: [this._feature] }),
+			style: new Style({ stroke: new Stroke({
+				color: hexToRgba(this.color, this.opacity),
+				width: this.width,
+				lineDash: this.dashArray.length ? this.dashArray : void 0
+			}) })
+		});
+		this._mapEl.map.addLayer(this._layer);
+	}
+	updated(changed) {
+		if (!this._feature || !this._layer) return;
+		if (changed.has("positions")) this._feature.getGeometry().setCoordinates(this._toCoords());
+		if (changed.has("color") || changed.has("width") || changed.has("opacity") || changed.has("dashArray")) this._layer.setStyle(new Style({ stroke: new Stroke({
+			color: hexToRgba(this.color, this.opacity),
+			width: this.width,
+			lineDash: this.dashArray.length ? this.dashArray : void 0
+		}) }));
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloOlPolyline.prototype, "positions", void 0);
+__decorate([property()], SigveloOlPolyline.prototype, "color", void 0);
+__decorate([property({ type: Number })], SigveloOlPolyline.prototype, "width", void 0);
+__decorate([property({ type: Number })], SigveloOlPolyline.prototype, "opacity", void 0);
+__decorate([property({ attribute: false })], SigveloOlPolyline.prototype, "dashArray", void 0);
+SigveloOlPolyline = __decorate([customElement("sigvelo-ol-polyline")], SigveloOlPolyline);
+//#endregion
 export { SigveloOlPolyline };

package/dist/components/popup/popup.js

@@ -1,2 +1,24 @@
-import { t as SigveloOlPopup } from "../../popup-CpiCysPO.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+//#region src/components/popup/popup.ts
+let SigveloOlPopup = class SigveloOlPopup extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.maxWidth = 300;
+	}
+	static {
+		this.styles = [styles];
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({
+	attribute: "max-width",
+	type: Number
+})], SigveloOlPopup.prototype, "maxWidth", void 0);
+SigveloOlPopup = __decorate([customElement("sigvelo-ol-popup")], SigveloOlPopup);
+//#endregion
 export { SigveloOlPopup };

package/dist/components/scale-control/scale-control.js

@@ -1,2 +1,49 @@
-import { t as SigveloOlScaleControl } from "../../scale-control-zMLnp2Rt.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+import ScaleLine from "ol/control/ScaleLine.js";
+//#region src/components/scale-control/scale-control.ts
+let SigveloOlScaleControl = class SigveloOlScaleControl extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.units = "metric";
+		this.minWidth = 64;
+		this._control = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-ol-map");
+		await this._mapEl?.whenMapReady(this, () => this._addControl());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._control && this._mapEl?.map) this._mapEl.map.removeControl(this._control);
+		this._control = null;
+	}
+	/** @internal */
+	_addControl() {
+		if (!this._mapEl?.map) return;
+		this._control = new ScaleLine({
+			units: this.units,
+			minWidth: this.minWidth
+		});
+		this._mapEl.map.addControl(this._control);
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property()], SigveloOlScaleControl.prototype, "units", void 0);
+__decorate([property({
+	attribute: "min-width",
+	type: Number
+})], SigveloOlScaleControl.prototype, "minWidth", void 0);
+SigveloOlScaleControl = __decorate([customElement("sigvelo-ol-scale-control")], SigveloOlScaleControl);
+//#endregion
 export { SigveloOlScaleControl };

package/dist/components/tilelayer/tilelayer.js

@@ -1,2 +1,65 @@
-import { t as SigveloOlTilelayer } from "../../tilelayer-BAC1OCHe.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import TileLayer from "ol/layer/Tile.js";
+import OSM from "ol/source/OSM.js";
+import XYZ from "ol/source/XYZ.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+//#region src/components/tilelayer/tilelayer.ts
+let SigveloOlTilelayer = class SigveloOlTilelayer extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.url = "";
+		this.attribution = "";
+		this.opacity = 1;
+		this._layer = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-ol-map");
+		await this._mapEl?.whenMapReady(this, () => this._addLayer());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeLayer();
+	}
+	/** @internal */
+	_addLayer() {
+		if (!this._mapEl?.map) return;
+		const source = this.url ? new XYZ({
+			url: this.url,
+			attributions: this.attribution || void 0
+		}) : new OSM();
+		this._layer = new TileLayer({
+			source,
+			opacity: this.opacity
+		});
+		this._mapEl.map.addLayer(this._layer);
+	}
+	/** @internal */
+	_removeLayer() {
+		if (this._layer && this._mapEl?.map) this._mapEl.map.removeLayer(this._layer);
+		this._layer = null;
+	}
+	updated(changed) {
+		if (changed.has("url")) {
+			this._removeLayer();
+			this._addLayer();
+		}
+		if (changed.has("opacity") && this._layer) this._layer.setOpacity(this.opacity);
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property()], SigveloOlTilelayer.prototype, "url", void 0);
+__decorate([property()], SigveloOlTilelayer.prototype, "attribution", void 0);
+__decorate([property({ type: Number })], SigveloOlTilelayer.prototype, "opacity", void 0);
+SigveloOlTilelayer = __decorate([customElement("sigvelo-ol-tilelayer")], SigveloOlTilelayer);
+//#endregion
 export { SigveloOlTilelayer };

package/dist/docs/custom-elements.json

@@ -182,7 +182,30 @@
           "kind": "class",
           "description": "A generic control container for an OpenLayers map. Wraps arbitrary content\nand adds it as an OL control, positioned in a map corner.",
           "name": "SigveloOlControl",
+          "slots": [
+            {
+              "description": "Control content, retained in the control’s light DOM.",
+              "name": ""
+            }
+          ],
           "members": [
+            {
+              "kind": "method",
+              "name": "_removeControl",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_stopPlacement",
+              "type": {
+                "text": "(() => void) | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "parsedType": {
+                "text": "null | {  }"
+              }
+            },
             {
               "kind": "field",
               "name": "position",
@@ -1289,6 +1312,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/hex-to-rgba.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "hexToRgba",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "hex",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "opacity",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "Expand a `#rrggbb` color and a separate opacity into the single `rgba()`\nstring OpenLayers styles take. `Fill` and `Stroke` accept one color value\nwith no opacity of their own, so the two component properties have to be\nfolded together before they reach a style.\n\nSix-digit hex only, matching the `fill-color` / `stroke-color` defaults these\ncomponents ship."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "hexToRgba",
+          "declaration": {
+            "name": "hexToRgba",
+            "module": "src/hex-to-rgba.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/index.ts",
@@ -1388,7 +1451,7 @@
   "package": {
     "name": "@mcp-b/geo-openlayers",
     "description": "OpenLayers web components for Sigvelo, built with Lit.",
-    "version": "0.2.21",
+    "version": "0.3.0",
     "license": "MIT"
   }
 }

package/dist/hex-to-rgba.d.ts

@@ -0,0 +1,13 @@
+//#region src/hex-to-rgba.d.ts
+/**
+ * Expand a `#rrggbb` color and a separate opacity into the single `rgba()`
+ * string OpenLayers styles take. `Fill` and `Stroke` accept one color value
+ * with no opacity of their own, so the two component properties have to be
+ * folded together before they reach a style.
+ *
+ * Six-digit hex only, matching the `fill-color` / `stroke-color` defaults these
+ * components ship.
+ */
+declare function hexToRgba(hex: string, opacity: number): string;
+//#endregion
+export { hexToRgba };

package/dist/hex-to-rgba.js

@@ -0,0 +1,15 @@
+//#region src/hex-to-rgba.ts
+/**
+* Expand a `#rrggbb` color and a separate opacity into the single `rgba()`
+* string OpenLayers styles take. `Fill` and `Stroke` accept one color value
+* with no opacity of their own, so the two component properties have to be
+* folded together before they reach a style.
+*
+* Six-digit hex only, matching the `fill-color` / `stroke-color` defaults these
+* components ship.
+*/
+function hexToRgba(hex, opacity) {
+	return `rgba(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)}, ${opacity})`;
+}
+//#endregion
+export { hexToRgba };

package/dist/index.js

@@ -1,12 +1,12 @@
-import { t as SigveloOlMap } from "./map-eGQh7n8O.js";
-import { t as SigveloOlTilelayer } from "./tilelayer-BAC1OCHe.js";
-import { t as SigveloOlMarker } from "./marker-DEG_oTfJ.js";
-import { t as SigveloOlPopup } from "./popup-CpiCysPO.js";
-import { t as SigveloOlOverlay } from "./overlay-BFXjnhLj.js";
-import { t as SigveloOlGeojson } from "./geojson-BU-tOeyz.js";
-import { t as SigveloOlCircle } from "./circle-BiLEqiGC.js";
-import { t as SigveloOlPolyline } from "./polyline-DXXHbwfm.js";
-import { t as SigveloOlPolygon } from "./polygon-BaKBzEHK.js";
-import { t as SigveloOlScaleControl } from "./scale-control-zMLnp2Rt.js";
-import { t as SigveloOlControl } from "./control-CTiiOtzM.js";
+import { SigveloOlMap } from "./components/map/map.js";
+import { SigveloOlTilelayer } from "./components/tilelayer/tilelayer.js";
+import { SigveloOlMarker } from "./components/marker/marker.js";
+import { SigveloOlPopup } from "./components/popup/popup.js";
+import { SigveloOlOverlay } from "./components/overlay/overlay.js";
+import { SigveloOlGeojson } from "./components/geojson/geojson.js";
+import { SigveloOlCircle } from "./components/circle/circle.js";
+import { SigveloOlPolyline } from "./components/polyline/polyline.js";
+import { SigveloOlPolygon } from "./components/polygon/polygon.js";
+import { SigveloOlScaleControl } from "./components/scale-control/scale-control.js";
+import { SigveloOlControl } from "./components/control/control.js";
 export { SigveloOlCircle, SigveloOlControl, SigveloOlGeojson, SigveloOlMap, SigveloOlMarker, SigveloOlOverlay, SigveloOlPolygon, SigveloOlPolyline, SigveloOlPopup, SigveloOlScaleControl, SigveloOlTilelayer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/geo-openlayers",
-  "version": "0.2.21",
+  "version": "0.3.0",
   "description": "OpenLayers web components for Sigvelo, built with Lit.",
   "keywords": [
     "custom-elements",
@@ -35,8 +35,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@mcp-b/geo-support": "0.2.18",
-    "@mcp-b/wc-support": "0.2.18"
+    "@mcp-b/geo-support": "0.3.0",
+    "@mcp-b/wc-support": "0.3.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",

package/dist/circle-BiLEqiGC.js

@@ -1,102 +0,0 @@
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { fromLonLat } from "ol/proj.js";
-import VectorLayer from "ol/layer/Vector.js";
-import VectorSource from "ol/source/Vector.js";
-import { Fill, Stroke, Style } from "ol/style.js";
-import Feature from "ol/Feature.js";
-import Circle$1 from "ol/geom/Circle.js";
-//#region src/components/circle/circle.styles.ts
-var circle_styles_default = css`
-  :host {
-    display: none;
-  }
-`;
-//#endregion
-//#region src/components/circle/circle.ts
-let SigveloOlCircle = class SigveloOlCircle extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.latitude = 0;
-		this.longitude = 0;
-		this.radius = 100;
-		this.fillColor = "#3388ff";
-		this.fillOpacity = .2;
-		this.strokeColor = "#3388ff";
-		this.strokeWidth = 2;
-		this._layer = null;
-		this._feature = null;
-		this._mapEl = null;
-	}
-	static {
-		this.styles = [circle_styles_default];
-	}
-	async connectedCallback() {
-		super.connectedCallback();
-		this._mapEl = this.closest("sigvelo-ol-map");
-		if (this._mapEl) {
-			await this._mapEl.mapReady;
-			this._addCircle();
-		}
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if (this._layer && this._mapEl?.map) this._mapEl.map.removeLayer(this._layer);
-		this._layer = null;
-		this._feature = null;
-	}
-	/** @internal */
-	_hexToRgba(hex, opacity) {
-		return `rgba(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)}, ${opacity})`;
-	}
-	/** @internal */
-	_addCircle() {
-		if (!this._mapEl?.map) return;
-		const geometry = new Circle$1(fromLonLat([this.longitude, this.latitude]), this.radius);
-		this._feature = new Feature({ geometry });
-		const style = new Style({
-			fill: new Fill({ color: this._hexToRgba(this.fillColor, this.fillOpacity) }),
-			stroke: new Stroke({
-				color: this.strokeColor,
-				width: this.strokeWidth
-			})
-		});
-		this._layer = new VectorLayer({
-			source: new VectorSource({ features: [this._feature] }),
-			style
-		});
-		this._mapEl.map.addLayer(this._layer);
-	}
-	updated(changed) {
-		if (!this._feature || !this._layer) return;
-		if (changed.has("latitude") || changed.has("longitude")) this._feature.getGeometry().setCenter(fromLonLat([this.longitude, this.latitude]));
-		if (changed.has("radius")) this._feature.getGeometry().setRadius(this.radius);
-		if (changed.has("fillColor") || changed.has("fillOpacity") || changed.has("strokeColor") || changed.has("strokeWidth")) this._layer.setStyle(new Style({
-			fill: new Fill({ color: this._hexToRgba(this.fillColor, this.fillOpacity) }),
-			stroke: new Stroke({
-				color: this.strokeColor,
-				width: this.strokeWidth
-			})
-		}));
-	}
-	render() {
-		return html``;
-	}
-};
-__decorate([property({ type: Number })], SigveloOlCircle.prototype, "latitude", void 0);
-__decorate([property({ type: Number })], SigveloOlCircle.prototype, "longitude", void 0);
-__decorate([property({ type: Number })], SigveloOlCircle.prototype, "radius", void 0);
-__decorate([property({ attribute: "fill-color" })], SigveloOlCircle.prototype, "fillColor", void 0);
-__decorate([property({
-	attribute: "fill-opacity",
-	type: Number
-})], SigveloOlCircle.prototype, "fillOpacity", void 0);
-__decorate([property({ attribute: "stroke-color" })], SigveloOlCircle.prototype, "strokeColor", void 0);
-__decorate([property({
-	attribute: "stroke-width",
-	type: Number
-})], SigveloOlCircle.prototype, "strokeWidth", void 0);
-SigveloOlCircle = __decorate([customElement("sigvelo-ol-circle")], SigveloOlCircle);
-//#endregion
-export { SigveloOlCircle as t };