@mcp-b/geo-maplibre 0.2.21 → 0.3.0

package/dist/circle-CFH3gDcY.js

@@ -1,146 +0,0 @@
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-//#region src/components/circle/circle.styles.ts
-var circle_styles_default = css`
-  :host {
-    display: none;
-  }
-`;
-//#endregion
-//#region src/components/circle/circle.ts
-let circleCounter = 0;
-/**
-* Creates a GeoJSON polygon approximation of a circle on the map.
-* @param lng - Center longitude
-* @param lat - Center latitude
-* @param radiusMeters - Radius in meters
-* @param steps - Number of polygon vertices
-*/
-function createCirclePolygon(lng, lat, radiusMeters, steps = 64) {
-	const coords = [];
-	const earthRadius = 6371008.8;
-	const latRad = lat * Math.PI / 180;
-	for (let i = 0; i <= steps; i++) {
-		const angle = i * 2 * Math.PI / steps;
-		const dLat = radiusMeters / earthRadius * Math.cos(angle);
-		const dLng = radiusMeters / (earthRadius * Math.cos(latRad)) * Math.sin(angle);
-		coords.push([lng + dLng * 180 / Math.PI, lat + dLat * 180 / Math.PI]);
-	}
-	return {
-		type: "Feature",
-		geometry: {
-			type: "Polygon",
-			coordinates: [coords]
-		},
-		properties: {}
-	};
-}
-let SigveloMaplibreCircle = class SigveloMaplibreCircle extends LitElement {
-	static {
-		this.styles = [circle_styles_default];
-	}
-	constructor() {
-		super();
-		this.latitude = 0;
-		this.longitude = 0;
-		this.radius = 100;
-		this.fillColor = "#3388ff";
-		this.fillOpacity = .2;
-		this.strokeColor = "#3388ff";
-		this.strokeWidth = 2;
-		this._mapEl = null;
-		const id = ++circleCounter;
-		this._sourceId = `sigvelo-circle-source-${id}`;
-		this._fillLayerId = `sigvelo-circle-fill-${id}`;
-		this._strokeLayerId = `sigvelo-circle-stroke-${id}`;
-	}
-	async connectedCallback() {
-		super.connectedCallback();
-		this._mapEl = this.closest("sigvelo-maplibre-map");
-		if (this._mapEl) {
-			await this._mapEl.mapReady;
-			this._addCircle();
-		}
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._removeCircle();
-	}
-	_buildGeoJSON() {
-		return createCirclePolygon(this.longitude, this.latitude, this.radius);
-	}
-	_addCircle() {
-		const map = this._mapEl?.map;
-		if (!map) return;
-		map.addSource(this._sourceId, {
-			type: "geojson",
-			data: this._buildGeoJSON()
-		});
-		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
-			}
-		});
-	}
-	_removeCircle() {
-		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);
-	}
-	_updateSource() {
-		const map = this._mapEl?.map;
-		if (!map) return;
-		const source = map.getSource(this._sourceId);
-		if (source) source.setData(this._buildGeoJSON());
-	}
-	updated(changed) {
-		if (!this._mapEl?.map) return;
-		if (changed.has("latitude") || changed.has("longitude") || changed.has("radius")) this._updateSource();
-		if (changed.has("fillColor") || changed.has("fillOpacity")) {
-			if (this._mapEl.map.getLayer(this._fillLayerId)) {
-				this._mapEl.map.setPaintProperty(this._fillLayerId, "fill-color", this.fillColor);
-				this._mapEl.map.setPaintProperty(this._fillLayerId, "fill-opacity", this.fillOpacity);
-			}
-		}
-		if (changed.has("strokeColor") || changed.has("strokeWidth")) {
-			if (this._mapEl.map.getLayer(this._strokeLayerId)) {
-				this._mapEl.map.setPaintProperty(this._strokeLayerId, "line-color", this.strokeColor);
-				this._mapEl.map.setPaintProperty(this._strokeLayerId, "line-width", this.strokeWidth);
-			}
-		}
-	}
-	render() {
-		return html``;
-	}
-};
-__decorate([property({ type: Number })], SigveloMaplibreCircle.prototype, "latitude", void 0);
-__decorate([property({ type: Number })], SigveloMaplibreCircle.prototype, "longitude", void 0);
-__decorate([property({ type: Number })], SigveloMaplibreCircle.prototype, "radius", void 0);
-__decorate([property({ attribute: "fill-color" })], SigveloMaplibreCircle.prototype, "fillColor", void 0);
-__decorate([property({
-	attribute: "fill-opacity",
-	type: Number
-})], SigveloMaplibreCircle.prototype, "fillOpacity", void 0);
-__decorate([property({ attribute: "stroke-color" })], SigveloMaplibreCircle.prototype, "strokeColor", void 0);
-__decorate([property({
-	attribute: "stroke-width",
-	type: Number
-})], SigveloMaplibreCircle.prototype, "strokeWidth", void 0);
-SigveloMaplibreCircle = __decorate([customElement("sigvelo-maplibre-circle")], SigveloMaplibreCircle);
-//#endregion
-export { SigveloMaplibreCircle as t };

package/dist/control-Bka68vGo.js

@@ -1,61 +0,0 @@
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-//#region src/components/control/control.styles.ts
-var control_styles_default = css`
-  :host {
-    display: none;
-  }
-`;
-//#endregion
-//#region src/components/control/control.ts
-let SigveloMaplibreControl = class SigveloMaplibreControl extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.position = "bottom-left";
-		this._control = null;
-		this._mapEl = null;
-	}
-	static {
-		this.styles = [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;
-	}
-	/** @internal */
-	_addControl() {
-		const map = this._mapEl?.map;
-		if (!map) return;
-		const children = Array.from(this.children);
-		let container;
-		this._control = {
-			onAdd: () => {
-				container = document.createElement("div");
-				container.className = "maplibregl-ctrl sigvelo-maplibre-custom-control";
-				for (const child of children) container.appendChild(child);
-				return container;
-			},
-			onRemove: () => {
-				container?.remove();
-			}
-		};
-		map.addControl(this._control, this.position);
-	}
-	render() {
-		return html` <slot></slot> `;
-	}
-};
-__decorate([property()], SigveloMaplibreControl.prototype, "position", void 0);
-SigveloMaplibreControl = __decorate([customElement("sigvelo-maplibre-control")], SigveloMaplibreControl);
-//#endregion
-export { SigveloMaplibreControl as t };

package/dist/geojson-BW9JQxtv.js

@@ -1,240 +0,0 @@
-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/layer-COvBRP1h.js

@@ -1,61 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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 };