@panoramax/web-viewer 5.0.0-develop-d7206514 → 5.0.0-develop-d26305dd

package/build/components/menus/LocationPrecisionDoc.js

@@ -0,0 +1,42 @@
+import { LitElement, html } from "lit";
+import { docPopup, faSvg, titles } from "../styles.js";
+import { fa } from "../../utils/widgets.js";
+import { faExternalLinkAlt, faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
+import { QUALITYSCORE_GPS_VALUES } from "../../utils/utils.js";
+
+/**
+ * Location Precision Doc displays a synthetic summary of how Location Precision filter and map theme works.
+ * @class Panoramax.components.menus.LocationPrecisionDoc
+ * @element pnx-location-precision-doc
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-location-precision-doc ._t=${viewer._t} />
+ * ```
+ */
+export default class LocationPrecisionDoc extends LitElement {
+	static styles = [ titles, faSvg, docPopup ];
+
+	render() {
+		return html`
+			<h4>${fa(faMapMarkerAlt)} ${this._t?.pnx.filter_gps_precision}</h4>
+			<p>${this._t?.pnx.filter_gps_precision_help_1}</p>
+			<p>${this._t?.pnx.filter_gps_precision_help_2}</p>
+			<pnx-grade-filter grade=""></pnx-grade-filter>
+			<p>${this._t?.pnx.filter_gps_precision_help_3
+				.replace("{p5}", QUALITYSCORE_GPS_VALUES[1])
+				.replace("{p1}", QUALITYSCORE_GPS_VALUES[7])
+				.replace(/\.01/g, "")
+			}</p>
+			<p>${this._t?.pnx.filter_gps_precision_help_4}</p>
+			<pnx-link-button
+				href="https://docs.panoramax.fr/pictures-metadata/quality_score/#gps-position-accuracy"
+				target="_blank"
+				kind="outline"
+				style="width: 100%"
+			>${fa(faExternalLinkAlt)} ${this._t?.pnx.popup_details_link}</pnx-link-button>
+		`;
+	}
+}
+
+customElements.define("pnx-location-precision-doc", LocationPrecisionDoc);

package/build/components/menus/MapBackground.js

@@ -0,0 +1,110 @@
+import { LitElement, css, html } from "lit";
+import { onceParentAvailable } from "../../utils/widgets.js";
+const BgStreets = new URL("../../img/bg_streets.jpg", import.meta.url).href;
+const BgAerial = new URL("../../img/bg_aerial.jpg", import.meta.url).href;
+
+/**
+ * Map Background menu allows user to select background.
+ * @class Panoramax.components.menus.MapBackground
+ * @element pnx-map-background
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-map-background size="sm" _parent=${viewer} />
+ * ```
+ */
+export default class MapBackground extends LitElement {
+	/** @private */
+	static styles = [ css`
+		:host {
+			justify-content: space-evenly;
+			box-sizing: border-box;
+			display: flex;
+			gap: 10px;
+		}
+		input { display: none; }
+		label { cursor: pointer; }
+
+		img {
+			width: 40px;
+			border-radius: 5px;
+			vertical-align: middle;
+			margin-right: 5px;
+			border: 2px solid var(--widget-bg);
+		}
+
+		img.sm {
+			width: 32px;
+		}
+
+		input:checked + label img {
+			outline: 3px solid var(--widget-border-btn);
+		}
+	` ];
+
+	/**
+     * Component properties.
+	 * @memberof Panoramax.components.menus.MapBackground#
+     * @type {Object}
+     * @property {string} [size=md] The size of the button (sm, md)
+     */
+	static properties = {
+		bg: {state: true},
+		size: {type: String},
+	};
+
+	constructor() {
+		super();
+		this.size = "md";
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		onceParentAvailable(this).then(() => {
+			this._parent.mapStyleComposer?.addEventListener("basemap-changed", e => {
+				this.bg = e.detail.basemap;
+			});
+			this.bg = this._parent.mapStyleComposer?.basemap;
+		});
+	}
+
+	/** @private */
+	_onBgSelect(e) {
+		this.bg = e.target.value;
+		this._parent?.mapStyleComposer?.switchBasemap(this.bg);
+	}
+
+	/** @private */
+	render() {
+		return html`
+			<input
+				type="radio"
+				id="bg-streets"
+				name="bg"
+				value="streets"
+				@change=${this._onBgSelect}
+				.checked=${this.bg === "streets"}
+			/>
+			<label for="bg-streets">
+				<img src=${BgStreets} class=${this.size} alt="" />
+				${this._parent?._t.pnx.map_background_streets}
+			</label>
+			<input
+				type="radio"
+				id="bg-aerial"
+				name="bg"
+				value="aerial"
+				@change=${this._onBgSelect}
+				.checked=${this.bg === "aerial"}
+			/>
+			<label for="bg-aerial">
+				<img src=${BgAerial} class=${this.size} alt="" />
+				${this._parent?._t.pnx.map_background_aerial}
+			</label>
+		`;
+	}
+}
+
+customElements.define("pnx-map-background", MapBackground);