@mcp-b/geo-openlayers 0.2.22 → 0.3.0

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

@@ -32,8 +32,6 @@ declare class SigveloOlCircle extends LitElement {
   connectedCallback(): Promise<void>;
   disconnectedCallback(): void;
   /** @internal */
-  private _hexToRgba;
-  /** @internal */
   private _addCircle;
   protected updated(changed: PropertyValues): void;
   render(): import("lit-html").TemplateResult<1>;

package/dist/components/circle/circle.js

@@ -1,2 +1,91 @@
-import { t as SigveloOlCircle } from "../../circle-BiLEqiGC.js";
+import { hexToRgba } from "../../hex-to-rgba.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { fromLonLat } from "ol/proj.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+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.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 = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-ol-map");
+		await this._mapEl?.whenMapReady(this, () => this._addCircle());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._layer && this._mapEl?.map) this._mapEl.map.removeLayer(this._layer);
+		this._layer = null;
+		this._feature = null;
+	}
+	/** @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: 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: 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 };

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

@@ -1,11 +1,13 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
+import { ControlPosition } from "@mcp-b/geo-support/types";
 
 //#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.
  *
+ * @slot - Control content, retained in the control’s light DOM.
+ *
  * @tag sigvelo-ol-control
  *
  * @example
@@ -22,12 +24,15 @@ declare class SigveloOlControl extends LitElement {
   static styles: import("lit").CSSResult[];
   /** Position of the control on the map. */
   position: ControlPosition;
+  private _stopPlacement;
   /** @internal */
   private _control;
   /** @internal */
   private _mapEl;
   connectedCallback(): Promise<void>;
   disconnectedCallback(): void;
+  private _removeControl;
+  protected updated(changed: PropertyValues): void;
   /** @internal */
   private _addControl;
   render(): import("lit-html").TemplateResult<1>;

package/dist/components/control/control.js

@@ -1,2 +1,66 @@
-import { t as SigveloOlControl } from "../../control-CTiiOtzM.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 Control from "ol/control/Control.js";
+import { placeControl } from "@mcp-b/geo-support/base/control-placement";
+import styles from "@mcp-b/geo-support/styles/control.styles";
+//#region src/components/control/control.ts
+const POSITION_CSS = {
+	"top-left": "top: 0.5em; left: 0.5em;",
+	"top-right": "top: 0.5em; right: 0.5em;",
+	"bottom-left": "bottom: 0.5em; left: 0.5em;",
+	"bottom-right": "bottom: 0.5em; right: 0.5em;"
+};
+let SigveloOlControl = class SigveloOlControl extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.position = "bottom-left";
+		this._stopPlacement = null;
+		this._control = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-ol-map");
+		await this._mapEl?.whenMapReady(this, () => {
+			if (!this._control) this._addControl();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeControl();
+	}
+	_removeControl() {
+		this._stopPlacement?.();
+		this._stopPlacement = null;
+		if (this._control && this._mapEl?.map) this._mapEl.map.removeControl(this._control);
+		this._control = null;
+	}
+	updated(changed) {
+		if (changed.has("position") && this._control) {
+			this._removeControl();
+			this._addControl();
+		}
+	}
+	/** @internal */
+	_addControl() {
+		if (!this._mapEl?.map) return;
+		const container = document.createElement("div");
+		container.className = "ol-control sigvelo-ol-custom-control";
+		container.style.cssText = `position: absolute; ${POSITION_CSS[this.position]} pointer-events: auto;`;
+		this._control = new Control({ element: container });
+		this._mapEl.map.addControl(this._control);
+		this._stopPlacement = placeControl(this, container, this._mapEl);
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property()], SigveloOlControl.prototype, "position", void 0);
+SigveloOlControl = __decorate([customElement("sigvelo-ol-control")], SigveloOlControl);
+//#endregion
 export { SigveloOlControl };

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

@@ -44,7 +44,12 @@ declare class SigveloOlGeojson extends LitElement {
   disconnectedCallback(): void;
   /** @internal */
   private _subscribeChannel;
-  /** @internal Convert an OL Feature to a GeoJsonFeature for the styleFunction. */
+  /**
+   * @internal Convert an OL feature to a GeoJsonFeature for the styleFunction.
+   *
+   * A style function is handed a `FeatureLike`, not a `Feature`: a vector tile source styles `RenderFeature`s, which
+   * carry properties and an id but are not full features. Both shapes answer everything read here.
+   */
   private _toGeoJsonFeature;
   /** @internal */
   private _addLayer;
@@ -52,8 +57,6 @@ declare class SigveloOlGeojson extends LitElement {
   private _removeLayer;
   /** @internal */
   private _bindClickHandler;
-  /** @internal */
-  private _hexToRgba;
   protected updated(changed: PropertyValues): void;
   render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/geojson/geojson.js

@@ -1,2 +1,180 @@
-import { t as SigveloOlGeojson } from "../../geojson-BU-tOeyz.js";
+import { hexToRgba } from "../../hex-to-rgba.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { SigveloFeatureClickEvent } from "@mcp-b/geo-support/events";
+import { toLonLat } from "ol/proj.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+import { subscribeClassify } from "@mcp-b/geo-support/classification";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import GeoJSON from "ol/format/GeoJSON.js";
+import { Circle, Fill, Stroke, Style } from "ol/style.js";
+//#region src/components/geojson/geojson.ts
+let SigveloOlGeojson = class SigveloOlGeojson extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		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._layer = null;
+		this._mapEl = null;
+		this._unsubscribeChannel = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._subscribeChannel();
+		this._mapEl = findMapElement(this, "sigvelo-ol-map");
+		await this._mapEl?.whenMapReady(this, () => {
+			this._addLayer();
+			this._bindClickHandler();
+		});
+	}
+	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 Convert an OL feature to a GeoJsonFeature for the styleFunction.
+	*
+	* A style function is handed a `FeatureLike`, not a `Feature`: a vector tile source styles `RenderFeature`s, which
+	* carry properties and an id but are not full features. Both shapes answer everything read here.
+	*/
+	_toGeoJsonFeature(olFeature) {
+		const { geometry: _g, ...rest } = olFeature.getProperties();
+		return {
+			type: "Feature",
+			geometry: {
+				type: olFeature.getGeometry()?.getType() ?? "Point",
+				coordinates: null
+			},
+			properties: rest,
+			id: olFeature.getId()
+		};
+	}
+	/** @internal */
+	_addLayer() {
+		if (!this._mapEl?.map || !this.data) return;
+		const source = new VectorSource({ features: new GeoJSON().readFeatures(this.data, { featureProjection: "EPSG:3857" }) });
+		const defaultStyle = new Style({
+			fill: new Fill({ color: hexToRgba(this.fillColor, this.fillOpacity) }),
+			stroke: new Stroke({
+				color: this.strokeColor,
+				width: this.strokeWidth
+			}),
+			image: new Circle({
+				radius: this.circleRadius,
+				fill: new Fill({ color: this.fillColor }),
+				stroke: new Stroke({
+					color: this.strokeColor,
+					width: this.strokeWidth
+				})
+			})
+		});
+		const styleFn = this.styleFunction;
+		const olStyleFn = styleFn ? (olFeature) => {
+			const s = styleFn(this._toGeoJsonFeature(olFeature));
+			if (!s) return defaultStyle;
+			return new Style({
+				fill: new Fill({ color: hexToRgba(s.fillColor ?? this.fillColor, s.fillOpacity ?? this.fillOpacity) }),
+				stroke: new Stroke({
+					color: s.strokeColor ?? this.strokeColor,
+					width: s.strokeWidth ?? this.strokeWidth
+				}),
+				image: new Circle({
+					radius: this.circleRadius,
+					fill: new Fill({ color: hexToRgba(s.fillColor ?? this.fillColor, s.fillOpacity ?? this.fillOpacity) }),
+					stroke: new Stroke({
+						color: s.strokeColor ?? this.strokeColor,
+						width: s.strokeWidth ?? this.strokeWidth
+					})
+				})
+			});
+		} : defaultStyle;
+		this._layer = new VectorLayer({
+			source,
+			style: olStyleFn
+		});
+		this._mapEl.map.addLayer(this._layer);
+	}
+	/** @internal */
+	_removeLayer() {
+		if (this._layer && this._mapEl?.map) this._mapEl.map.removeLayer(this._layer);
+		this._layer = null;
+	}
+	/** @internal */
+	_bindClickHandler() {
+		if (!this.interactive || !this._mapEl?.map) return;
+		this._mapEl.map.on("click", (e) => {
+			if (!this._mapEl?.map) return;
+			this._mapEl.map.forEachFeatureAtPixel(e.pixel, (feature) => {
+				const geom = feature.getGeometry();
+				if (!geom) return;
+				const [lng, lat] = toLonLat(e.coordinate);
+				const { geometry: _geom, ...rest } = feature.getProperties();
+				this.dispatchEvent(new SigveloFeatureClickEvent({
+					type: "Feature",
+					geometry: {
+						type: geom.getType(),
+						coordinates: null
+					},
+					properties: rest,
+					id: feature.getId()
+				}, {
+					lat,
+					lng
+				}));
+			}, { layerFilter: (l) => l === this._layer });
+		});
+	}
+	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._removeLayer();
+			this._addLayer();
+		}
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloOlGeojson.prototype, "data", void 0);
+__decorate([property({ attribute: false })], SigveloOlGeojson.prototype, "styleFunction", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloOlGeojson.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloOlGeojson.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloOlGeojson.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloOlGeojson.prototype, "strokeWidth", void 0);
+__decorate([property({
+	attribute: "circle-radius",
+	type: Number
+})], SigveloOlGeojson.prototype, "circleRadius", void 0);
+__decorate([property({ type: Boolean })], SigveloOlGeojson.prototype, "interactive", void 0);
+__decorate([property()], SigveloOlGeojson.prototype, "channel", void 0);
+SigveloOlGeojson = __decorate([customElement("sigvelo-ol-geojson")], SigveloOlGeojson);
+//#endregion
 export { SigveloOlGeojson };

package/dist/components/map/map.js

@@ -1,2 +1,134 @@
-import { t as SigveloOlMap } from "../../map-eGQh7n8O.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { unsafeCSS } from "lit";
+import { customElement } 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 OlMap from "ol/Map.js";
+import View from "ol/View.js";
+import { fromLonLat, toLonLat } from "ol/proj.js";
+import olCss from "ol/ol.css?raw";
+//#region src/components/map/map.ts
+let SigveloOlMap = class SigveloOlMap extends GeoMapElement {
+	constructor(..._args) {
+		super(..._args);
+		this._map = null;
+		this._view = null;
+	}
+	static {
+		this.styles = [...GeoMapElement.styles, unsafeCSS(olCss)];
+	}
+	/** Access the underlying OpenLayers map instance (after mapReady resolves). */
+	get map() {
+		return this._map;
+	}
+	/** Access the underlying OpenLayers view instance. */
+	get view() {
+		return this._view;
+	}
+	createMap(container) {
+		this._view = new View({
+			center: fromLonLat([this.longitude, this.latitude]),
+			zoom: this.zoom,
+			minZoom: this.minZoom,
+			maxZoom: this.maxZoom,
+			rotation: this.bearing * Math.PI / 180
+		});
+		this._map = new OlMap({
+			target: container,
+			view: this._view
+		});
+		this._map.on("click", (e) => {
+			if (!(e.originalEvent instanceof MouseEvent)) return;
+			const [lng, lat] = toLonLat(e.coordinate);
+			this.dispatchEvent(new SigveloMapClickEvent({
+				lat,
+				lng
+			}, e.originalEvent));
+		});
+		this._view.on("change:center", () => {
+			if (!this._view) return;
+			const center = this._view.getCenter();
+			if (!center) return;
+			const [lng, lat] = toLonLat(center);
+			this._suppressExternalUpdate = true;
+			this.latitude = lat;
+			this.longitude = lng;
+			this._suppressExternalUpdate = false;
+			this.dispatchEvent(new SigveloMapMoveEvent({
+				lat,
+				lng
+			}));
+		});
+		this._view.on("change:resolution", () => {
+			if (!this._view) return;
+			const zoom = this._view.getZoom() ?? this.zoom;
+			this._suppressExternalUpdate = true;
+			this.zoom = zoom;
+			this._suppressExternalUpdate = false;
+			this.dispatchEvent(new SigveloMapZoomEvent(zoom));
+		});
+		this._map.on("moveend", () => {
+			if (!this._view) return;
+			const center = this._view.getCenter();
+			if (!center) return;
+			const [lng, lat] = toLonLat(center);
+			const zoom = this._view.getZoom() ?? this.zoom;
+			this.dispatchEvent(new SigveloMapMoveEndEvent({
+				lat,
+				lng
+			}));
+			this.dispatchEvent(new SigveloMapZoomEndEvent(zoom));
+		});
+		this._map.once("rendercomplete", () => {
+			this._resolveMapReady();
+			this.dispatchEvent(new SigveloMapLoadEvent());
+		});
+	}
+	destroyMap() {
+		this._map?.dispose();
+		this._map = null;
+		this._view = null;
+	}
+	updateView(changed) {
+		if (!this._view) return;
+		if (changed.has("latitude") || changed.has("longitude")) this._view.setCenter(fromLonLat([this.longitude, this.latitude]));
+		if (changed.has("zoom")) this._view.setZoom(this.zoom);
+		if (changed.has("bearing")) this._view.setRotation(this.bearing * Math.PI / 180);
+		if (changed.has("minZoom")) this._view.setMinZoom(this.minZoom);
+		if (changed.has("maxZoom")) this._view.setMaxZoom(this.maxZoom);
+	}
+	invalidateSize() {
+		this._map?.updateSize();
+	}
+	flyTo(options) {
+		this._view?.animate({
+			center: fromLonLat([options.center.lng, options.center.lat]),
+			zoom: options.zoom,
+			rotation: options.bearing ? options.bearing * Math.PI / 180 : void 0,
+			duration: options.duration ?? 1e3
+		});
+	}
+	fitBounds(options) {
+		if (!this._view || !this._map) return;
+		const sw = fromLonLat([options.bounds.west, options.bounds.south]);
+		const ne = fromLonLat([options.bounds.east, options.bounds.north]);
+		this._view.fit([
+			sw[0],
+			sw[1],
+			ne[0],
+			ne[1]
+		], {
+			padding: options.padding ? [
+				options.padding,
+				options.padding,
+				options.padding,
+				options.padding
+			] : void 0,
+			maxZoom: options.maxZoom,
+			duration: options.duration ?? 1e3
+		});
+	}
+};
+SigveloOlMap = __decorate([customElement("sigvelo-ol-map")], SigveloOlMap);
+//#endregion
 export { SigveloOlMap };

package/dist/components/marker/marker.js

@@ -1,2 +1,97 @@
-import { t as SigveloOlMarker } from "../../marker-DEG_oTfJ.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { fromLonLat } from "ol/proj.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+import Overlay from "ol/Overlay.js";
+import { clonePopupContent } from "@mcp-b/geo-support/base/popup-content";
+//#region src/components/marker/marker.ts
+let SigveloOlMarker = class SigveloOlMarker extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.latitude = 0;
+		this.longitude = 0;
+		this.color = "#3fb1ce";
+		this.title = "";
+		this._overlay = null;
+		this._markerEl = null;
+		this._mapEl = null;
+		this._popupOverlay = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-ol-map");
+		await this._mapEl?.whenMapReady(this, () => this._addMarker());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._overlay && this._mapEl?.map) this._mapEl.map.removeOverlay(this._overlay);
+		this._overlay = null;
+		this._markerEl = null;
+	}
+	/** @internal */
+	_addMarker() {
+		if (!this._mapEl?.map) return;
+		this._markerEl = document.createElement("div");
+		if (this.title) this._markerEl.title = this.title;
+		this._markerEl.style.cursor = "pointer";
+		this._markerEl.innerHTML = `
+      <svg viewBox="0 0 27 43" xmlns="http://www.w3.org/2000/svg"
+           width="25" height="41"
+           style="filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));">
+        <path d="M13.5 0C6 0 0 6 0 13.5C0 25 13.5 43 13.5 43S27 25 27 13.5C27 6 21 0 13.5 0Z"
+              fill="${this.color}" stroke="white" stroke-width="1.5"/>
+        <circle cx="13.5" cy="13.5" r="5" fill="white"/>
+      </svg>
+    `;
+		const popupEl = this.querySelector("sigvelo-ol-popup");
+		if (popupEl) {
+			this._markerEl.style.cursor = "pointer";
+			this._markerEl.addEventListener("click", () => {
+				this._showPopup(popupEl);
+			});
+		}
+		this._overlay = new Overlay({
+			position: fromLonLat([this.longitude, this.latitude]),
+			positioning: "bottom-center",
+			element: this._markerEl,
+			stopEvent: false
+		});
+		this._mapEl.map.addOverlay(this._overlay);
+	}
+	/** @internal */
+	_showPopup(popupEl) {
+		if (!this._mapEl?.map) return;
+		if (this._popupOverlay) this._mapEl.map.removeOverlay(this._popupOverlay);
+		const content = clonePopupContent(popupEl);
+		content.style.background = "white";
+		content.style.padding = "8px 12px";
+		content.style.borderRadius = "4px";
+		content.style.boxShadow = "0 2px 8px rgba(0,0,0,0.2)";
+		content.style.transform = "translate(-50%, -8px)";
+		this._popupOverlay = new Overlay({
+			position: fromLonLat([this.longitude, this.latitude]),
+			positioning: "bottom-center",
+			element: content,
+			offset: [0, -45]
+		});
+		this._mapEl.map.addOverlay(this._popupOverlay);
+	}
+	updated() {
+		if (this._overlay) this._overlay.setPosition(fromLonLat([this.longitude, this.latitude]));
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({ type: Number })], SigveloOlMarker.prototype, "latitude", void 0);
+__decorate([property({ type: Number })], SigveloOlMarker.prototype, "longitude", void 0);
+__decorate([property()], SigveloOlMarker.prototype, "color", void 0);
+__decorate([property()], SigveloOlMarker.prototype, "title", void 0);
+SigveloOlMarker = __decorate([customElement("sigvelo-ol-marker")], SigveloOlMarker);
+//#endregion
 export { SigveloOlMarker };