@mcp-b/geo-maplibre 0.2.21 → 0.3.0

package/dist/components/marker/marker.js

@@ -1,2 +1,67 @@
-import { t as SigveloMaplibreMarker } from "../../marker-DzWveHNW.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import maplibregl from "maplibre-gl";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+import { clonePopupContent } from "@mcp-b/geo-support/base/popup-content";
+//#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 = [styles];
+	}
+	/** Access the underlying MapLibre marker instance. */
+	get marker() {
+		return this._marker;
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-maplibre-map");
+		await this._mapEl?.whenMapReady(this, () => 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) this._marker.setPopup(new maplibregl.Popup().setDOMContent(clonePopupContent(popupEl)));
+		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 };

package/dist/components/polygon/polygon.js

@@ -1,2 +1,111 @@
-import { t as SigveloMaplibrePolygon } from "../../polygon-BJ-z1X7p.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";
+//#region src/components/polygon/polygon.ts
+let polygonCounter = 0;
+let SigveloMaplibrePolygon = class SigveloMaplibrePolygon extends LitElement {
+	static {
+		this.styles = [styles];
+	}
+	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 = findMapElement(this, "sigvelo-maplibre-map");
+		await this._mapEl?.whenMapReady(this, () => 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 };

package/dist/components/polyline/polyline.js

@@ -1,2 +1,90 @@
-import { t as SigveloMaplibrePolyline } from "../../polyline-Dt4yBInz.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";
+//#region src/components/polyline/polyline.ts
+let lineCounter = 0;
+let SigveloMaplibrePolyline = class SigveloMaplibrePolyline extends LitElement {
+	static {
+		this.styles = [styles];
+	}
+	constructor() {
+		super();
+		this.positions = [];
+		this.color = "#3388ff";
+		this.width = 3;
+		this.opacity = 1;
+		this.dashArray = [];
+		this._mapEl = null;
+		const id = ++lineCounter;
+		this._sourceId = `sigvelo-line-source-${id}`;
+		this._layerId = `sigvelo-line-layer-${id}`;
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-maplibre-map");
+		await this._mapEl?.whenMapReady(this, () => this._addLine());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeLine();
+	}
+	_toGeoJSON() {
+		return {
+			type: "Feature",
+			geometry: {
+				type: "LineString",
+				coordinates: this.positions.map(([lat, lng]) => [lng, lat])
+			},
+			properties: {}
+		};
+	}
+	_addLine() {
+		const map = this._mapEl?.map;
+		if (!map || this.positions.length < 2) return;
+		map.addSource(this._sourceId, {
+			type: "geojson",
+			data: this._toGeoJSON()
+		});
+		map.addLayer({
+			id: this._layerId,
+			type: "line",
+			source: this._sourceId,
+			paint: {
+				"line-color": this.color,
+				"line-width": this.width,
+				"line-opacity": this.opacity,
+				...this.dashArray.length ? { "line-dasharray": this.dashArray } : {}
+			}
+		});
+	}
+	_removeLine() {
+		const map = this._mapEl?.map;
+		if (!map) return;
+		if (map.getLayer(this._layerId)) map.removeLayer(this._layerId);
+		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("color") && map.getLayer(this._layerId)) map.setPaintProperty(this._layerId, "line-color", this.color);
+		if (changed.has("width") && map.getLayer(this._layerId)) map.setPaintProperty(this._layerId, "line-width", this.width);
+		if (changed.has("opacity") && map.getLayer(this._layerId)) map.setPaintProperty(this._layerId, "line-opacity", this.opacity);
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloMaplibrePolyline.prototype, "positions", void 0);
+__decorate([property()], SigveloMaplibrePolyline.prototype, "color", void 0);
+__decorate([property({ type: Number })], SigveloMaplibrePolyline.prototype, "width", void 0);
+__decorate([property({ type: Number })], SigveloMaplibrePolyline.prototype, "opacity", void 0);
+__decorate([property({ attribute: false })], SigveloMaplibrePolyline.prototype, "dashArray", void 0);
+SigveloMaplibrePolyline = __decorate([customElement("sigvelo-maplibre-polyline")], SigveloMaplibrePolyline);
+//#endregion
 export { SigveloMaplibrePolyline };

package/dist/components/popup/popup.js

@@ -1,2 +1,24 @@
-import { t as SigveloMaplibrePopup } from "../../popup-BNRD9rNd.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 SigveloMaplibrePopup = class SigveloMaplibrePopup 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
+})], SigveloMaplibrePopup.prototype, "maxWidth", void 0);
+SigveloMaplibrePopup = __decorate([customElement("sigvelo-maplibre-popup")], SigveloMaplibrePopup);
+//#endregion
 export { SigveloMaplibrePopup };

package/dist/components/scale-control/scale-control.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from "lit";
+import { ControlPosition } from "@mcp-b/geo-support/types";
 
 //#region src/components/scale-control/scale-control.d.ts
 /**
@@ -10,7 +11,7 @@ declare class SigveloMaplibreScaleControl extends LitElement {
   /** @internal */
   static styles: import("lit").CSSResult[];
   /** Position of the control on the map. */
-  position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  position: ControlPosition;
   /** Unit system for the scale bar. */
   unit: "imperial" | "metric" | "nautical";
   /** Maximum width of the scale bar in pixels. */

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

@@ -1,2 +1,50 @@
-import { t as SigveloMaplibreScaleControl } from "../../scale-control-DPWq0EHU.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import maplibregl from "maplibre-gl";
+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/scale-control/scale-control.ts
+let SigveloMaplibreScaleControl = class SigveloMaplibreScaleControl extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.position = "bottom-left";
+		this.unit = "metric";
+		this.maxWidth = 100;
+		this._control = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-maplibre-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;
+	}
+	_addControl() {
+		if (!this._mapEl?.map) return;
+		this._control = new maplibregl.ScaleControl({
+			maxWidth: this.maxWidth,
+			unit: this.unit
+		});
+		this._mapEl.map.addControl(this._control, this.position);
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property()], SigveloMaplibreScaleControl.prototype, "position", void 0);
+__decorate([property()], SigveloMaplibreScaleControl.prototype, "unit", void 0);
+__decorate([property({
+	attribute: "max-width",
+	type: Number
+})], SigveloMaplibreScaleControl.prototype, "maxWidth", void 0);
+SigveloMaplibreScaleControl = __decorate([customElement("sigvelo-maplibre-scale-control")], SigveloMaplibreScaleControl);
+//#endregion
 export { SigveloMaplibreScaleControl };

package/dist/components/tilelayer/tilelayer.js

@@ -1,2 +1,77 @@
-import { t as SigveloMaplibreTilelayer } from "../../tilelayer-CCmClbSv.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";
+//#region src/components/tilelayer/tilelayer.ts
+let SigveloMaplibreTilelayer = class SigveloMaplibreTilelayer extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.styleUrl = "";
+		this.url = "";
+		this.attribution = "";
+		this.opacity = 1;
+		this._rasterSourceId = "sigvelo-raster-source";
+		this._rasterLayerId = "sigvelo-raster-layer";
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-maplibre-map");
+		await this._mapEl?.whenMapReady(this, () => this._applyTiles());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeRasterLayer();
+	}
+	_applyTiles() {
+		const map = this._mapEl?.map;
+		if (!map) return;
+		if (this.styleUrl) map.setStyle(this.styleUrl);
+		else if (this.url) this._addRasterLayer();
+	}
+	_addRasterLayer() {
+		const map = this._mapEl?.map;
+		if (!map || !this.url) return;
+		if (!map.isStyleLoaded()) return;
+		this._removeRasterLayer();
+		map.addSource(this._rasterSourceId, {
+			type: "raster",
+			tiles: [this.url],
+			tileSize: 256,
+			attribution: this.attribution || void 0
+		});
+		map.addLayer({
+			id: this._rasterLayerId,
+			type: "raster",
+			source: this._rasterSourceId,
+			paint: { "raster-opacity": this.opacity }
+		});
+	}
+	_removeRasterLayer() {
+		const map = this._mapEl?.map;
+		if (!map) return;
+		if (map.getLayer(this._rasterLayerId)) map.removeLayer(this._rasterLayerId);
+		if (map.getSource(this._rasterSourceId)) map.removeSource(this._rasterSourceId);
+	}
+	updated(changed) {
+		if (changed.has("styleUrl") || changed.has("url")) this._applyTiles();
+		if (changed.has("opacity") && this._mapEl?.map) {
+			const map = this._mapEl.map;
+			if (map.getLayer(this._rasterLayerId)) map.setPaintProperty(this._rasterLayerId, "raster-opacity", this.opacity);
+		}
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: "style-url" })], SigveloMaplibreTilelayer.prototype, "styleUrl", void 0);
+__decorate([property()], SigveloMaplibreTilelayer.prototype, "url", void 0);
+__decorate([property()], SigveloMaplibreTilelayer.prototype, "attribution", void 0);
+__decorate([property({ type: Number })], SigveloMaplibreTilelayer.prototype, "opacity", void 0);
+SigveloMaplibreTilelayer = __decorate([customElement("sigvelo-maplibre-tilelayer")], SigveloMaplibreTilelayer);
+//#endregion
 export { SigveloMaplibreTilelayer };

package/dist/docs/custom-elements.json

@@ -217,7 +217,27 @@
           "kind": "class",
           "description": "A generic control container for a MapLibre map. Wraps arbitrary content\nand places it in one of MapLibre's four control corners, stacking properly\nwith navigation, attribution, and other controls.",
           "name": "SigveloMaplibreControl",
+          "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"
+            },
             {
               "kind": "field",
               "name": "position",
@@ -1260,7 +1280,7 @@
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\""
+                "text": "ControlPosition"
               },
               "default": "\"bottom-left\"",
               "description": "Position of the control on the map.",
@@ -1290,7 +1310,7 @@
             {
               "name": "position",
               "type": {
-                "text": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\""
+                "text": "ControlPosition"
               },
               "default": "\"bottom-left\"",
               "description": "Position of the control on the map.",
@@ -1562,7 +1582,7 @@
   "package": {
     "name": "@mcp-b/geo-maplibre",
     "description": "MapLibre GL JS web components for Sigvelo, built with Lit.",
-    "version": "0.2.21",
+    "version": "0.3.0",
     "license": "MIT"
   }
 }

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/geo-maplibre",
-  "version": "0.2.21",
+  "version": "0.3.0",
   "description": "MapLibre GL JS web components for Sigvelo, built with Lit.",
   "keywords": [
     "custom-elements",
@@ -34,8 +34,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",