@mcp-b/geo-leaflet 0.2.0

package/dist/geojson-DPaCrjMF.js

@@ -0,0 +1,189 @@
+import "./default-icon.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { findLeafletMap } from "./components/find-leaflet-map.js";
+import * as L from "leaflet";
+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
+function formatPopupProperty(value) {
+	if (typeof value === "string") return value;
+	if (typeof value === "number") return Number.isFinite(value) ? value.toLocaleString(void 0, { maximumSignificantDigits: 4 }) : void 0;
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+}
+let SigveloLeafletGeojson = class SigveloLeafletGeojson extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.data = null;
+		this.styleFunction = null;
+		this.fillColor = "#3388ff";
+		this.fillOpacity = .2;
+		this.strokeColor = "#3388ff";
+		this.strokeWidth = 3;
+		this.strokeOpacity = 1;
+		this.interactive = true;
+		this.popupTitleProperty = "";
+		this.popupValueProperty = "";
+		this.popupValueLabel = "";
+		this.fitBounds = false;
+		this.channel = "";
+		this._layer = null;
+		this._mapEl = null;
+		this._unsubscribeChannel = null;
+	}
+	static {
+		this.styles = [geojson_styles_default];
+	}
+	/** Access the underlying Leaflet GeoJSON layer. */
+	get layer() {
+		return this._layer;
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._subscribeChannel();
+		this._mapEl = findLeafletMap(this);
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			if (!this.isConnected) return;
+			this._addLayer();
+		}
+	}
+	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 */
+	_toGeoJsonFeature(feature) {
+		return {
+			type: "Feature",
+			geometry: feature.geometry,
+			properties: feature.properties ?? null,
+			id: feature.id
+		};
+	}
+	/** @internal */
+	_getStyleForFeature(feature) {
+		if (this.styleFunction) {
+			const s = this.styleFunction(this._toGeoJsonFeature(feature));
+			if (s) return {
+				fillColor: s.fillColor ?? this.fillColor,
+				fillOpacity: s.fillOpacity ?? this.fillOpacity,
+				color: s.strokeColor ?? this.strokeColor,
+				weight: s.strokeWidth ?? this.strokeWidth,
+				opacity: s.strokeOpacity ?? this.strokeOpacity
+			};
+		}
+		return {
+			fillColor: this.fillColor,
+			fillOpacity: this.fillOpacity,
+			color: this.strokeColor,
+			weight: this.strokeWidth,
+			opacity: this.strokeOpacity
+		};
+	}
+	/** @internal */
+	_getPopupForFeature(feature) {
+		if (!this.popupTitleProperty) return;
+		const properties = feature.properties ?? {};
+		const title = formatPopupProperty(properties[this.popupTitleProperty]);
+		if (title === void 0) return;
+		const content = document.createElement("div");
+		const heading = document.createElement("strong");
+		heading.textContent = title;
+		content.appendChild(heading);
+		if (this.popupValueProperty) {
+			const value = formatPopupProperty(properties[this.popupValueProperty]);
+			if (value !== void 0) {
+				const detail = document.createElement("div");
+				detail.textContent = this.popupValueLabel ? `${this.popupValueLabel}: ${value}` : value;
+				content.appendChild(detail);
+			}
+		}
+		return content;
+	}
+	/** @internal */
+	_addLayer() {
+		this._removeLayer();
+		if (!this._mapEl?.map || !this.data) return;
+		this._layer = L.geoJSON(this.data, {
+			style: (feature) => feature ? this._getStyleForFeature(feature) : {},
+			interactive: this.interactive,
+			onEachFeature: (feature, layer) => {
+				const popup = this._getPopupForFeature(feature);
+				if (popup) layer.bindPopup(popup);
+				if (this.interactive) layer.on("click", (e) => {
+					this.dispatchEvent(new SigveloFeatureClickEvent(this._toGeoJsonFeature(feature), {
+						lat: e.latlng.lat,
+						lng: e.latlng.lng
+					}));
+				});
+			}
+		}).addTo(this._mapEl.map);
+		if (this.fitBounds && this._layer.getLayers().length > 0) {
+			const bounds = this._layer.getBounds();
+			if (bounds.isValid()) this._mapEl.map.fitBounds(bounds, { padding: [12, 12] });
+		}
+	}
+	/** @internal */
+	_removeLayer() {
+		this._layer?.remove();
+		this._layer = null;
+	}
+	updated(changed) {
+		if (changed.has("data") || changed.has("interactive") || changed.has("popupTitleProperty") || changed.has("popupValueProperty") || changed.has("popupValueLabel")) this._addLayer();
+		else if (changed.has("styleFunction") || changed.has("fillColor") || changed.has("fillOpacity") || changed.has("strokeColor") || changed.has("strokeWidth") || changed.has("strokeOpacity")) this._layer?.setStyle((feature) => feature ? this._getStyleForFeature(feature) : {});
+		else if (changed.has("fitBounds") && this.fitBounds && this._layer && this._mapEl?.map) {
+			const bounds = this._layer.getBounds();
+			if (bounds.isValid()) this._mapEl.map.fitBounds(bounds, { padding: [12, 12] });
+		}
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloLeafletGeojson.prototype, "data", void 0);
+__decorate([property({ attribute: false })], SigveloLeafletGeojson.prototype, "styleFunction", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloLeafletGeojson.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloLeafletGeojson.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloLeafletGeojson.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloLeafletGeojson.prototype, "strokeWidth", void 0);
+__decorate([property({
+	attribute: "stroke-opacity",
+	type: Number
+})], SigveloLeafletGeojson.prototype, "strokeOpacity", void 0);
+__decorate([property({ type: Boolean })], SigveloLeafletGeojson.prototype, "interactive", void 0);
+__decorate([property({ attribute: "popup-title-property" })], SigveloLeafletGeojson.prototype, "popupTitleProperty", void 0);
+__decorate([property({ attribute: "popup-value-property" })], SigveloLeafletGeojson.prototype, "popupValueProperty", void 0);
+__decorate([property({ attribute: "popup-value-label" })], SigveloLeafletGeojson.prototype, "popupValueLabel", void 0);
+__decorate([property({
+	attribute: "fit-bounds",
+	type: Boolean
+})], SigveloLeafletGeojson.prototype, "fitBounds", void 0);
+__decorate([property()], SigveloLeafletGeojson.prototype, "channel", void 0);
+SigveloLeafletGeojson = __decorate([customElement("sigvelo-leaflet-geojson")], SigveloLeafletGeojson);
+//#endregion
+export { SigveloLeafletGeojson as t };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { SigveloLeafletControl } from "./components/control/control.js";
+import { SigveloLeafletGeojson } from "./components/geojson/geojson.js";
+import { SigveloLeafletChoropleth } from "./components/choropleth/choropleth.js";
+import { SigveloLeafletCircle } from "./components/circle/circle.js";
+import { SigveloLeafletMap } from "./components/map/map.js";
+import { SigveloLeafletMarker } from "./components/marker/marker.js";
+import { SigveloLeafletPolygon } from "./components/polygon/polygon.js";
+import { SigveloLeafletPolyline } from "./components/polyline/polyline.js";
+import { SigveloLeafletPopup } from "./components/popup/popup.js";
+import { SigveloLeafletScaleControl } from "./components/scale-control/scale-control.js";
+import { SigveloLeafletTilelayer } from "./components/tilelayer/tilelayer.js";
+export { SigveloLeafletChoropleth, SigveloLeafletCircle, SigveloLeafletControl, SigveloLeafletGeojson, SigveloLeafletMap, SigveloLeafletMarker, SigveloLeafletPolygon, SigveloLeafletPolyline, SigveloLeafletPopup, SigveloLeafletScaleControl, SigveloLeafletTilelayer };

package/dist/index.js

@@ -0,0 +1,12 @@
+import { t as SigveloLeafletMap } from "./map-DRJUOrtM.js";
+import { t as SigveloLeafletTilelayer } from "./tilelayer-DI2cPv01.js";
+import { t as SigveloLeafletMarker } from "./marker-D4gW4fyF.js";
+import { t as SigveloLeafletPopup } from "./popup-BDNUUZWQ.js";
+import { t as SigveloLeafletGeojson } from "./geojson-DPaCrjMF.js";
+import { t as SigveloLeafletControl } from "./control-ysNMOWeF.js";
+import { SigveloLeafletChoropleth } from "./components/choropleth/choropleth.js";
+import { t as SigveloLeafletCircle } from "./circle-CqXHsyYH.js";
+import { t as SigveloLeafletPolyline } from "./polyline-SAcEwHDC.js";
+import { t as SigveloLeafletPolygon } from "./polygon-DbFiHm4R.js";
+import { t as SigveloLeafletScaleControl } from "./scale-control-BR_iH4gM.js";
+export { SigveloLeafletChoropleth, SigveloLeafletCircle, SigveloLeafletControl, SigveloLeafletGeojson, SigveloLeafletMap, SigveloLeafletMarker, SigveloLeafletPolygon, SigveloLeafletPolyline, SigveloLeafletPopup, SigveloLeafletScaleControl, SigveloLeafletTilelayer };

package/dist/map-DRJUOrtM.js

@@ -0,0 +1,204 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import * as L from "leaflet";
+import iconUrl from "leaflet/dist/images/marker-icon.png";
+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 leafletCss from "leaflet/dist/leaflet.css?raw";
+import layersIconUrl from "leaflet/dist/images/layers.png";
+import layersIcon2xUrl from "leaflet/dist/images/layers-2x.png";
+//#region src/components/map/map.styles.ts
+var map_styles_default = css`
+  :host {
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    min-height: 300px;
+    overflow: hidden;
+    border: 1px solid var(--sigvelo-color-neutral-border-muted, rgb(255 255 255 / 15%));
+    border-radius: var(--sigvelo-radius-md, 8px);
+    background: var(--sigvelo-color-surface-sunken, #171717);
+  }
+
+  .leaflet-container {
+    border-radius: inherit;
+    background: var(--sigvelo-color-surface-sunken, #171717);
+    font-family: inherit;
+  }
+
+  /*
+   * Leaflet ships its attribution link at #0078a8 on #333, which is 2.55:1
+   * against the surrounding text — below the 3:1 WCAG requires of a link
+   * distinguished by colour alone. This sheet is applied after Leaflet's, so
+   * underlining it satisfies the rule without depending on hue, and the
+   * control picks up the active theme instead of Leaflet's fixed palette.
+   */
+  .leaflet-container .leaflet-bottom.leaflet-right {
+    right: 0;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  .leaflet-container .leaflet-control-attribution {
+    float: none;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    padding: 4px 8px;
+    border: 0;
+    border-top: 1px solid var(--sigvelo-color-neutral-border-muted, rgb(255 255 255 / 15%));
+    border-radius: 0;
+    color: var(--sigvelo-color-text-muted, #b4b4b4);
+    background: color-mix(in srgb, var(--sigvelo-color-surface, #181818) 94%, transparent);
+    box-shadow: none;
+    font-size: 11px;
+    line-height: 1.35;
+    text-align: right;
+    white-space: normal;
+    pointer-events: auto;
+  }
+
+  .leaflet-container .leaflet-control-attribution a {
+    color: var(--sigvelo-color-primary-text, #ececec);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .leaflet-container .leaflet-bar {
+    overflow: hidden;
+    border: 1px solid var(--sigvelo-color-neutral-border-muted, rgb(255 255 255 / 15%));
+    border-radius: var(--sigvelo-radius-sm, 4px);
+    box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
+  }
+
+  .leaflet-container .leaflet-bar a,
+  .leaflet-container .leaflet-bar a:hover {
+    border-bottom-color: var(--sigvelo-color-neutral-border-muted, rgb(255 255 255 / 15%));
+    color: var(--sigvelo-color-text, #ececec);
+    background: var(--sigvelo-color-surface, #181818);
+  }
+
+  .leaflet-container .leaflet-bar a:hover {
+    background: var(--sigvelo-color-surface-raised, #282828);
+  }
+
+  .leaflet-container .leaflet-popup-content-wrapper,
+  .leaflet-container .leaflet-popup-tip {
+    color: #171717;
+    background: #fcfcfc;
+  }
+
+  .leaflet-container .leaflet-popup-close-button,
+  .leaflet-container .leaflet-popup-close-button:hover {
+    color: #595959;
+  }
+`;
+//#endregion
+//#region src/components/map/map.ts
+const leafletCssWithAssets = leafletCss.replace(/url\(images\/layers-2x\.png\)/g, `url(${layersIcon2xUrl})`).replace(/url\(images\/layers\.png\)/g, `url(${layersIconUrl})`).replace(/url\(images\/marker-icon\.png\)/g, `url(${iconUrl})`);
+let SigveloLeafletMap = class SigveloLeafletMap extends GeoMapElement {
+	constructor(..._args) {
+		super(..._args);
+		this.zoomControl = true;
+		this.attributionControl = true;
+		this._map = null;
+	}
+	static {
+		this.styles = [
+			...GeoMapElement.styles,
+			unsafeCSS(leafletCssWithAssets),
+			map_styles_default
+		];
+	}
+	/** Access the underlying Leaflet map instance (after mapReady resolves). */
+	get map() {
+		return this._map;
+	}
+	createMap(container) {
+		this._map = L.map(container, {
+			center: [this.latitude, this.longitude],
+			zoom: this.zoom,
+			minZoom: this.minZoom,
+			maxZoom: this.maxZoom,
+			zoomControl: this.zoomControl,
+			attributionControl: this.attributionControl
+		});
+		this._map.on("click", (e) => {
+			this.dispatchEvent(new SigveloMapClickEvent({
+				lat: e.latlng.lat,
+				lng: e.latlng.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.whenReady(() => {
+			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") || changed.has("zoom")) this._map.setView([this.latitude, this.longitude], this.zoom);
+		if (changed.has("minZoom")) this._map.setMinZoom(this.minZoom);
+		if (changed.has("maxZoom")) this._map.setMaxZoom(this.maxZoom);
+	}
+	invalidateSize() {
+		this._map?.invalidateSize();
+	}
+	flyTo(options) {
+		this._map?.flyTo([options.center.lat, options.center.lng], options.zoom, { duration: options.duration ? options.duration / 1e3 : void 0 });
+	}
+	fitBounds(options) {
+		this._map?.fitBounds([[options.bounds.south, options.bounds.west], [options.bounds.north, options.bounds.east]], {
+			padding: options.padding ? [options.padding, options.padding] : void 0,
+			maxZoom: options.maxZoom
+		});
+	}
+};
+__decorate([property({
+	attribute: "zoom-control",
+	type: Boolean
+})], SigveloLeafletMap.prototype, "zoomControl", void 0);
+__decorate([property({
+	attribute: "attribution-control",
+	type: Boolean
+})], SigveloLeafletMap.prototype, "attributionControl", void 0);
+SigveloLeafletMap = __decorate([customElement("sigvelo-leaflet-map")], SigveloLeafletMap);
+//#endregion
+export { SigveloLeafletMap as t };

package/dist/marker-D4gW4fyF.js

@@ -0,0 +1,115 @@
+import "./default-icon.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { findLeafletMap } from "./components/find-leaflet-map.js";
+import * as L from "leaflet";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/marker/marker.styles.ts
+var marker_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/marker/marker.ts
+let SigveloLeafletMarker = class SigveloLeafletMarker extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.latitude = 0;
+		this.longitude = 0;
+		this.title = "";
+		this.draggable = false;
+		this.opacity = 1;
+		this.iconUrl = "";
+		this.iconWidth = 25;
+		this.iconHeight = 41;
+		this._marker = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [marker_styles_default];
+	}
+	/** Access the underlying Leaflet marker instance. */
+	get marker() {
+		return this._marker;
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findLeafletMap(this);
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			if (!this.isConnected) return;
+			this._addMarker();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeMarker();
+	}
+	/** @internal */
+	_addMarker() {
+		this._removeMarker();
+		if (!this._mapEl?.map) return;
+		const options = {
+			title: this.title,
+			draggable: this.draggable,
+			opacity: this.opacity
+		};
+		if (this.iconUrl) options.icon = L.icon({
+			iconUrl: this.iconUrl,
+			iconSize: [this.iconWidth, this.iconHeight],
+			iconAnchor: [this.iconWidth / 2, this.iconHeight],
+			popupAnchor: [0, -this.iconHeight]
+		});
+		this._marker = L.marker([this.latitude, this.longitude], options).addTo(this._mapEl.map);
+		this._bindChildPopup();
+		this._marker.on("dragend", () => {
+			if (!this._marker) return;
+			const pos = this._marker.getLatLng();
+			this.latitude = pos.lat;
+			this.longitude = pos.lng;
+		});
+	}
+	/** @internal */
+	_removeMarker() {
+		this._marker?.remove();
+		this._marker = null;
+	}
+	/** @internal */
+	_bindChildPopup() {
+		if (!this._marker) return;
+		const popupEl = this.querySelector("sigvelo-leaflet-popup");
+		if (popupEl) {
+			const content = document.createElement("div");
+			content.append(...Array.from(popupEl.childNodes).map((n) => n.cloneNode(true)));
+			this._marker.bindPopup(content);
+		}
+	}
+	updated() {
+		if (this._marker) {
+			this._marker.setLatLng([this.latitude, this.longitude]);
+			this._marker.setOpacity(this.opacity);
+			this._bindChildPopup();
+		}
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({ type: Number })], SigveloLeafletMarker.prototype, "latitude", void 0);
+__decorate([property({ type: Number })], SigveloLeafletMarker.prototype, "longitude", void 0);
+__decorate([property()], SigveloLeafletMarker.prototype, "title", void 0);
+__decorate([property({ type: Boolean })], SigveloLeafletMarker.prototype, "draggable", void 0);
+__decorate([property({ type: Number })], SigveloLeafletMarker.prototype, "opacity", void 0);
+__decorate([property({ attribute: "icon-url" })], SigveloLeafletMarker.prototype, "iconUrl", void 0);
+__decorate([property({
+	attribute: "icon-width",
+	type: Number
+})], SigveloLeafletMarker.prototype, "iconWidth", void 0);
+__decorate([property({
+	attribute: "icon-height",
+	type: Number
+})], SigveloLeafletMarker.prototype, "iconHeight", void 0);
+SigveloLeafletMarker = __decorate([customElement("sigvelo-leaflet-marker")], SigveloLeafletMarker);
+//#endregion
+export { SigveloLeafletMarker as t };

package/dist/polygon-DbFiHm4R.js

@@ -0,0 +1,78 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { findLeafletMap } from "./components/find-leaflet-map.js";
+import * as L from "leaflet";
+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 SigveloLeafletPolygon = class SigveloLeafletPolygon extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.positions = [];
+		this.fillColor = "#3388ff";
+		this.fillOpacity = .2;
+		this.strokeColor = "#3388ff";
+		this.strokeWidth = 3;
+		this._polygon = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [polygon_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findLeafletMap(this);
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addPolygon();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._polygon?.remove();
+		this._polygon = null;
+	}
+	/** @internal */
+	_addPolygon() {
+		if (!this._mapEl?.map) return;
+		this._polygon = L.polygon(this.positions, {
+			fillColor: this.fillColor,
+			fillOpacity: this.fillOpacity,
+			color: this.strokeColor,
+			weight: this.strokeWidth
+		}).addTo(this._mapEl.map);
+	}
+	updated(changed) {
+		if (!this._polygon) return;
+		if (changed.has("positions")) this._polygon.setLatLngs(this.positions);
+		if (changed.has("fillColor") || changed.has("fillOpacity") || changed.has("strokeColor") || changed.has("strokeWidth")) this._polygon.setStyle({
+			fillColor: this.fillColor,
+			fillOpacity: this.fillOpacity,
+			color: this.strokeColor,
+			weight: this.strokeWidth
+		});
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloLeafletPolygon.prototype, "positions", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloLeafletPolygon.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloLeafletPolygon.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloLeafletPolygon.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloLeafletPolygon.prototype, "strokeWidth", void 0);
+SigveloLeafletPolygon = __decorate([customElement("sigvelo-leaflet-polygon")], SigveloLeafletPolygon);
+//#endregion
+export { SigveloLeafletPolygon as t };

package/dist/polyline-SAcEwHDC.js

@@ -0,0 +1,72 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { findLeafletMap } from "./components/find-leaflet-map.js";
+import * as L from "leaflet";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/polyline/polyline.styles.ts
+var polyline_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/polyline/polyline.ts
+let SigveloLeafletPolyline = class SigveloLeafletPolyline extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.positions = [];
+		this.color = "#3388ff";
+		this.weight = 3;
+		this.opacity = 1;
+		this.dashArray = "";
+		this._polyline = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [polyline_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findLeafletMap(this);
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addPolyline();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._polyline?.remove();
+		this._polyline = null;
+	}
+	/** @internal */
+	_addPolyline() {
+		if (!this._mapEl?.map) return;
+		this._polyline = L.polyline(this.positions, {
+			color: this.color,
+			weight: this.weight,
+			opacity: this.opacity,
+			dashArray: this.dashArray || void 0
+		}).addTo(this._mapEl.map);
+	}
+	updated(changed) {
+		if (!this._polyline) return;
+		if (changed.has("positions")) this._polyline.setLatLngs(this.positions);
+		if (changed.has("color") || changed.has("weight") || changed.has("opacity") || changed.has("dashArray")) this._polyline.setStyle({
+			color: this.color,
+			weight: this.weight,
+			opacity: this.opacity,
+			dashArray: this.dashArray || void 0
+		});
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloLeafletPolyline.prototype, "positions", void 0);
+__decorate([property()], SigveloLeafletPolyline.prototype, "color", void 0);
+__decorate([property({ type: Number })], SigveloLeafletPolyline.prototype, "weight", void 0);
+__decorate([property({ type: Number })], SigveloLeafletPolyline.prototype, "opacity", void 0);
+__decorate([property({ attribute: "dash-array" })], SigveloLeafletPolyline.prototype, "dashArray", void 0);
+SigveloLeafletPolyline = __decorate([customElement("sigvelo-leaflet-polyline")], SigveloLeafletPolyline);
+//#endregion
+export { SigveloLeafletPolyline as t };