@panoramax/web-viewer 4.0.3 → 4.1.0-develop-55fdf56c

package/src/components/menus/PictureLegend.js

@@ -1,6 +1,7 @@
-import { LitElement, html, nothing, css } from "lit";
+import { LitElement, nothing, css } from "lit";
+import { html, unsafeStatic } from "lit/static-html.js";
 import { classMap } from "lit/directives/class-map.js";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
@@ -10,6 +11,7 @@ import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTrian
 import { faShareNodes } from "@fortawesome/free-solid-svg-icons/faShareNodes";
 import { placeholder, panel, hidden } from "../styles";
 import { reverseGeocodingNominatim } from "../../utils/geocoder";
+import { PanoramaxMetaCatalogURL } from "../../utils/services";
 
 /**
  * Picture legend shows info about picture author, capture date, address, and access to metadata popup.
@@ -26,16 +28,17 @@ export default class PictureLegend extends LitElement {
 	/** @private */
 	static styles = [placeholder, panel, hidden, css`
 		:host {
-			overflow-y: auto;
-			overflow-x: hidden;
-			display: block;
+			display: flex;
+			flex-direction: column;
 			margin: 0;
 			font-family: var(--font-family);
+			flex-wrap: nowrap;
 		}
 
 		@media screen and (min-width: 576px) {
-			:host { max-height: 70vh; }
-			pnx-picture-metadata { width: 30vw; }
+			:host {
+				max-height: 70vh;
+			}
 		}
 
 		/* Top bar */
@@ -45,6 +48,12 @@ export default class PictureLegend extends LitElement {
 			align-items: center;
 			margin: 10px 10px 5px 10px;
 			justify-content: space-between;
+			flex: 1;
+		}
+
+		.headline-buttons {
+			display: flex;
+			gap: 5px;
 		}
 
 		/* Address line */
@@ -54,6 +63,9 @@ export default class PictureLegend extends LitElement {
 			margin-bottom: 2px;
 			flex-grow: 5;
 			font-weight: 800;
+			text-overflow: ellipsis;
+			overflow: hidden;
+  			white-space: nowrap;
 		}
 
 		#pic-legend-addr span {
@@ -84,6 +96,7 @@ export default class PictureLegend extends LitElement {
 			display: block;
 			margin-top: 5px;
 			max-width: 100%;
+			flex: 1;
 		}
 		#pic-legend-expand::part(btn) {
 			border-radius: 10px;
@@ -93,10 +106,11 @@ export default class PictureLegend extends LitElement {
 
 		/* Details block */
 		pnx-picture-metadata {
-			margin: 5px 10px 10px;
+			margin: 5px 10px;
 			display: block;
-			max-width: 450px;
 			box-sizing: border-box;
+			flex: 1;
+			overflow-y: auto;
 		}
 
 		/* Details actions */
@@ -107,6 +121,7 @@ export default class PictureLegend extends LitElement {
 			border-bottom-right-radius: 10px;
 			gap: 5px;
 			flex-wrap: wrap;
+			flex: 1;
 		}
 
 		/* More options menu */
@@ -114,10 +129,22 @@ export default class PictureLegend extends LitElement {
 
 		/* Editors */
 		#pic-legend-editors { margin: 0 10px; }
+
+		/* Light version */
+		.pnx-picture-legend-light {
+			width: max-content;
+			font-size: 10px;
+		}
 	`];
 
-	/** @private */
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.PictureLegend#
+	 * @type {Object}
+	 * @property {boolean} [light=false] Lighter version (for iframes)
+	 */
 	static properties = {
+		light: {type: Boolean},
 		_caption: { state: true },
 		_addr: { state: true },
 		_expanded: { state: true },
@@ -129,6 +156,7 @@ export default class PictureLegend extends LitElement {
 		super();
 		this._expanded = true;
 		this.collapsable = false;
+		this.light = false;
 	}
 
 	/** @private */
@@ -138,18 +166,20 @@ export default class PictureLegend extends LitElement {
 		this._expanded = !this.collapsable;
 		this._prevSearches = {};
 
-		this._parent.onceReady().then(() => {
-			this._onPicChange(this._parent.psv.getPictureMetadata());
-			this._parent.psv.addEventListener("picture-loaded", () => {
+		onceParentAvailable(this)
+			.then(() => this._parent.onceReady())
+			.then(() => {
 				this._onPicChange(this._parent.psv.getPictureMetadata());
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+				this._parent.psv.addEventListener("sequence-stopped", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+				this._parent.psv.addEventListener("annotation-click", () => {
+					this._expanded = true;
+				});
 			});
-			this._parent.psv.addEventListener("sequence-stopped", () => {
-				this._onPicChange(this._parent.psv.getPictureMetadata());
-			});
-			this._parent.psv.addEventListener("annotation-click", () => {
-				this._expanded = true;
-			});
-		});
 	}
 
 	/** @private */
@@ -196,6 +226,22 @@ export default class PictureLegend extends LitElement {
 		const hiddenExpanded = classMap({"pnx-hidden": this._expanded});
 		const shownExpanded = classMap({"pnx-hidden": !this._expanded});
 
+		if(this.light) {
+			return html`<div class="pnx-picture-legend-light">
+				${this._caption.producer?.length > 0 ? html`
+					<a
+						href=${PanoramaxMetaCatalogURL()+"/?pic="+this._parent.psv.getPictureMetadata().id}
+						target="_blank"
+						title=${this._parent?._t.pnx.share_page}
+					>${this._caption.producer[this._caption.producer.length-1]}</a>
+				</div>` : nothing}
+
+				${this._caption.producer?.length > 0 && this._caption?.license ? "|" : ""}
+
+				${this._caption?.license ? html`${unsafeStatic(this._caption.license)}` : nothing}
+			`;
+		}
+
 		return html`
 			<div class="headline">
 				${this._parent._setFocus ? html`
@@ -207,15 +253,26 @@ export default class PictureLegend extends LitElement {
 					</pnx-button>
 				` : nothing}
 
-				<div id="pic-legend-addr">
+				<div id="pic-legend-addr" title=${this._addr || ""}>
 					${this._addr?.length > 0 ? this._addr : html`<span class="pnx-placeholder-loading">&nbsp;</span>`}
 				</div>
 
-				<pnx-picture-legend-actions
-					@click=${e => e.stopPropagation()}
-					._parent=${this._parent}
-					?full=${this._expanded}
-				></pnx-picture-legend-actions>
+				<div class="headline-buttons">
+					<pnx-button
+						size="sm"
+						class=${hiddenExpanded}
+						title=${this._parent?._t.pnx.share}
+						@click=${() => this._parent._showShareOptions()}
+					>
+						${fa(faShareNodes)}
+					</pnx-button>
+
+					<pnx-picture-legend-actions
+						@click=${e => e.stopPropagation()}
+						._parent=${this._parent}
+						?full=${this._expanded}
+					></pnx-picture-legend-actions>
+				</div>
 			</div>
 
 			<div id="pic-legend-info" class=${hiddenExpanded}>
@@ -226,21 +283,20 @@ export default class PictureLegend extends LitElement {
 
 				${this._caption.date ? html`<div class="info-block">
 					${fa(faCalendarAlt)}
-					${this._caption.date.toLocaleDateString(this._parent?.lang || window.navigator.language, { year: "numeric", month: "long" })}
-				</div>` : nothing}
+					${this._caption.date.toLocaleDateString(this._parent?.lang || window.navigator.language, { year: "numeric", month: "long", day: "numeric" })}				</div>` : nothing}
 			</div>
 
 			<div id="pic-legend-cta" class=${shownExpanded}>
+				<pnx-button size="sm" @click=${() => this._parent._showShareOptions()}>
+					${fa(faShareNodes)} ${this._parent?._t.pnx.share}
+				</pnx-button>
+
 				${this._parent.api._endpoints.report ? html`
-						<pnx-button size="sm" @click=${() => this._parent._showReportForm()}>
+						<pnx-button kind="fullwarn" size="sm" @click=${() => this._parent._showReportForm()}>
 							${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}
 						</pnx-button>
 				` : nothing}
 
-				<pnx-button size="sm" @click=${() => this._parent._showShareOptions()}>
-					${fa(faShareNodes)} ${this._parent?._t.pnx.share}
-				</pnx-button>
-
 				<slot name="editors">
 					<pnx-widget-osmeditors ._parent=${this._parent} />
 				</slot>

package/src/components/menus/PictureMetadata.js

@@ -1,6 +1,6 @@
 import { LitElement, nothing, css } from "lit";
 import { html, unsafeStatic } from "lit/static-html.js";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
 import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
 import { faCamera } from "@fortawesome/free-solid-svg-icons/faCamera";
@@ -14,7 +14,8 @@ import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
 import { faSvg, titles, textarea, hidden } from "../styles";
 import { createWebComp } from "../../utils/widgets";
-import { getGPSPrecision } from "../../utils/picture";
+import { getGPSPrecision, getHashTags } from "../../utils/picture";
+import { PanoramaxMetaCatalogURL } from "../../utils/services";
 import {
 	getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES,
 	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES
@@ -81,14 +82,16 @@ export default class PictureMetadata extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._meta = this._parent?.psv?.getPictureMetadata();
-		this._parent?.oncePSVReady?.().then(() => {
-			this._parent.psv.addEventListener("picture-loaded", () => {
-				this._meta = this._parent.psv.getPictureMetadata();
-			});
-			this._parent.psv.addEventListener("annotation-click", () => {
-				const tabs = this.shadowRoot.querySelector("pnx-tabs");
-				if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+		onceParentAvailable(this).then(() => {
+			this._meta = this._parent?.psv?.getPictureMetadata();
+			this._parent?.oncePSVReady?.().then(() => {
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._meta = this._parent.psv.getPictureMetadata();
+				});
+				this._parent.psv.addEventListener("annotation-click", () => {
+					const tabs = this.shadowRoot.querySelector("pnx-tabs");
+					if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+				});
 			});
 		});
 	}
@@ -101,6 +104,14 @@ export default class PictureMetadata extends LitElement {
 		}
 	}
 
+	/** @private */
+	_onCaptureDateClick() {
+		const qsTab = this.shadowRoot.querySelector("pnx-tabs");
+		if(qsTab) {
+			qsTab.setAttribute("activeTabIndex", 1);
+		}
+	}
+
 	/** @private */
 	_toTab(title, data) {
 		return html`
@@ -108,7 +119,7 @@ export default class PictureMetadata extends LitElement {
 			<div slot="content" class="data-blocks">
 				${data.filter(b => b).map(b => html`<div class="data-block" style=${b.style}>
 					<h5>${b.title}</h5>
-					<div style=${b.content_style}>${b.content}</div>
+					<div style=${b.content_style} @click=${b.click}>${b.content}</div>
 				</div>`)}
 			</div>
 		`;
@@ -234,6 +245,16 @@ export default class PictureMetadata extends LitElement {
 		);
 		let semanticsData = [];
 		if(hasSemantics) {
+			// Hashtags
+			const hashtags = getHashTags(this._meta);
+			if(hashtags.length > 0) {
+				semanticsData.push({
+					title: this._parent?._t.pnx.semantics_hashtags,
+					style: "width: 100%",
+					content: hashtags.join(" ")
+				});
+			}
+			
 			// Full list of picture tags
 			semanticsData.push({
 				title: this._parent?._t.pnx.semantics_tags_picture,
@@ -284,7 +305,7 @@ export default class PictureMetadata extends LitElement {
 				}
 				return {
 					title: key,
-					content: value.length > 30 ? html`<textarea readonly>${value}</textarea>`: value,
+					content: value.length > 30 ? html`<textarea readonly .value=${value}></textarea>`: value,
 					style: value.length > 30 ? "width: 100%" : undefined
 				};
 			});
@@ -313,9 +334,11 @@ export default class PictureMetadata extends LitElement {
 			// Capture date
 			this._meta?.caption?.date && {
 				title: this._parent?._t.pnx.metadata_general_date,
+				click: this._onCaptureDateClick,
+				content_style: "cursor: pointer",
 				content: html`
 					<strong>${new Intl.DateTimeFormat(lang, {timeZone: this._meta.caption.tz, dateStyle: "long"}).format(this._meta.caption.date)}</strong>
-					<br />${new Intl.DateTimeFormat(lang, {timeZone: this._meta.caption.tz, hour: "numeric",minute:"numeric"}).format(this._meta.caption.date)}
+					<br />${new Intl.DateTimeFormat(lang, {timeZone: this._meta.caption.tz, hour: "numeric",minute:"numeric", second: "numeric"}).format(this._meta.caption.date)}
 				`
 			},
 			// Camera
@@ -334,10 +357,10 @@ export default class PictureMetadata extends LitElement {
 			// Quality score
 			hasQualityScore && {
 				title: this._parent?._t.pnx.metadata_quality,
+				click: this._onQualityScoreClick,
 				content: html`<pnx-quality-score
 					grade=${generalGrade}
 					style="font-size: 14px; cursor: pointer"
-					@click=${this._onQualityScoreClick}
 				/>`
 			},
 			// Copy ID
@@ -367,9 +390,18 @@ export default class PictureMetadata extends LitElement {
 			},
 			this._meta?.origInstance && {
 				title: this._parent?._t.pnx.metadata_general_instance,
-				content: html`<strong><a href=${this._meta.origInstance.href+window.location.search} target="_blank">
-					${this._meta.origInstance.instance_name || this._meta.origInstance.href.replace(/^http.?:\/\//, "")}
-				</a></strong>`
+				content: html`<strong>
+					<a href=${this._meta.origInstance.href+window.location.search} target="_blank" style="text-decoration: none">
+						<img
+							src=${PanoramaxMetaCatalogURL()+"/api/instances/"+this._meta.origInstance.instance_name+"/logo"}
+							style="height: 30px; max-width: 150px; vertical-align: middle"
+							alt=""
+						/>
+						<span style="text-decoration: underline">
+							${this._meta.origInstance.instance_name || this._meta.origInstance.href.replace(/^http.?:\/\//, "")}
+						</span>
+					</a>
+				</strong>`
 			}
 		];
 

package/src/components/menus/PlayerOptions.js

@@ -4,7 +4,7 @@ import { faRocket } from "@fortawesome/free-solid-svg-icons/faRocket";
 import { faLightbulb } from "@fortawesome/free-solid-svg-icons/faLightbulb";
 import { faPersonBiking } from "@fortawesome/free-solid-svg-icons/faPersonBiking";
 import { PIC_MAX_STAY_DURATION } from "../ui/Photo";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 
 /**
  * Player Options menu displays player speed and contrast settings.
@@ -40,9 +40,9 @@ export default class PlayerOptions extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.psv?.addEventListener("transition-duration-changed", e => {
+		onceParentAvailable(this).then(() => this._parent?.psv?.addEventListener("transition-duration-changed", e => {
 			this.renderRoot.querySelector("#pnx-player-speed").value = PIC_MAX_STAY_DURATION - e.detail.value;
-		});
+		}));
 	}
 
 	/** @private */

package/src/components/menus/Share.js

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from "lit";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faSvg, textarea, titles, input } from "../styles";
 import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
@@ -47,7 +47,7 @@ export default class ShareMenu extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._onUrlChange();
 			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
 		});
@@ -85,7 +85,7 @@ export default class ShareMenu extends LitElement {
 						>
 							${fa(faCircleInfo)} ${this._parent?._t.pnx.share_embed_docs}
 						</pnx-link-button>
-						<textarea readonly>${iframe}</textarea>
+						<textarea readonly .value=${iframe}></textarea>
 						<pnx-copy-button
 							._t=${this._parent?._t}
 							text=${iframe}

package/src/components/menus/index.js

@@ -4,13 +4,14 @@
  */
 
 export {default as AnnotationsList} from "./AnnotationsList";
+export {default as MapBackground} from "./MapBackground";
 export {default as MapFilters} from "./MapFilters";
 export {default as MapLayers} from "./MapLayers";
-export {default as MapBackground} from "./MapBackground";
+export {default as MapLegend} from "./MapLegend";
+export {default as MiniPictureLegend} from "./MiniPictureLegend";
+export {default as PictureLegend} from "./PictureLegend";
+export {default as PictureMetadata} from "./PictureMetadata";
 export {default as PlayerOptions} from "./PlayerOptions";
 export {default as QualityScoreDoc} from "./QualityScoreDoc";
 export {default as ReportForm} from "./ReportForm";
 export {default as Share} from "./Share";
-export {default as PictureLegend} from "./PictureLegend";
-export {default as MapLegend} from "./MapLegend";
-export {default as PictureMetadata} from "./PictureMetadata";

package/src/components/styles.js

@@ -212,6 +212,17 @@ export const btn = css`
 		background-color: var(--widget-bg-primary-hover);
 	}
 
+	/* Fully-filled warning style */
+	.pnx-btn-fullwarn {
+		background-color: var(--widget-bg-warn);
+		color: var(--widget-font-warn);
+		border: none;
+	}
+
+	.pnx-btn-fullwarn:not(:disabled):hover {
+		background-color: var(--widget-bg-warn);
+	}
+
 	/* Outline style */
 	.pnx-btn-outline {
 		border: 1px solid var(--widget-border-btn);

package/src/components/ui/AnnotationsSwitch.js

@@ -0,0 +1,171 @@
+import { LitElement, html, css, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets";
+import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
+import { hasAnnotations } from "../../utils/picture";
+import { classMap } from "lit/directives/class-map.js";
+import { panel } from "../styles";
+
+const DISABLE_ANNOTATIONS_PARAM = "pnx-disable-annotations";
+
+/**
+ * AnnotationsSwitch component allows to switch on/off pictures annotations.
+ * @class Panoramax.components.ui.AnnotationsSwitch
+ * @element pnx-annotations-switch
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-annotations-switch ._parent=${viewer} />
+ * ```
+ */
+export default class AnnotationsSwitch extends LitElement {
+	/** @private */
+	static styles = [ panel, css`
+		.pnx-panel {
+			padding: 5px;
+			margin-top: 5px;
+			width: max-content;
+  			min-width: unset;
+		}
+
+		/* Custom button look */
+		pnx-button::part(btn) {
+			border-radius: 8px;
+			height: 26px;
+			width: 26px;
+		}
+
+		pnx-button[size="xl"]::part(btn) {
+			border-radius: 8px;
+			height: 38px;
+			width: 38px;
+		}
+
+		pnx-button[active]::part(btn),
+		pnx-button[active]:hover::part(btn) {
+			background-color: var(--widget-bg-active) !important;
+			border-color: var(--widget-bg-active) !important;
+			color: var(--widget-font-active) !important;
+		}
+
+		/* No-annotations badge */
+		.pnx-annotations-switch-empty {
+			position: absolute;
+			top: 1px;
+			right: 1px;
+			color: var(--orange);
+			height: 8px;
+		}
+
+		pnx-button[size="xl"] .pnx-annotations-switch-empty {
+			top: 2px;
+			right: 2px;
+			height: 12px;
+		}
+
+		pnx-button[active] .pnx-annotations-switch-empty {
+			color: var(--yellow);
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.AnnotationsSwitch#
+	 * @type {Object}
+	 * @property {string} [size=xl] Button size (md, xl)
+	 */
+	/** @private */
+	static properties = {
+		size: {type: String},
+		_annotationsToggled: {state: true},
+		_warnNoAnnot: {state: true},
+		_warnNoAnnotTooltip: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._annotationsToggled = false;
+		this._warnNoAnnot = false;
+		this._warnNoAnnotTooltip = false;
+		this.size = "xl";
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		// Check if annotations have been explicitly disabled
+		const annotsDisabled = localStorage.getItem(DISABLE_ANNOTATIONS_PARAM) === "true";
+
+		onceParentAvailable(this).then(() => {
+			this._parent.onceReady().then(() => {
+				this._parent.psv.addEventListener("annotations-toggled", e => {
+					this._annotationsToggled = e.detail.visible;
+					this._persistAnnotationsLocalStorage(this._annotationsToggled);
+				});
+
+				this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
+				});
+			});
+
+			this._parent.onceFirstPicLoaded().then(() => {
+				this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
+
+				if(!this._annotationsToggled && !annotsDisabled) {
+					this._parent.psv.toggleAllAnnotations(true);
+					this._annotationsToggled = true;
+				}
+				this._persistAnnotationsLocalStorage(this._annotationsToggled);
+			});
+		});
+	}
+
+	/** @private */
+	_persistAnnotationsLocalStorage(isAnnotToggled) {
+		localStorage.setItem(DISABLE_ANNOTATIONS_PARAM, isAnnotToggled ? "false": "true");
+	}
+
+	/** @private */
+	_onClick() {
+		if(!this._annotationsToggled && this._warnNoAnnot) {
+			this._warnNoAnnotTooltip = true;
+			setTimeout(() => this._warnNoAnnotTooltip = false, 2000);
+		}
+		this._persistAnnotationsLocalStorage(!this._annotationsToggled);
+		this._parent.psv.toggleAllAnnotations(!this._annotationsToggled);
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		const panelClasses = {
+			"pnx-panel": true,
+			"pnx-hidden": !this._warnNoAnnotTooltip,
+		};
+
+		return html`
+			<pnx-button
+				kind="superflat"
+				size=${this.size}
+				style="vertical-align: middle"
+				class="pnx-print-hidden"
+				title=${this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations}
+				active=${this._annotationsToggled ? "" : nothing}
+				@click=${this._onClick}
+			>
+				${fa(faTags, { styles: { "height": "20px" }})}
+				${this._warnNoAnnot ? fa(faTriangleExclamation, { classes: "pnx-annotations-switch-empty" }) : nothing}
+			</pnx-button>
+			<div
+				class=${classMap(panelClasses)}
+				@click=${() => this._warnNoAnnotTooltip = false}
+			>
+				${this._parent._t?.pnx.semantics_zero_annotations}
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-annotations-switch", AnnotationsSwitch);

package/src/components/ui/Button.js

@@ -23,7 +23,7 @@ export default class Button extends LitElement {
 	 * @memberof Panoramax.components.ui.Button#
 	 * @type {Object}
 	 * @property {boolean} [active=false] Whether the button is in an active state.
-	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat, inline, superinline)
+	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 * @property {boolean} [disabled=false] Whether the button is disabled.
 	 * @property {string} [type] The button type (e.g., 'submit').

package/src/components/ui/CopyButton.js

@@ -38,7 +38,7 @@ export default class CopyButton extends LitElement {
      * @type {Object}
      * @property {string} [text] Text to copy in clipboard on click (use either this parameter or input, not both)
 	 * @property {input} [input] ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both)
-	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat, inline, superinline)
+	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 * @property {boolean} [unstyled=false] Disable all styling (for list group integration)
 	 * @property {string} [title] Tooltip text displayed when hovering over the button

package/src/components/ui/LinkButton.js

@@ -31,7 +31,7 @@ export default class LinkButton extends LitElement {
 	 * @property {string} [title] Tooltip text displayed when hovering over the button
 	 * @property {string} [download] Indicates if the linked resource should be downloaded
 	 * @property {string} [class] Custom CSS class for additional styling
-	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat)
+	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 */
 	static properties = {

package/src/components/ui/Map.css

@@ -1,3 +1,7 @@
+.maplibregl-map.pnx-map {
+	background: white;
+}
+
 /* Picture thumbnail on map */
 .maplibregl-popup-content {
 	padding: 5px !important;