@mcp-b/geo-openlayers 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MCP-B contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/circle-BiLEqiGC.js

@@ -0,0 +1,102 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { fromLonLat } from "ol/proj.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import { Fill, Stroke, Style } from "ol/style.js";
+import Feature from "ol/Feature.js";
+import Circle$1 from "ol/geom/Circle.js";
+//#region src/components/circle/circle.styles.ts
+var circle_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/circle/circle.ts
+let SigveloOlCircle = class SigveloOlCircle extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.latitude = 0;
+		this.longitude = 0;
+		this.radius = 100;
+		this.fillColor = "#3388ff";
+		this.fillOpacity = .2;
+		this.strokeColor = "#3388ff";
+		this.strokeWidth = 2;
+		this._layer = null;
+		this._feature = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [circle_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-ol-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addCircle();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._layer && this._mapEl?.map) this._mapEl.map.removeLayer(this._layer);
+		this._layer = null;
+		this._feature = null;
+	}
+	/** @internal */
+	_hexToRgba(hex, opacity) {
+		return `rgba(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)}, ${opacity})`;
+	}
+	/** @internal */
+	_addCircle() {
+		if (!this._mapEl?.map) return;
+		const geometry = new Circle$1(fromLonLat([this.longitude, this.latitude]), this.radius);
+		this._feature = new Feature({ geometry });
+		const style = new Style({
+			fill: new Fill({ color: this._hexToRgba(this.fillColor, this.fillOpacity) }),
+			stroke: new Stroke({
+				color: this.strokeColor,
+				width: this.strokeWidth
+			})
+		});
+		this._layer = new VectorLayer({
+			source: new VectorSource({ features: [this._feature] }),
+			style
+		});
+		this._mapEl.map.addLayer(this._layer);
+	}
+	updated(changed) {
+		if (!this._feature || !this._layer) return;
+		if (changed.has("latitude") || changed.has("longitude")) this._feature.getGeometry().setCenter(fromLonLat([this.longitude, this.latitude]));
+		if (changed.has("radius")) this._feature.getGeometry().setRadius(this.radius);
+		if (changed.has("fillColor") || changed.has("fillOpacity") || changed.has("strokeColor") || changed.has("strokeWidth")) this._layer.setStyle(new Style({
+			fill: new Fill({ color: this._hexToRgba(this.fillColor, this.fillOpacity) }),
+			stroke: new Stroke({
+				color: this.strokeColor,
+				width: this.strokeWidth
+			})
+		}));
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ type: Number })], SigveloOlCircle.prototype, "latitude", void 0);
+__decorate([property({ type: Number })], SigveloOlCircle.prototype, "longitude", void 0);
+__decorate([property({ type: Number })], SigveloOlCircle.prototype, "radius", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloOlCircle.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloOlCircle.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloOlCircle.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloOlCircle.prototype, "strokeWidth", void 0);
+SigveloOlCircle = __decorate([customElement("sigvelo-ol-circle")], SigveloOlCircle);
+//#endregion
+export { SigveloOlCircle as t };

package/dist/components/circle/circle.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from "lit";
+
+//#region src/components/circle/circle.d.ts
+/**
+ * A circle overlay on an OpenLayers map. Must be a child of `<sigvelo-ol-map>`.
+ *
+ * @tag sigvelo-ol-circle
+ */
+declare class SigveloOlCircle extends LitElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** Center latitude. */
+  latitude: number;
+  /** Center longitude. */
+  longitude: number;
+  /** Radius in meters. */
+  radius: number;
+  /** Fill color (CSS color string). */
+  fillColor: string;
+  /** Fill opacity (0-1). */
+  fillOpacity: number;
+  /** Stroke color (CSS color string). */
+  strokeColor: string;
+  /** Stroke width in pixels. */
+  strokeWidth: number;
+  /** @internal */
+  private _layer;
+  /** @internal */
+  private _feature;
+  /** @internal */
+  private _mapEl;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  /** @internal */
+  private _hexToRgba;
+  /** @internal */
+  private _addCircle;
+  protected updated(changed: PropertyValues): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-circle": SigveloOlCircle;
+  }
+}
+//#endregion
+export { SigveloOlCircle };

package/dist/components/circle/circle.js

@@ -0,0 +1,2 @@
+import { t as SigveloOlCircle } from "../../circle-BiLEqiGC.js";
+export { SigveloOlCircle };

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

@@ -0,0 +1,41 @@
+import { LitElement } from "lit";
+
+//#region src/components/control/control.d.ts
+type ControlPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+/**
+ * A generic control container for an OpenLayers map. Wraps arbitrary content
+ * and adds it as an OL control, positioned in a map corner.
+ *
+ * @tag sigvelo-ol-control
+ *
+ * @example
+ * ```html
+ * <sigvelo-ol-map>
+ *   <sigvelo-ol-control position="bottom-left">
+ *     <sigvelo-geo-legend title="Density" ...></sigvelo-geo-legend>
+ *   </sigvelo-ol-control>
+ * </sigvelo-ol-map>
+ * ```
+ */
+declare class SigveloOlControl extends LitElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** Position of the control on the map. */
+  position: ControlPosition;
+  /** @internal */
+  private _control;
+  /** @internal */
+  private _mapEl;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  /** @internal */
+  private _addControl;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-control": SigveloOlControl;
+  }
+}
+//#endregion
+export { SigveloOlControl };

package/dist/components/control/control.js

@@ -0,0 +1,2 @@
+import { t as SigveloOlControl } from "../../control-CTiiOtzM.js";
+export { SigveloOlControl };

package/dist/components/geojson/geojson.d.ts

@@ -0,0 +1,66 @@
+import { LitElement, PropertyValues } from "lit";
+import { GeoJsonData, StyleFunction } from "@mcp-b/geo-support/types";
+
+//#region src/components/geojson/geojson.d.ts
+/**
+ * Renders GeoJSON data on an OpenLayers map. Must be a child of `<sigvelo-ol-map>`.
+ *
+ * @tag sigvelo-ol-geojson
+ *
+ * @event sigvelo-feature-click - Fired when a GeoJSON feature is clicked.
+ */
+declare class SigveloOlGeojson extends LitElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** GeoJSON data. Set via property. */
+  data: GeoJsonData | null;
+  /**
+   * Per-feature style function for choropleth / thematic maps.
+   * When set, each feature is styled by calling this function.
+   * Returned values override the static style props; omitted keys fall back to them.
+   */
+  styleFunction: StyleFunction | null;
+  /** Fill color (CSS color string). */
+  fillColor: string;
+  /** Fill opacity (0-1). */
+  fillOpacity: number;
+  /** Stroke color (CSS color string). */
+  strokeColor: string;
+  /** Stroke width in pixels. */
+  strokeWidth: number;
+  /** Radius of circle markers for Point geometries. */
+  circleRadius: number;
+  /** Whether features are clickable. */
+  interactive: boolean;
+  /** Channel name for auto-syncing with a classify panel. */
+  channel: string;
+  /** @internal */
+  private _layer;
+  /** @internal */
+  private _mapEl;
+  /** @internal */
+  private _unsubscribeChannel;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  /** @internal */
+  private _subscribeChannel;
+  /** @internal Convert an OL Feature to a GeoJsonFeature for the styleFunction. */
+  private _toGeoJsonFeature;
+  /** @internal */
+  private _addLayer;
+  /** @internal */
+  private _removeLayer;
+  /** @internal */
+  private _bindClickHandler;
+  /** @internal */
+  private _hexToRgba;
+  protected updated(changed: PropertyValues): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-geojson": SigveloOlGeojson;
+  }
+}
+//#endregion
+export { SigveloOlGeojson };

package/dist/components/geojson/geojson.js

@@ -0,0 +1,2 @@
+import { t as SigveloOlGeojson } from "../../geojson-BU-tOeyz.js";
+export { SigveloOlGeojson };

package/dist/components/map/map.d.ts

@@ -0,0 +1,45 @@
+import { PropertyValues } from "lit";
+import { GeoMapElement } from "@mcp-b/geo-support/base/geo-map-element";
+import OlMap from "ol/Map.js";
+import View from "ol/View.js";
+import { FitBoundsOptions, FlyToOptions } from "@mcp-b/geo-support/types";
+
+//#region src/components/map/map.d.ts
+/**
+ * An OpenLayers map component. Add tile layers, vector layers, and overlays
+ * as children of this component.
+ *
+ * @tag sigvelo-ol-map
+ *
+ * @event sigvelo-map-click - Fired when the map is clicked.
+ * @event sigvelo-map-move - Fired while the map center is changing.
+ * @event sigvelo-map-moveend - Fired when map movement ends.
+ * @event sigvelo-map-zoom - Fired while the zoom level is changing.
+ * @event sigvelo-map-zoomend - Fired when zooming ends.
+ * @event sigvelo-map-load - Fired when the map finishes loading.
+ */
+declare class SigveloOlMap extends GeoMapElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** @internal */
+  private _map;
+  /** @internal */
+  private _view;
+  /** Access the underlying OpenLayers map instance (after mapReady resolves). */
+  get map(): OlMap | null;
+  /** Access the underlying OpenLayers view instance. */
+  get view(): View | null;
+  protected createMap(container: HTMLElement): void;
+  protected destroyMap(): void;
+  protected updateView(changed: PropertyValues): void;
+  protected invalidateSize(): void;
+  flyTo(options: FlyToOptions): void;
+  fitBounds(options: FitBoundsOptions): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-map": SigveloOlMap;
+  }
+}
+//#endregion
+export { SigveloOlMap };

package/dist/components/map/map.js

@@ -0,0 +1,2 @@
+import { t as SigveloOlMap } from "../../map-eGQh7n8O.js";
+export { SigveloOlMap };

package/dist/components/marker/marker.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from "lit";
+
+//#region src/components/marker/marker.d.ts
+/**
+ * A marker on an OpenLayers map. Must be a child of `<sigvelo-ol-map>`.
+ * Renders a default pin icon at the specified coordinates. Nest a
+ * `<sigvelo-ol-popup>` inside for popup content on click.
+ *
+ * @tag sigvelo-ol-marker
+ * @slot - Optional popup content.
+ */
+declare class SigveloOlMarker extends LitElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** Center latitude. */
+  latitude: number;
+  /** Center longitude. */
+  longitude: number;
+  /** Marker color (CSS color string). */
+  color: string;
+  /** Title attribute (shows on hover). */
+  title: string;
+  /** @internal */
+  private _overlay;
+  /** @internal */
+  private _markerEl;
+  /** @internal */
+  private _mapEl;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  /** @internal */
+  private _addMarker;
+  /** @internal */
+  private _popupOverlay;
+  /** @internal */
+  private _showPopup;
+  protected updated(): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-marker": SigveloOlMarker;
+  }
+}
+//#endregion
+export { SigveloOlMarker };

package/dist/components/marker/marker.js

@@ -0,0 +1,2 @@
+import { t as SigveloOlMarker } from "../../marker-DEG_oTfJ.js";
+export { SigveloOlMarker };

package/dist/components/overlay/overlay.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from "lit";
+
+//#region src/components/overlay/overlay.d.ts
+/**
+ * An overlay (marker/popup anchor) on an OpenLayers map.
+ * Must be a child of `<sigvelo-ol-map>`. Slotted content is placed
+ * at the specified coordinates on the map.
+ *
+ * @tag sigvelo-ol-overlay
+ * @slot - Overlay content (marker icon, popup, etc.).
+ */
+declare class SigveloOlOverlay extends LitElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** Center latitude. */
+  latitude: number;
+  /** Center longitude. */
+  longitude: number;
+  /** Positioning of the overlay relative to its coordinate. */
+  positioning: string;
+  /** @internal */
+  private _overlay;
+  /** @internal */
+  private _contentEl;
+  /** @internal */
+  private _mapEl;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  /** @internal */
+  private _addOverlay;
+  protected updated(): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-overlay": SigveloOlOverlay;
+  }
+}
+//#endregion
+export { SigveloOlOverlay };

package/dist/components/overlay/overlay.js

@@ -0,0 +1,2 @@
+import { t as SigveloOlOverlay } from "../../overlay-BFXjnhLj.js";
+export { SigveloOlOverlay };

package/dist/components/polygon/polygon.d.ts

@@ -0,0 +1,45 @@
+import { LitElement, PropertyValues } from "lit";
+
+//#region src/components/polygon/polygon.d.ts
+/**
+ * A polygon overlay on an OpenLayers map. Must be a child of `<sigvelo-ol-map>`.
+ *
+ * @tag sigvelo-ol-polygon
+ */
+declare class SigveloOlPolygon extends LitElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** Array of [lat, lng] coordinate pairs forming the polygon. Set via property. */
+  positions: Array<[number, number]>;
+  /** Fill color (CSS color string). */
+  fillColor: string;
+  /** Fill opacity (0-1). */
+  fillOpacity: number;
+  /** Stroke color (CSS color string). */
+  strokeColor: string;
+  /** Stroke width in pixels. */
+  strokeWidth: number;
+  /** @internal */
+  private _layer;
+  /** @internal */
+  private _feature;
+  /** @internal */
+  private _mapEl;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  /** @internal */
+  private _toCoords;
+  /** @internal */
+  private _hexToRgba;
+  /** @internal */
+  private _addPolygon;
+  protected updated(changed: PropertyValues): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-polygon": SigveloOlPolygon;
+  }
+}
+//#endregion
+export { SigveloOlPolygon };

package/dist/components/polygon/polygon.js

@@ -0,0 +1,2 @@
+import { t as SigveloOlPolygon } from "../../polygon-BaKBzEHK.js";
+export { SigveloOlPolygon };

package/dist/components/polyline/polyline.d.ts

@@ -0,0 +1,45 @@
+import { LitElement, PropertyValues } from "lit";
+
+//#region src/components/polyline/polyline.d.ts
+/**
+ * A polyline on an OpenLayers map. Must be a child of `<sigvelo-ol-map>`.
+ *
+ * @tag sigvelo-ol-polyline
+ */
+declare class SigveloOlPolyline extends LitElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** Array of [lat, lng] coordinate pairs. Set via property. */
+  positions: Array<[number, number]>;
+  /** Line color (CSS color string). */
+  color: string;
+  /** Line width in pixels. */
+  width: number;
+  /** Opacity (0-1). */
+  opacity: number;
+  /** Dash pattern (e.g. [5, 10]). Set via property. */
+  dashArray: number[];
+  /** @internal */
+  private _layer;
+  /** @internal */
+  private _feature;
+  /** @internal */
+  private _mapEl;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  /** @internal */
+  private _toCoords;
+  /** @internal */
+  private _hexToRgba;
+  /** @internal */
+  private _addLine;
+  protected updated(changed: PropertyValues): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-polyline": SigveloOlPolyline;
+  }
+}
+//#endregion
+export { SigveloOlPolyline };

package/dist/components/polyline/polyline.js

@@ -0,0 +1,2 @@
+import { t as SigveloOlPolyline } from "../../polyline-DXXHbwfm.js";
+export { SigveloOlPolyline };

package/dist/components/popup/popup.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from "lit";
+
+//#region src/components/popup/popup.d.ts
+/**
+ * Popup content for an OpenLayers marker. Nest inside a
+ * `<sigvelo-ol-marker>` to attach to a marker.
+ *
+ * Content is provided via the default slot (Light DOM) so Sigvelo design
+ * tokens and components render correctly.
+ *
+ * @tag sigvelo-ol-popup
+ * @slot - Popup content.
+ */
+declare class SigveloOlPopup extends LitElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** Maximum width of the popup in pixels. */
+  maxWidth: number;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-popup": SigveloOlPopup;
+  }
+}
+//#endregion
+export { SigveloOlPopup };

package/dist/components/popup/popup.js

@@ -0,0 +1,2 @@
+import { t as SigveloOlPopup } from "../../popup-CpiCysPO.js";
+export { SigveloOlPopup };

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

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+
+//#region src/components/scale-control/scale-control.d.ts
+/**
+ * A scale line control for an OpenLayers map. Must be a child of `<sigvelo-ol-map>`.
+ *
+ * @tag sigvelo-ol-scale-control
+ */
+declare class SigveloOlScaleControl extends LitElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** Unit system for the scale bar. */
+  units: "metric" | "imperial" | "nautical" | "us";
+  /** Minimum width of the scale bar in pixels. */
+  minWidth: number;
+  /** @internal */
+  private _control;
+  /** @internal */
+  private _mapEl;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  /** @internal */
+  private _addControl;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-scale-control": SigveloOlScaleControl;
+  }
+}
+//#endregion
+export { SigveloOlScaleControl };

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

@@ -0,0 +1,2 @@
+import { t as SigveloOlScaleControl } from "../../scale-control-zMLnp2Rt.js";
+export { SigveloOlScaleControl };

package/dist/components/tilelayer/tilelayer.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, PropertyValues } from "lit";
+
+//#region src/components/tilelayer/tilelayer.d.ts
+/**
+ * A tile layer for an OpenLayers map. Must be a child of `<sigvelo-ol-map>`.
+ * If no URL is provided, defaults to OpenStreetMap.
+ *
+ * @tag sigvelo-ol-tilelayer
+ */
+declare class SigveloOlTilelayer extends LitElement {
+  /** @internal */
+  static styles: import("lit").CSSResult[];
+  /** URL template for tiles. Leave empty for OpenStreetMap default. */
+  url: string;
+  /** Attribution text for this tile layer. */
+  attribution: string;
+  /** Opacity of the tile layer (0-1). */
+  opacity: number;
+  /** @internal */
+  private _layer;
+  /** @internal */
+  private _mapEl;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  /** @internal */
+  private _addLayer;
+  /** @internal */
+  private _removeLayer;
+  protected updated(changed: PropertyValues): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-ol-tilelayer": SigveloOlTilelayer;
+  }
+}
+//#endregion
+export { SigveloOlTilelayer };

package/dist/components/tilelayer/tilelayer.js

@@ -0,0 +1,2 @@
+import { t as SigveloOlTilelayer } from "../../tilelayer-BAC1OCHe.js";
+export { SigveloOlTilelayer };