@mcp-b/geo-maplibre 0.2.0

package/dist/geojson-BW9JQxtv.js

@@ -0,0 +1,240 @@
+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 { subscribeClassify } from "@mcp-b/geo-support/classification";
+//#region src/components/geojson/geojson.styles.ts
+var geojson_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/geojson/geojson.ts
+let sourceCounter = 0;
+let SigveloMaplibreGeojson = class SigveloMaplibreGeojson extends LitElement {
+	static {
+		this.styles = [geojson_styles_default];
+	}
+	constructor() {
+		super();
+		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._mapEl = null;
+		this._onStyleLoad = () => this._addSource();
+		this._unsubscribeChannel = null;
+		const id = ++sourceCounter;
+		this._sourceId = `sigvelo-geojson-source-${id}`;
+		this._fillLayerId = `sigvelo-geojson-fill-${id}`;
+		this._lineLayerId = `sigvelo-geojson-line-${id}`;
+		this._circleLayerId = `sigvelo-geojson-circle-${id}`;
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._subscribeChannel();
+		this._mapEl = this.closest("sigvelo-maplibre-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			const map = this._mapEl.map;
+			if (map) map.on("style.load", this._onStyleLoad);
+			this._addSource();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._unsubscribeChannel?.();
+		this._unsubscribeChannel = null;
+		this._mapEl?.map?.off("style.load", this._onStyleLoad);
+		this._removeSource();
+	}
+	/** @internal */
+	_subscribeChannel() {
+		this._unsubscribeChannel?.();
+		if (!this.channel) return;
+		this._unsubscribeChannel = subscribeClassify(this.channel, (detail) => {
+			this.styleFunction = detail.styleFunction;
+		});
+	}
+	/**
+	* When styleFunction is set, clone the data and inject computed style
+	* properties into each feature so MapLibre can use data-driven expressions.
+	* @internal
+	*/
+	_prepareData() {
+		if (!this.data) return null;
+		if (!this.styleFunction) return this.data;
+		const clone = JSON.parse(JSON.stringify(this.data));
+		const features = clone.type === "FeatureCollection" ? clone.features : [clone];
+		for (const feature of features) {
+			const s = this.styleFunction(feature);
+			if (s) {
+				feature.properties = feature.properties ?? {};
+				if (s.fillColor != null) feature.properties._sigvelo_fill_color = s.fillColor;
+				if (s.fillOpacity != null) feature.properties._sigvelo_fill_opacity = s.fillOpacity;
+				if (s.strokeColor != null) feature.properties._sigvelo_stroke_color = s.strokeColor;
+				if (s.strokeWidth != null) feature.properties._sigvelo_stroke_width = s.strokeWidth;
+			}
+		}
+		return clone;
+	}
+	_addSource() {
+		const map = this._mapEl?.map;
+		if (!map || !this.data) return;
+		if (!map.isStyleLoaded()) return;
+		this._removeSource();
+		const processedData = this._prepareData();
+		if (!processedData) return;
+		map.addSource(this._sourceId, {
+			type: "geojson",
+			data: processedData
+		});
+		const hasStyleFn = this.styleFunction != null;
+		map.addLayer({
+			id: this._fillLayerId,
+			type: "fill",
+			source: this._sourceId,
+			paint: {
+				"fill-color": hasStyleFn ? [
+					"coalesce",
+					["get", "_sigvelo_fill_color"],
+					this.fillColor
+				] : this.fillColor,
+				"fill-opacity": hasStyleFn ? [
+					"coalesce",
+					["get", "_sigvelo_fill_opacity"],
+					this.fillOpacity
+				] : this.fillOpacity
+			},
+			filter: [
+				"==",
+				"$type",
+				"Polygon"
+			]
+		});
+		map.addLayer({
+			id: this._lineLayerId,
+			type: "line",
+			source: this._sourceId,
+			paint: {
+				"line-color": hasStyleFn ? [
+					"coalesce",
+					["get", "_sigvelo_stroke_color"],
+					this.strokeColor
+				] : this.strokeColor,
+				"line-width": hasStyleFn ? [
+					"coalesce",
+					["get", "_sigvelo_stroke_width"],
+					this.strokeWidth
+				] : this.strokeWidth
+			},
+			filter: [
+				"any",
+				[
+					"==",
+					"$type",
+					"LineString"
+				],
+				[
+					"==",
+					"$type",
+					"Polygon"
+				]
+			]
+		});
+		map.addLayer({
+			id: this._circleLayerId,
+			type: "circle",
+			source: this._sourceId,
+			paint: {
+				"circle-color": hasStyleFn ? [
+					"coalesce",
+					["get", "_sigvelo_fill_color"],
+					this.fillColor
+				] : this.fillColor,
+				"circle-radius": this.circleRadius,
+				"circle-stroke-color": hasStyleFn ? [
+					"coalesce",
+					["get", "_sigvelo_stroke_color"],
+					this.strokeColor
+				] : this.strokeColor,
+				"circle-stroke-width": hasStyleFn ? [
+					"coalesce",
+					["get", "_sigvelo_stroke_width"],
+					this.strokeWidth
+				] : this.strokeWidth
+			},
+			filter: [
+				"==",
+				"$type",
+				"Point"
+			]
+		});
+		if (this.interactive) {
+			const layerIds = [
+				this._fillLayerId,
+				this._lineLayerId,
+				this._circleLayerId
+			];
+			for (const layerId of layerIds) map.on("click", layerId, (e) => {
+				const feature = e.features?.[0];
+				if (!feature) return;
+				this.dispatchEvent(new SigveloFeatureClickEvent({
+					type: "Feature",
+					geometry: feature.geometry,
+					properties: feature.properties ?? null,
+					id: feature.id
+				}, {
+					lat: e.lngLat.lat,
+					lng: e.lngLat.lng
+				}));
+			});
+		}
+	}
+	_removeSource() {
+		const map = this._mapEl?.map;
+		if (!map) return;
+		for (const id of [
+			this._fillLayerId,
+			this._lineLayerId,
+			this._circleLayerId
+		]) if (map.getLayer(id)) map.removeLayer(id);
+		if (map.getSource(this._sourceId)) map.removeSource(this._sourceId);
+	}
+	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._removeSource();
+			this._addSource();
+		}
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloMaplibreGeojson.prototype, "data", void 0);
+__decorate([property({ attribute: false })], SigveloMaplibreGeojson.prototype, "styleFunction", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloMaplibreGeojson.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloMaplibreGeojson.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloMaplibreGeojson.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloMaplibreGeojson.prototype, "strokeWidth", void 0);
+__decorate([property({
+	attribute: "circle-radius",
+	type: Number
+})], SigveloMaplibreGeojson.prototype, "circleRadius", void 0);
+__decorate([property({ type: Boolean })], SigveloMaplibreGeojson.prototype, "interactive", void 0);
+__decorate([property()], SigveloMaplibreGeojson.prototype, "channel", void 0);
+SigveloMaplibreGeojson = __decorate([customElement("sigvelo-maplibre-geojson")], SigveloMaplibreGeojson);
+//#endregion
+export { SigveloMaplibreGeojson as t };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { SigveloMaplibreCircle } from "./components/circle/circle.js";
+import { SigveloMaplibreControl } from "./components/control/control.js";
+import { SigveloMaplibreGeojson } from "./components/geojson/geojson.js";
+import { SigveloMaplibreLayer } from "./components/layer/layer.js";
+import { SigveloMaplibreMap } from "./components/map/map.js";
+import { SigveloMaplibreMarker } from "./components/marker/marker.js";
+import { SigveloMaplibrePolygon } from "./components/polygon/polygon.js";
+import { SigveloMaplibrePolyline } from "./components/polyline/polyline.js";
+import { SigveloMaplibrePopup } from "./components/popup/popup.js";
+import { SigveloMaplibreScaleControl } from "./components/scale-control/scale-control.js";
+import { SigveloMaplibreTilelayer } from "./components/tilelayer/tilelayer.js";
+export { SigveloMaplibreCircle, SigveloMaplibreControl, SigveloMaplibreGeojson, SigveloMaplibreLayer, SigveloMaplibreMap, SigveloMaplibreMarker, SigveloMaplibrePolygon, SigveloMaplibrePolyline, SigveloMaplibrePopup, SigveloMaplibreScaleControl, SigveloMaplibreTilelayer };

package/dist/index.js

@@ -0,0 +1,12 @@
+import { t as SigveloMaplibreMap } from "./map-CYqh-osb.js";
+import { t as SigveloMaplibreTilelayer } from "./tilelayer-CCmClbSv.js";
+import { t as SigveloMaplibreMarker } from "./marker-DzWveHNW.js";
+import { t as SigveloMaplibrePopup } from "./popup-BNRD9rNd.js";
+import { t as SigveloMaplibreGeojson } from "./geojson-BW9JQxtv.js";
+import { t as SigveloMaplibreCircle } from "./circle-CFH3gDcY.js";
+import { t as SigveloMaplibrePolyline } from "./polyline-Dt4yBInz.js";
+import { t as SigveloMaplibrePolygon } from "./polygon-BJ-z1X7p.js";
+import { t as SigveloMaplibreScaleControl } from "./scale-control-DPWq0EHU.js";
+import { t as SigveloMaplibreLayer } from "./layer-COvBRP1h.js";
+import { t as SigveloMaplibreControl } from "./control-Bka68vGo.js";
+export { SigveloMaplibreCircle, SigveloMaplibreControl, SigveloMaplibreGeojson, SigveloMaplibreLayer, SigveloMaplibreMap, SigveloMaplibreMarker, SigveloMaplibrePolygon, SigveloMaplibrePolyline, SigveloMaplibrePopup, SigveloMaplibreScaleControl, SigveloMaplibreTilelayer };

package/dist/layer-COvBRP1h.js

@@ -0,0 +1,61 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/layer/layer.styles.ts
+var layer_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/layer/layer.ts
+let SigveloMaplibreLayer = class SigveloMaplibreLayer extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.spec = null;
+		this.beforeId = "";
+		this._mapEl = null;
+		this._addedLayerId = null;
+	}
+	static {
+		this.styles = [layer_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-maplibre-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addLayer();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeLayer();
+	}
+	_addLayer() {
+		const map = this._mapEl?.map;
+		if (!map || !this.spec) return;
+		map.addLayer(this.spec, this.beforeId || void 0);
+		this._addedLayerId = this.spec.id;
+	}
+	_removeLayer() {
+		const map = this._mapEl?.map;
+		if (!map || !this._addedLayerId) return;
+		if (map.getLayer(this._addedLayerId)) map.removeLayer(this._addedLayerId);
+		this._addedLayerId = null;
+	}
+	updated(changed) {
+		if (changed.has("spec")) {
+			this._removeLayer();
+			this._addLayer();
+		}
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloMaplibreLayer.prototype, "spec", void 0);
+__decorate([property({ attribute: "before-id" })], SigveloMaplibreLayer.prototype, "beforeId", void 0);
+SigveloMaplibreLayer = __decorate([customElement("sigvelo-maplibre-layer")], SigveloMaplibreLayer);
+//#endregion
+export { SigveloMaplibreLayer as t };

package/dist/map-CYqh-osb.js

@@ -0,0 +1,135 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, unsafeCSS } from "lit";
+import { customElement, property } 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 maplibregl from "maplibre-gl";
+import maplibreCss from "maplibre-gl/dist/maplibre-gl.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
+/** Empty style used when no tilelayer child provides a style-url. */
+const EMPTY_STYLE = {
+	version: 8,
+	sources: {},
+	layers: []
+};
+let SigveloMaplibreMap = class SigveloMaplibreMap extends GeoMapElement {
+	constructor(..._args) {
+		super(..._args);
+		this.navControl = true;
+		this._map = null;
+	}
+	static {
+		this.styles = [
+			...GeoMapElement.styles,
+			unsafeCSS(maplibreCss),
+			map_styles_default
+		];
+	}
+	/** Access the underlying MapLibre map instance (after mapReady resolves). */
+	get map() {
+		return this._map;
+	}
+	createMap(container) {
+		this._map = new maplibregl.Map({
+			container,
+			style: EMPTY_STYLE,
+			center: [this.longitude, this.latitude],
+			zoom: this.zoom,
+			minZoom: this.minZoom,
+			maxZoom: this.maxZoom,
+			bearing: this.bearing,
+			pitch: this.pitch
+		});
+		if (this.navControl) this._map.addControl(new maplibregl.NavigationControl());
+		this._map.on("click", (e) => {
+			this.dispatchEvent(new SigveloMapClickEvent({
+				lat: e.lngLat.lat,
+				lng: e.lngLat.lng
+			}, e.originalEvent));
+		});
+		this._map.on("move", () => {
+			if (!this._map) return;
+			const center = this._map.getCenter();
+			this._suppressExternalUpdate = true;
+			this.latitude = center.lat;
+			this.longitude = center.lng;
+			this._suppressExternalUpdate = false;
+			this.dispatchEvent(new SigveloMapMoveEvent({
+				lat: center.lat,
+				lng: center.lng
+			}));
+		});
+		this._map.on("moveend", () => {
+			if (!this._map) return;
+			const center = this._map.getCenter();
+			this.dispatchEvent(new SigveloMapMoveEndEvent({
+				lat: center.lat,
+				lng: center.lng
+			}));
+		});
+		this._map.on("zoom", () => {
+			if (!this._map) return;
+			const zoom = this._map.getZoom();
+			this._suppressExternalUpdate = true;
+			this.zoom = zoom;
+			this._suppressExternalUpdate = false;
+			this.dispatchEvent(new SigveloMapZoomEvent(zoom));
+		});
+		this._map.on("zoomend", () => {
+			if (!this._map) return;
+			this.dispatchEvent(new SigveloMapZoomEndEvent(this._map.getZoom()));
+		});
+		this._map.on("load", () => {
+			this._resolveMapReady();
+			this.dispatchEvent(new SigveloMapLoadEvent());
+		});
+	}
+	destroyMap() {
+		this._map?.remove();
+		this._map = null;
+	}
+	updateView(changed) {
+		if (!this._map) return;
+		if (changed.has("latitude") || changed.has("longitude")) this._map.setCenter([this.longitude, this.latitude]);
+		if (changed.has("zoom")) this._map.setZoom(this.zoom);
+		if (changed.has("bearing")) this._map.setBearing(this.bearing);
+		if (changed.has("pitch")) this._map.setPitch(this.pitch);
+		if (changed.has("minZoom")) this._map.setMinZoom(this.minZoom);
+		if (changed.has("maxZoom")) this._map.setMaxZoom(this.maxZoom);
+	}
+	invalidateSize() {
+		this._map?.resize();
+	}
+	flyTo(options) {
+		this._map?.flyTo({
+			center: [options.center.lng, options.center.lat],
+			zoom: options.zoom,
+			bearing: options.bearing,
+			pitch: options.pitch,
+			duration: options.duration
+		});
+	}
+	fitBounds(options) {
+		this._map?.fitBounds([[options.bounds.west, options.bounds.south], [options.bounds.east, options.bounds.north]], {
+			padding: options.padding,
+			maxZoom: options.maxZoom,
+			duration: options.duration
+		});
+	}
+};
+__decorate([property({
+	attribute: "nav-control",
+	type: Boolean
+})], SigveloMaplibreMap.prototype, "navControl", void 0);
+SigveloMaplibreMap = __decorate([customElement("sigvelo-maplibre-map")], SigveloMaplibreMap);
+//#endregion
+export { SigveloMaplibreMap as t };

package/dist/marker-DzWveHNW.js

@@ -0,0 +1,79 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import maplibregl from "maplibre-gl";
+//#region src/components/marker/marker.styles.ts
+var marker_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/marker/marker.ts
+let SigveloMaplibreMarker = class SigveloMaplibreMarker extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.latitude = 0;
+		this.longitude = 0;
+		this.color = "#3fb1ce";
+		this.draggable = false;
+		this.scale = 1;
+		this._marker = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [marker_styles_default];
+	}
+	/** Access the underlying MapLibre marker instance. */
+	get marker() {
+		return this._marker;
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-maplibre-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addMarker();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._marker?.remove();
+		this._marker = null;
+	}
+	_addMarker() {
+		if (!this._mapEl?.map) return;
+		this._marker = new maplibregl.Marker({
+			color: this.color,
+			draggable: this.draggable,
+			scale: this.scale
+		}).setLngLat([this.longitude, this.latitude]).addTo(this._mapEl.map);
+		const popupEl = this.querySelector("sigvelo-maplibre-popup");
+		if (popupEl) {
+			const content = document.createElement("div");
+			for (const node of Array.from(popupEl.childNodes)) content.appendChild(node.cloneNode(true));
+			const popup = new maplibregl.Popup().setDOMContent(content);
+			this._marker.setPopup(popup);
+		}
+		this._marker.on("dragend", () => {
+			if (!this._marker) return;
+			const pos = this._marker.getLngLat();
+			this.latitude = pos.lat;
+			this.longitude = pos.lng;
+		});
+	}
+	updated() {
+		if (this._marker) this._marker.setLngLat([this.longitude, this.latitude]);
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({ type: Number })], SigveloMaplibreMarker.prototype, "latitude", void 0);
+__decorate([property({ type: Number })], SigveloMaplibreMarker.prototype, "longitude", void 0);
+__decorate([property()], SigveloMaplibreMarker.prototype, "color", void 0);
+__decorate([property({ type: Boolean })], SigveloMaplibreMarker.prototype, "draggable", void 0);
+__decorate([property({ type: Number })], SigveloMaplibreMarker.prototype, "scale", void 0);
+SigveloMaplibreMarker = __decorate([customElement("sigvelo-maplibre-marker")], SigveloMaplibreMarker);
+//#endregion
+export { SigveloMaplibreMarker as t };

package/dist/polygon-BJ-z1X7p.js

@@ -0,0 +1,119 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/polygon/polygon.styles.ts
+var polygon_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/polygon/polygon.ts
+let polygonCounter = 0;
+let SigveloMaplibrePolygon = class SigveloMaplibrePolygon extends LitElement {
+	static {
+		this.styles = [polygon_styles_default];
+	}
+	constructor() {
+		super();
+		this.positions = [];
+		this.fillColor = "#3388ff";
+		this.fillOpacity = .2;
+		this.strokeColor = "#3388ff";
+		this.strokeWidth = 2;
+		this._mapEl = null;
+		const id = ++polygonCounter;
+		this._sourceId = `sigvelo-polygon-source-${id}`;
+		this._fillLayerId = `sigvelo-polygon-fill-${id}`;
+		this._strokeLayerId = `sigvelo-polygon-stroke-${id}`;
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-maplibre-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addPolygon();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removePolygon();
+	}
+	_toGeoJSON() {
+		const ring = this.positions.map(([lat, lng]) => [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 {
+			type: "Feature",
+			geometry: {
+				type: "Polygon",
+				coordinates: [ring]
+			},
+			properties: {}
+		};
+	}
+	_addPolygon() {
+		const map = this._mapEl?.map;
+		if (!map || this.positions.length < 3) return;
+		map.addSource(this._sourceId, {
+			type: "geojson",
+			data: this._toGeoJSON()
+		});
+		map.addLayer({
+			id: this._fillLayerId,
+			type: "fill",
+			source: this._sourceId,
+			paint: {
+				"fill-color": this.fillColor,
+				"fill-opacity": this.fillOpacity
+			}
+		});
+		map.addLayer({
+			id: this._strokeLayerId,
+			type: "line",
+			source: this._sourceId,
+			paint: {
+				"line-color": this.strokeColor,
+				"line-width": this.strokeWidth
+			}
+		});
+	}
+	_removePolygon() {
+		const map = this._mapEl?.map;
+		if (!map) return;
+		for (const id of [this._fillLayerId, this._strokeLayerId]) if (map.getLayer(id)) map.removeLayer(id);
+		if (map.getSource(this._sourceId)) map.removeSource(this._sourceId);
+	}
+	updated(changed) {
+		const map = this._mapEl?.map;
+		if (!map) return;
+		if (changed.has("positions")) {
+			const source = map.getSource(this._sourceId);
+			if (source) source.setData(this._toGeoJSON());
+		}
+		if (changed.has("fillColor") && map.getLayer(this._fillLayerId)) map.setPaintProperty(this._fillLayerId, "fill-color", this.fillColor);
+		if (changed.has("fillOpacity") && map.getLayer(this._fillLayerId)) map.setPaintProperty(this._fillLayerId, "fill-opacity", this.fillOpacity);
+		if (changed.has("strokeColor") && map.getLayer(this._strokeLayerId)) map.setPaintProperty(this._strokeLayerId, "line-color", this.strokeColor);
+		if (changed.has("strokeWidth") && map.getLayer(this._strokeLayerId)) map.setPaintProperty(this._strokeLayerId, "line-width", this.strokeWidth);
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloMaplibrePolygon.prototype, "positions", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloMaplibrePolygon.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloMaplibrePolygon.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloMaplibrePolygon.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloMaplibrePolygon.prototype, "strokeWidth", void 0);
+SigveloMaplibrePolygon = __decorate([customElement("sigvelo-maplibre-polygon")], SigveloMaplibrePolygon);
+//#endregion
+export { SigveloMaplibrePolygon as t };