@mcp-b/geo-openlayers 0.2.0

package/dist/geojson-BU-tOeyz.js

@@ -0,0 +1,184 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { SigveloFeatureClickEvent } from "@mcp-b/geo-support/events";
+import { toLonLat } from "ol/proj.js";
+import { subscribeClassify } from "@mcp-b/geo-support/classification";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import GeoJSON from "ol/format/GeoJSON.js";
+import { Circle, Fill, Stroke, Style } from "ol/style.js";
+//#region src/components/geojson/geojson.styles.ts
+var geojson_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/geojson/geojson.ts
+let SigveloOlGeojson = class SigveloOlGeojson extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.data = null;
+		this.styleFunction = null;
+		this.fillColor = "#3388ff";
+		this.fillOpacity = .2;
+		this.strokeColor = "#3388ff";
+		this.strokeWidth = 2;
+		this.circleRadius = 6;
+		this.interactive = true;
+		this.channel = "";
+		this._layer = null;
+		this._mapEl = null;
+		this._unsubscribeChannel = null;
+	}
+	static {
+		this.styles = [geojson_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._subscribeChannel();
+		this._mapEl = this.closest("sigvelo-ol-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addLayer();
+			this._bindClickHandler();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._unsubscribeChannel?.();
+		this._unsubscribeChannel = null;
+		this._removeLayer();
+	}
+	/** @internal */
+	_subscribeChannel() {
+		this._unsubscribeChannel?.();
+		if (!this.channel) return;
+		this._unsubscribeChannel = subscribeClassify(this.channel, (detail) => {
+			this.styleFunction = detail.styleFunction;
+		});
+	}
+	/** @internal Convert an OL Feature to a GeoJsonFeature for the styleFunction. */
+	_toGeoJsonFeature(olFeature) {
+		const { geometry: _g, ...rest } = olFeature.getProperties();
+		return {
+			type: "Feature",
+			geometry: {
+				type: olFeature.getGeometry()?.getType() ?? "Point",
+				coordinates: null
+			},
+			properties: rest,
+			id: olFeature.getId()
+		};
+	}
+	/** @internal */
+	_addLayer() {
+		if (!this._mapEl?.map || !this.data) return;
+		const source = new VectorSource({ features: new GeoJSON().readFeatures(this.data, { featureProjection: "EPSG:3857" }) });
+		const defaultStyle = new Style({
+			fill: new Fill({ color: this._hexToRgba(this.fillColor, this.fillOpacity) }),
+			stroke: new Stroke({
+				color: this.strokeColor,
+				width: this.strokeWidth
+			}),
+			image: new Circle({
+				radius: this.circleRadius,
+				fill: new Fill({ color: this.fillColor }),
+				stroke: new Stroke({
+					color: this.strokeColor,
+					width: this.strokeWidth
+				})
+			})
+		});
+		const styleFn = this.styleFunction;
+		const olStyleFn = styleFn ? (olFeature) => {
+			const s = styleFn(this._toGeoJsonFeature(olFeature));
+			if (!s) return defaultStyle;
+			return new Style({
+				fill: new Fill({ color: this._hexToRgba(s.fillColor ?? this.fillColor, s.fillOpacity ?? this.fillOpacity) }),
+				stroke: new Stroke({
+					color: s.strokeColor ?? this.strokeColor,
+					width: s.strokeWidth ?? this.strokeWidth
+				}),
+				image: new Circle({
+					radius: this.circleRadius,
+					fill: new Fill({ color: this._hexToRgba(s.fillColor ?? this.fillColor, s.fillOpacity ?? this.fillOpacity) }),
+					stroke: new Stroke({
+						color: s.strokeColor ?? this.strokeColor,
+						width: s.strokeWidth ?? this.strokeWidth
+					})
+				})
+			});
+		} : defaultStyle;
+		this._layer = new VectorLayer({
+			source,
+			style: olStyleFn
+		});
+		this._mapEl.map.addLayer(this._layer);
+	}
+	/** @internal */
+	_removeLayer() {
+		if (this._layer && this._mapEl?.map) this._mapEl.map.removeLayer(this._layer);
+		this._layer = null;
+	}
+	/** @internal */
+	_bindClickHandler() {
+		if (!this.interactive || !this._mapEl?.map) return;
+		this._mapEl.map.on("click", (e) => {
+			if (!this._mapEl?.map) return;
+			this._mapEl.map.forEachFeatureAtPixel(e.pixel, (feature) => {
+				const geom = feature.getGeometry();
+				if (!geom) return;
+				const [lng, lat] = toLonLat(e.coordinate);
+				const { geometry: _geom, ...rest } = feature.getProperties();
+				this.dispatchEvent(new SigveloFeatureClickEvent({
+					type: "Feature",
+					geometry: {
+						type: geom.getType(),
+						coordinates: null
+					},
+					properties: rest,
+					id: feature.getId()
+				}, {
+					lat,
+					lng
+				}));
+			}, { layerFilter: (l) => l === this._layer });
+		});
+	}
+	/** @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})`;
+	}
+	updated(changed) {
+		if (changed.has("data") || changed.has("styleFunction") || changed.has("fillColor") || changed.has("fillOpacity") || changed.has("strokeColor") || changed.has("strokeWidth") || changed.has("circleRadius")) {
+			this._removeLayer();
+			this._addLayer();
+		}
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloOlGeojson.prototype, "data", void 0);
+__decorate([property({ attribute: false })], SigveloOlGeojson.prototype, "styleFunction", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloOlGeojson.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloOlGeojson.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloOlGeojson.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloOlGeojson.prototype, "strokeWidth", void 0);
+__decorate([property({
+	attribute: "circle-radius",
+	type: Number
+})], SigveloOlGeojson.prototype, "circleRadius", void 0);
+__decorate([property({ type: Boolean })], SigveloOlGeojson.prototype, "interactive", void 0);
+__decorate([property()], SigveloOlGeojson.prototype, "channel", void 0);
+SigveloOlGeojson = __decorate([customElement("sigvelo-ol-geojson")], SigveloOlGeojson);
+//#endregion
+export { SigveloOlGeojson as t };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { SigveloOlCircle } from "./components/circle/circle.js";
+import { SigveloOlControl } from "./components/control/control.js";
+import { SigveloOlGeojson } from "./components/geojson/geojson.js";
+import { SigveloOlMap } from "./components/map/map.js";
+import { SigveloOlMarker } from "./components/marker/marker.js";
+import { SigveloOlOverlay } from "./components/overlay/overlay.js";
+import { SigveloOlPolygon } from "./components/polygon/polygon.js";
+import { SigveloOlPolyline } from "./components/polyline/polyline.js";
+import { SigveloOlPopup } from "./components/popup/popup.js";
+import { SigveloOlScaleControl } from "./components/scale-control/scale-control.js";
+import { SigveloOlTilelayer } from "./components/tilelayer/tilelayer.js";
+export { SigveloOlCircle, SigveloOlControl, SigveloOlGeojson, SigveloOlMap, SigveloOlMarker, SigveloOlOverlay, SigveloOlPolygon, SigveloOlPolyline, SigveloOlPopup, SigveloOlScaleControl, SigveloOlTilelayer };

package/dist/index.js

@@ -0,0 +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";
+export { SigveloOlCircle, SigveloOlControl, SigveloOlGeojson, SigveloOlMap, SigveloOlMarker, SigveloOlOverlay, SigveloOlPolygon, SigveloOlPolyline, SigveloOlPopup, SigveloOlScaleControl, SigveloOlTilelayer };

package/dist/map-eGQh7n8O.js

@@ -0,0 +1,146 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators.js";
+import { GeoMapElement } from "@mcp-b/geo-support/base/geo-map-element";
+import { SigveloMapClickEvent, SigveloMapLoadEvent, SigveloMapMoveEndEvent, SigveloMapMoveEvent, SigveloMapZoomEndEvent, SigveloMapZoomEvent } from "@mcp-b/geo-support/events";
+import OlMap from "ol/Map.js";
+import View from "ol/View.js";
+import { fromLonLat, toLonLat } from "ol/proj.js";
+import olCss from "ol/ol.css?raw";
+//#region src/components/map/map.styles.ts
+var map_styles_default = css`
+  :host {
+    display: block;
+    position: relative;
+    min-height: 300px;
+  }
+`;
+//#endregion
+//#region src/components/map/map.ts
+let SigveloOlMap = class SigveloOlMap extends GeoMapElement {
+	constructor(..._args) {
+		super(..._args);
+		this._map = null;
+		this._view = null;
+	}
+	static {
+		this.styles = [
+			...GeoMapElement.styles,
+			unsafeCSS(olCss),
+			map_styles_default
+		];
+	}
+	/** Access the underlying OpenLayers map instance (after mapReady resolves). */
+	get map() {
+		return this._map;
+	}
+	/** Access the underlying OpenLayers view instance. */
+	get view() {
+		return this._view;
+	}
+	createMap(container) {
+		this._view = new View({
+			center: fromLonLat([this.longitude, this.latitude]),
+			zoom: this.zoom,
+			minZoom: this.minZoom,
+			maxZoom: this.maxZoom,
+			rotation: this.bearing * Math.PI / 180
+		});
+		this._map = new OlMap({
+			target: container,
+			view: this._view
+		});
+		this._map.on("click", (e) => {
+			const [lng, lat] = toLonLat(e.coordinate);
+			this.dispatchEvent(new SigveloMapClickEvent({
+				lat,
+				lng
+			}, e.originalEvent));
+		});
+		this._view.on("change:center", () => {
+			if (!this._view) return;
+			const center = this._view.getCenter();
+			if (!center) return;
+			const [lng, lat] = toLonLat(center);
+			this._suppressExternalUpdate = true;
+			this.latitude = lat;
+			this.longitude = lng;
+			this._suppressExternalUpdate = false;
+			this.dispatchEvent(new SigveloMapMoveEvent({
+				lat,
+				lng
+			}));
+		});
+		this._view.on("change:resolution", () => {
+			if (!this._view) return;
+			const zoom = this._view.getZoom() ?? this.zoom;
+			this._suppressExternalUpdate = true;
+			this.zoom = zoom;
+			this._suppressExternalUpdate = false;
+			this.dispatchEvent(new SigveloMapZoomEvent(zoom));
+		});
+		this._map.on("moveend", () => {
+			if (!this._view) return;
+			const center = this._view.getCenter();
+			if (!center) return;
+			const [lng, lat] = toLonLat(center);
+			const zoom = this._view.getZoom() ?? this.zoom;
+			this.dispatchEvent(new SigveloMapMoveEndEvent({
+				lat,
+				lng
+			}));
+			this.dispatchEvent(new SigveloMapZoomEndEvent(zoom));
+		});
+		this._map.once("rendercomplete", () => {
+			this._resolveMapReady();
+			this.dispatchEvent(new SigveloMapLoadEvent());
+		});
+	}
+	destroyMap() {
+		this._map?.setTarget(void 0);
+		this._map = null;
+		this._view = null;
+	}
+	updateView(changed) {
+		if (!this._view) return;
+		if (changed.has("latitude") || changed.has("longitude")) this._view.setCenter(fromLonLat([this.longitude, this.latitude]));
+		if (changed.has("zoom")) this._view.setZoom(this.zoom);
+		if (changed.has("bearing")) this._view.setRotation(this.bearing * Math.PI / 180);
+		if (changed.has("minZoom")) this._view.setMinZoom(this.minZoom);
+		if (changed.has("maxZoom")) this._view.setMaxZoom(this.maxZoom);
+	}
+	invalidateSize() {
+		this._map?.updateSize();
+	}
+	flyTo(options) {
+		this._view?.animate({
+			center: fromLonLat([options.center.lng, options.center.lat]),
+			zoom: options.zoom,
+			rotation: options.bearing ? options.bearing * Math.PI / 180 : void 0,
+			duration: options.duration ?? 1e3
+		});
+	}
+	fitBounds(options) {
+		if (!this._view || !this._map) return;
+		const sw = fromLonLat([options.bounds.west, options.bounds.south]);
+		const ne = fromLonLat([options.bounds.east, options.bounds.north]);
+		this._view.fit([
+			sw[0],
+			sw[1],
+			ne[0],
+			ne[1]
+		], {
+			padding: options.padding ? [
+				options.padding,
+				options.padding,
+				options.padding,
+				options.padding
+			] : void 0,
+			maxZoom: options.maxZoom,
+			duration: options.duration ?? 1e3
+		});
+	}
+};
+SigveloOlMap = __decorate([customElement("sigvelo-ol-map")], SigveloOlMap);
+//#endregion
+export { SigveloOlMap as t };

package/dist/marker-DEG_oTfJ.js

@@ -0,0 +1,124 @@
+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 Overlay from "ol/Overlay.js";
+//#region src/components/marker/marker.styles.ts
+var marker_styles_default = css`
+  :host {
+    display: none;
+  }
+
+  .marker-icon {
+    width: 25px;
+    height: 41px;
+    cursor: pointer;
+    transform: translate(-50%, -100%);
+  }
+
+  .marker-icon--default {
+    width: 25px;
+    height: 41px;
+    position: relative;
+  }
+
+  .marker-icon--default svg {
+    width: 100%;
+    height: 100%;
+    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
+  }
+`;
+//#endregion
+//#region src/components/marker/marker.ts
+let SigveloOlMarker = class SigveloOlMarker extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.latitude = 0;
+		this.longitude = 0;
+		this.color = "#3fb1ce";
+		this.title = "";
+		this._overlay = null;
+		this._markerEl = null;
+		this._mapEl = null;
+		this._popupOverlay = null;
+	}
+	static {
+		this.styles = [marker_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-ol-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addMarker();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._overlay && this._mapEl?.map) this._mapEl.map.removeOverlay(this._overlay);
+		this._overlay = null;
+		this._markerEl = null;
+	}
+	/** @internal */
+	_addMarker() {
+		if (!this._mapEl?.map) return;
+		this._markerEl = document.createElement("div");
+		if (this.title) this._markerEl.title = this.title;
+		this._markerEl.style.cursor = "pointer";
+		this._markerEl.innerHTML = `
+      <svg viewBox="0 0 27 43" xmlns="http://www.w3.org/2000/svg"
+           width="25" height="41"
+           style="filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));">
+        <path d="M13.5 0C6 0 0 6 0 13.5C0 25 13.5 43 13.5 43S27 25 27 13.5C27 6 21 0 13.5 0Z"
+              fill="${this.color}" stroke="white" stroke-width="1.5"/>
+        <circle cx="13.5" cy="13.5" r="5" fill="white"/>
+      </svg>
+    `;
+		const popupEl = this.querySelector("sigvelo-ol-popup");
+		if (popupEl) {
+			this._markerEl.style.cursor = "pointer";
+			this._markerEl.addEventListener("click", () => {
+				this._showPopup(popupEl);
+			});
+		}
+		this._overlay = new Overlay({
+			position: fromLonLat([this.longitude, this.latitude]),
+			positioning: "bottom-center",
+			element: this._markerEl,
+			stopEvent: false
+		});
+		this._mapEl.map.addOverlay(this._overlay);
+	}
+	/** @internal */
+	_showPopup(popupEl) {
+		if (!this._mapEl?.map) return;
+		if (this._popupOverlay) this._mapEl.map.removeOverlay(this._popupOverlay);
+		const content = document.createElement("div");
+		content.style.background = "white";
+		content.style.padding = "8px 12px";
+		content.style.borderRadius = "4px";
+		content.style.boxShadow = "0 2px 8px rgba(0,0,0,0.2)";
+		content.style.transform = "translate(-50%, -8px)";
+		for (const node of Array.from(popupEl.childNodes)) content.appendChild(node.cloneNode(true));
+		this._popupOverlay = new Overlay({
+			position: fromLonLat([this.longitude, this.latitude]),
+			positioning: "bottom-center",
+			element: content,
+			offset: [0, -45]
+		});
+		this._mapEl.map.addOverlay(this._popupOverlay);
+	}
+	updated() {
+		if (this._overlay) this._overlay.setPosition(fromLonLat([this.longitude, this.latitude]));
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({ type: Number })], SigveloOlMarker.prototype, "latitude", void 0);
+__decorate([property({ type: Number })], SigveloOlMarker.prototype, "longitude", void 0);
+__decorate([property()], SigveloOlMarker.prototype, "color", void 0);
+__decorate([property()], SigveloOlMarker.prototype, "title", void 0);
+SigveloOlMarker = __decorate([customElement("sigvelo-ol-marker")], SigveloOlMarker);
+//#endregion
+export { SigveloOlMarker as t };

package/dist/overlay-BFXjnhLj.js

@@ -0,0 +1,65 @@
+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 Overlay from "ol/Overlay.js";
+//#region src/components/overlay/overlay.styles.ts
+var overlay_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#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 = [overlay_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-ol-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			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 as t };

package/dist/polygon-BaKBzEHK.js

@@ -0,0 +1,105 @@
+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 Polygon from "ol/geom/Polygon.js";
+//#region src/components/polygon/polygon.styles.ts
+var polygon_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#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 = [polygon_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-ol-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			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 */
+	_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 */
+	_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: this._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: this._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 as t };