@mcp-b/geo-maplibre 0.2.0

package/dist/polyline-Dt4yBInz.js

@@ -0,0 +1,98 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+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 lineCounter = 0;
+let SigveloMaplibrePolyline = class SigveloMaplibrePolyline extends LitElement {
+	static {
+		this.styles = [polyline_styles_default];
+	}
+	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 = this.closest("sigvelo-maplibre-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			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 as t };

package/dist/popup-BNRD9rNd.js

@@ -0,0 +1,30 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/popup/popup.styles.ts
+var popup_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/popup/popup.ts
+let SigveloMaplibrePopup = class SigveloMaplibrePopup extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.maxWidth = 300;
+	}
+	static {
+		this.styles = [popup_styles_default];
+	}
+	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 as t };

package/dist/scale-control-DPWq0EHU.js

@@ -0,0 +1,58 @@
+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/scale-control/scale-control.styles.ts
+var scale_control_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#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 = [scale_control_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-maplibre-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			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 as t };

package/dist/tilelayer-CCmClbSv.js

@@ -0,0 +1,85 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/tilelayer/tilelayer.styles.ts
+var tilelayer_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#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 = [tilelayer_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-maplibre-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			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 as t };

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@mcp-b/geo-maplibre",
+  "version": "0.2.0",
+  "description": "MapLibre GL JS web components for Sigvelo, built with Lit.",
+  "keywords": [
+    "custom-elements",
+    "geospatial",
+    "lit-element",
+    "maplibre",
+    "maps",
+    "web-components",
+    "webgl"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WebMCP-org/design-system.git",
+    "directory": "packages/geo-maplibre"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/*": "./dist/components/*",
+    "./custom-elements.json": "./dist/docs/custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@mcp-b/geo-support": "0.2.0",
+    "@mcp-b/wc-support": "0.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@storybook/addon-a11y": "^10.5.2",
+    "@storybook/addon-docs": "^10.5.2",
+    "@storybook/addon-vitest": "^10.5.2",
+    "@storybook/web-components-vite": "10.5.2",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@wc-toolkit/cem-inheritance": "^1.2.2",
+    "@wc-toolkit/cem-sorter": "^1.0.1",
+    "@wc-toolkit/type-parser": "^1.2.0",
+    "maplibre-gl": "^5.5.0",
+    "playwright": "~1.61.0",
+    "storybook": "^10.5.2",
+    "tinyglobby": "^0.2.15",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plugin-static-copy": "^3.3.0",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "lit-html": "^3.0.0",
+    "maplibre-gl": "^5.0.0"
+  },
+  "customElements": "dist/docs/custom-elements.json",
+  "scripts": {
+    "analyze": "cem analyze",
+    "analyze:dev": "cem analyze --watch",
+    "build": "tsc -p tsconfig.prod.json && vp run build:lib && vp run analyze",
+    "build:lib": "vp pack",
+    "storybook": "vp run @mcp-b/web-components#storybook",
+    "test": "vp run @mcp-b/web-components#test",
+    "typecheck": "tsc --noEmit"
+  }
+}