@panoramax/web-viewer 3.2.3-develop-e277ccb9 → 3.2.3-develop-dbce84df

package/src/components/core/Viewer.js

@@ -1,11 +1,9 @@
 /* eslint-disable no-unused-vars */
 
 import "./Viewer.css";
-import { SYSTEM as PSSystem, DEFAULTS as PSDefaults } from "@photo-sphere-viewer/core";
-import URLHandler from "../../utils/URLHandler";
 import { linkMapAndPhoto, saveMapParamsToLocalStorage, getMapParamsFromLocalStorage } from "../../utils/map";
+import PhotoViewer from "./PhotoViewer";
 import Basic from "./Basic";
-import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../ui/Photo";
 import MapMore from "../ui/MapMore";
 import { initMapKeyboardHandler } from "../../utils/map";
 import { isNullId } from "../../utils/utils";
@@ -14,7 +12,7 @@ import { fa } from "../../utils/widgets";
 import { faPanorama } from "@fortawesome/free-solid-svg-icons/faPanorama";
 import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
 import { querySelectorDeep } from "query-selector-shadow-dom";
-import { default as InitParameters, alterPSVState, alterMapState, alterViewerState } from "../../utils/InitParameters";
+import { default as InitParameters, alterMapState, alterViewerState } from "../../utils/InitParameters";
 
 
 export const PSV_ZOOM_DELTA = 20;
@@ -26,15 +24,17 @@ const MAP_MOVE_DELTA = 100;
  * Viewer is the main component of Panoramax JS library, showing pictures and map.
  * 
  * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
+ * 
+ * If you need a viewer without map, checkout [Photo Viewer component](#Panoramax.components.core.PhotoViewer).
  * @class Panoramax.components.core.Viewer
  * @element pnx-viewer
- * @extends Panoramax.components.core.Basic
+ * @extends Panoramax.components.core.PhotoViewer
  * @property {Panoramax.components.ui.Loader} loader The loader screen
  * @property {Panoramax.utils.API} api The API manager
- * @property {Panoramax.components.ui.MapMore} [map] The MapLibre GL map itself (if map is enabled)
+ * @property {Panoramax.components.ui.MapMore} map The MapLibre GL map itself
  * @property {Panoramax.components.ui.Photo} psv The Photo Sphere Viewer component itself
  * @property {Panoramax.components.layout.CorneredGrid} grid The grid layout manager
- * @property {Panoramax.components.layout.Mini} [mini] The reduced/collapsed map/photo component (if map is enabled)
+ * @property {Panoramax.components.layout.Mini} mini The reduced/collapsed map/photo component
  * @property {Panoramax.components.ui.Popup} popup The popup container
  * @property {Panoramax.utils.URLHandler} urlHandler The URL query parameters manager
  * @fires Panoramax.components.core.Basic#select
@@ -65,7 +65,6 @@ const MAP_MOVE_DELTA = 100;
  * <pnx-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
  *   widgets="false"
- *   map="false"
  * >
  *   <p slot="top-right">My custom text</p>
  * </pnx-viewer>
@@ -77,14 +76,14 @@ const MAP_MOVE_DELTA = 100;
  * />
  * ```
  */
-export default class Viewer extends Basic {
+export default class Viewer extends PhotoViewer {
 	/**
 	 * Component properties. All of [Basic properties](#Panoramax.components.core.Basic+properties) are available as well.
 	 * @memberof Panoramax.components.core.Viewer#
-	 * @mixes Panoramax.components.core.Basic#properties
+	 * @mixes Panoramax.components.core.PhotoViewer#properties
 	 * @type {Object}
 	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
-	 * @property {boolean|object} [map=true] Should map be used (true/false), or an object with [any map option available in Map or MapMore class](#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"`
+	 * @property {object} [map] An object with [any map option available in Map or MapMore class](#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"`
 	 * @property {object} [psv] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"`
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
 	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
@@ -99,12 +98,9 @@ export default class Viewer extends Basic {
 	 */
 	static properties = {
 		map: {type: Object},
-		psv: {type: Object},
-		"url-parameters": {type: String},
 		focus: {type: String, reflect: true},
 		geocoder: {type: String},
-		widgets: {type: String},
-		...Basic.properties
+		...PhotoViewer.properties
 	};
 
 	constructor() {
@@ -112,16 +108,9 @@ export default class Viewer extends Basic {
 
 		// Defaults
 		this.map = true;
-		this.psv = {};
-		this["url-parameters"] = this.getAttribute("url-parameters") || true;
 		this.geocoder = this.getAttribute("geocoder") || "nominatim";
-		this.widgets = this.getAttribute("widgets") || "true";
-
-		// Set variables
-		this._prevSequence = null;
 
 		// Init DOM containers
-		this.grid = createWebComp("pnx-cornered-grid");
 		this.mini = createWebComp("pnx-mini", {
 			slot: "bottom-left",
 			_parent: this,
@@ -130,80 +119,71 @@ export default class Viewer extends Basic {
 		});
 		this.mini.addEventListener("expand", this._toggleFocus.bind(this));
 		this.grid.appendChild(this.mini);
-		this.psvContainer = document.createElement("div");
 		this.mapContainer = document.createElement("div");
-		this.popup = createWebComp("pnx-popup", {_parent: this, onclose: this._onPopupClose.bind(this)});
+	}
+
+	/** @private */
+	_createInitParamsHandler() {
+		this._initParams = new InitParameters(
+			InitParameters.GetComponentProperties(Viewer, this),
+			Object.assign({}, this.urlHandler?.currentURLParams(), this.urlHandler?.currentURLParams(true)),
+			{ map: getMapParamsFromLocalStorage() },
+		);
+	}
 
-		if(this["url-parameters"] && this["url-parameters"] !== "false") {
-			this.urlHandler = new URLHandler(this);
-			this.onceReady().then(() => {
-				this.urlHandler.listenToChanges();
-				this.urlHandler._onParentChange();
+	/** @private */
+	_initWidgets() {
+		if(this._initParams.getParentInit().widgets !== "false") {
+			this.grid.appendChild(createWebComp("pnx-widget-zoom", {
+				slot: this.isWidthSmall() ? "top-left" : "bottom-right",
+				class: this.isWidthSmall() ? "pnx-only-map pnx-print-hidden" : "pnx-print-hidden",
+				_parent: this
+			}));
+			this.grid.appendChild(createWebComp("pnx-widget-share", {slot: "bottom-right", class: "pnx-print-hidden", _parent: this}));
+			
+			this.legend = createWebComp("pnx-widget-legend", {
+				slot: this.isWidthSmall() ? "top" : "top-left",
+				_parent: this,
+				focus: this._initParams.getParentPostInit().focus,
+				picture: this._initParams.getParentPostInit().picture,
 			});
+			this.grid.appendChild(this.legend);
+			this.grid.appendChild(createWebComp("pnx-widget-player", {slot: "top", _parent: this, class: "pnx-only-psv pnx-print-hidden"}));
+
+			this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
+				slot: this.isWidthSmall() ? "top-right" : "top-left",
+				_parent: this,
+				class: "pnx-only-map pnx-print-hidden",
+				geocoder: this._initParams.getParentPostInit().geocoder,
+			}));
+			this.grid.appendChild(createWebComp("pnx-widget-mapfilters", {
+				slot: this.isWidthSmall() ? "top-right" : "top-left",
+				_parent: this,
+				"user-search": this.api._endpoints.user_search !== null && this.api._endpoints.user_tiles !== null,
+				"quality-score": this.map?._hasQualityScore?.() || false,
+				class: "pnx-only-map pnx-print-hidden",
+			}));
+			this.grid.appendChild(createWebComp("pnx-widget-maplayers", { slot: "top-right", _parent: this, class: "pnx-only-map pnx-print-hidden" }));
 		}
 	}
 
 	/** @private */
 	connectedCallback() {
-		super.connectedCallback();
+		Basic.prototype.connectedCallback.call(this);
 		this._moveChildToGrid();
 
 		this.onceAPIReady().then(async () => {
 			this.loader.setAttribute("value", 30);
-			this._initParams = new InitParameters(
-				InitParameters.GetComponentProperties(Viewer, this),
-				Object.assign({}, this.urlHandler?.currentURLParams(), this.urlHandler?.currentURLParams(true)),
-				{ map: getMapParamsFromLocalStorage() },
-			);
+			this._createInitParamsHandler();
 
-			const myInitParams = this._initParams.getParentInit();
 			const myPostInitParams = this._initParams.getParentPostInit();
 
 			this._initPSV();
-			if(myInitParams.map) { await this._initMap(); }
-			else {
-				this.grid.removeChild(this.mini);
-				this.psvContainer.setAttribute("slot", "bg");
-				this.grid.appendChild(this.psvContainer);
-			}
-
-			// Init various widgets
-			if(myInitParams.widgets !== "false") {
-				this.grid.appendChild(createWebComp("pnx-widget-zoom", {
-					slot: this.isWidthSmall() ? "top-left" : "bottom-right",
-					class: this.isWidthSmall() ? "pnx-only-map pnx-print-hidden" : "pnx-print-hidden",
-					_parent: this
-				}));
-				this.grid.appendChild(createWebComp("pnx-widget-share", {slot: "bottom-right", class: "pnx-print-hidden", _parent: this}));
-
-				if(this.map) {
-					this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
-						slot: this.isWidthSmall() ? "top-right" : "top-left",
-						_parent: this,
-						class: "pnx-only-map pnx-print-hidden",
-						geocoder: myPostInitParams.geocoder,
-					}));
-					this.grid.appendChild(createWebComp("pnx-widget-mapfilters", {
-						slot: this.isWidthSmall() ? "top-right" : "top-left",
-						_parent: this,
-						"user-search": this.api._endpoints.user_search !== null && this.api._endpoints.user_tiles !== null,
-						"quality-score": this.map?._hasQualityScore?.() || false,
-						class: "pnx-only-map pnx-print-hidden",
-					}));
-					this.grid.appendChild(createWebComp("pnx-widget-maplayers", { slot: "top-right", _parent: this, class: "pnx-only-map pnx-print-hidden" }));
-				}
-				
-				this.legend = createWebComp("pnx-widget-legend", {
-					slot: this.isWidthSmall() ? "top" : "top-left",
-					_parent: this,
-					focus: myPostInitParams.focus
-				});
-				this.grid.appendChild(this.legend);
-				this.grid.appendChild(createWebComp("pnx-widget-player", {slot: "top", _parent: this, class: "pnx-only-psv pnx-print-hidden"}));
-			}
-
+			await this._initMap();
+			this._initWidgets();
 			alterViewerState(this, myPostInitParams);
 			this._handleKeyboardManagement();
+			
 			if(myPostInitParams.picture) {
 				this.psv.addEventListener("picture-loaded", () => this.loader.dismiss(), {once: true});
 			}
@@ -234,48 +214,23 @@ export default class Viewer extends Basic {
 	attributeChangedCallback(name, old, value) {
 		super.attributeChangedCallback(name, old, value);
 
-		// First pic load : show map in mini component
-		if(name === "picture" && isNullId(old) && !isNullId(value)) {
-			this.mini.removeAttribute("collapsed");
-		}
-		if(name === "picture" && isNullId(value) && this.map && this.isMapWide()) {
-			this.mini.classList.add("pnx-hidden");
+		if(name === "picture") {
+			this.legend?.setAttribute?.("picture", value);
+			
+			// First pic load : show map in mini component
+			if(isNullId(old) && !isNullId(value)) {
+				this.mini.removeAttribute("collapsed");
+			}
+			if(isNullId(value) && this.map && this.isMapWide()) {
+				this.mini.classList.add("pnx-hidden");
+			}
 		}
+		
 		if(name === "focus") {
 			this._setFocus(value);
 		}
 	}
 
-	/** @private */
-	render() {
-		return [this.loader, this.grid, this.popup, this.slot];
-	}
-
-	/**
-	 * Waiting for Photo Sphere Viewer to be available.
-	 * @returns {Promise} When PSV is ready to use
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	oncePSVReady() {
-		let waiter;
-		return new Promise(resolve => {
-			waiter = setInterval(() => {
-				if(typeof this.psv === "object") {
-					if(this.psv.container) {
-						clearInterval(waiter);
-						resolve();
-					}
-					else if(this.psv.addEventListener) {
-						this.psv.addEventListener("ready", () => {
-							clearInterval(waiter);
-							resolve();
-						}, {once: true});
-					}
-				}
-			}, 250);
-		});
-	}
-
 	/**
 	 * Waiting for map to be available.
 	 * @returns {Promise} When map is ready to use
@@ -303,67 +258,6 @@ export default class Viewer extends Basic {
 		});
 	}
 
-	/**
-	 * Waits for first picture to display on PSV.
-	 * @returns {Promise}
-	 * @fulfil {undefined} When picture is shown
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	onceFirstPicLoaded() {
-		return this.oncePSVReady().then(() => {
-			if(this.psv.getPictureMetadata()) { return Promise.resolve(); }
-			else {
-				return new Promise(resolve => {
-					this.psv.addEventListener("picture-loaded", resolve, {once: true});
-				});
-			}
-		});
-	}
-
-	/** @private */
-	_initPSV() {
-		try {
-			this.psv = new Photo(this, this.psvContainer, {
-				shouldGoFast: this._psvShouldGoFast.bind(this),
-				keyboard: "always",
-				keyboardActions: {
-					...PSDefaults.keyboardActions,
-					"8": "ROTATE_UP",
-					"2": "ROTATE_DOWN",
-					"4": "ROTATE_LEFT",
-					"6": "ROTATE_RIGHT",
-
-					"PageUp": () => this.psv.goToNextPicture(),
-					"9": () => this.psv.goToNextPicture(),
-
-					"PageDown": () => this.psv.goToPrevPicture(),
-					"3": () => this.psv.goToPrevPicture(),
-
-					"5": () => this.moveCenter(),
-					"*": () => this.moveCenter(),
-
-					"Home": () => this._toggleFocus(),
-					"7": () => this._toggleFocus(),
-
-					"End": () => this.mini.toggleAttribute("collapsed"),
-					"1": () => this.mini.toggleAttribute("collapsed"),
-
-					" ": () => this.psv.toggleSequencePlaying(),
-					"0": () => this.psv.toggleSequencePlaying(),
-				},
-				...this._initParams.getPSVInit()
-			});
-			this.oncePSVReady().then(() => {
-				this.loader.setAttribute("value", 50);
-				alterPSVState(this.psv, this._initParams.getPSVPostInit());
-			});
-		}
-		catch(e) {
-			let err = !PSSystem.isWebGLSupported ? this._t.pnx.error_webgl : this._t.pnx.error_psv;
-			this.loader.dismiss(e, err);
-		}
-	}
-
 	/**
 	 * Inits MapLibre GL component
 	 *
@@ -424,69 +318,6 @@ export default class Viewer extends Basic {
 		}
 	}
 
-	/**
-	 * Given context, should tiles be loaded in PSV.
-	 * @private
-	 */
-	_psvShouldGoFast() {
-		return (this.psv._sequencePlaying && this.psv.getTransitionDuration() < 1000)
-			|| (this.map && this.isMapWide());
-	}
-
-	/** @private */
-	_moveChildToGrid() {
-		for(let i=0; i < this.childNodes.length; i++) {
-			let n = this.childNodes[i];
-			if(n.getAttribute?.("slot")) {
-				// Add parent + translation for our components
-				if(n.tagName?.toLowerCase().startsWith("pnx-")) {
-					n._parent = this;
-					n._t = this._t;
-				}
-				this.grid.appendChild(n);
-			}
-		}
-	}
-
-	/**
-	 * Change full-page popup visibility and content
-	 * @memberof Panoramax.components.core.Viewer#
-	 * @param {boolean} visible True to make it appear
-	 * @param {string|Element[]} [content] The new popup content
-	 */
-	setPopup(visible, content = null) {
-		if(visible) { this.popup.setAttribute("visible", ""); }
-		else { this.popup.removeAttribute("visible"); }
-		
-		this.popup.innerHTML = "";
-		if(typeof content === "string") { this.popup.innerHTML = content; }
-		else if(Array.isArray(content)) { content.forEach(c => this.popup.appendChild(c)); }
-	}
-
-	/** @private */
-	_onPopupClose() {
-		this.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: this.map && this.isMapWide() ? "map" : "pic" } }));
-	}
-
-	/** @private */
-	_showQualityScoreDoc() {
-		this.setPopup(true, [createWebComp("pnx-quality-score-doc", {_t: this._t})]);
-	}
-
-	/** @private */
-	_showReportForm() {
-		if(!this.psv.getPictureMetadata()) { throw new Error("No picture currently selected"); }
-		this.setPopup(true, [createWebComp("pnx-report-form", {_parent: this})]);
-		this.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: "meta" } }));
-	}
-
-	/** @private */
-	_showPictureMetadata() {
-		if(!this.psv.getPictureMetadata()) { throw new Error("No picture currently selected"); }
-		this.setPopup(true, [createWebComp("pnx-picture-metadata", {_parent: this})]);
-		this.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: "meta" } }));
-	}
-
 	/**
 	 * Move the view of main component to its center.
 	 * For map, center view on selected picture.
@@ -501,47 +332,10 @@ export default class Viewer extends Basic {
 			this.map.flyTo({ center: meta.gps, zoom: 20 });
 		}
 		else {
-			this._psvAnimate({
-				speed: PSV_ANIM_DURATION,
-				yaw: 0,
-				pitch: 0,
-				zoom: PSV_DEFAULT_ZOOM
-			});
+			super.moveCenter();
 		}
 	}
 
-	/**
-	 * Moves the view of main component slightly to the left.
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	moveLeft() {
-		this._moveToDirection("left");
-	}
-
-	/**
-	 * Moves the view of main component slightly to the right.
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	moveRight() {
-		this._moveToDirection("right");
-	}
-
-	/**
-	 * Moves the view of main component slightly to the top.
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	moveUp() {
-		this._moveToDirection("up");
-	}
-
-	/**
-	 * Moves the view of main component slightly to the bottom.
-	 * @memberof Panoramax.components.core.Viewer#
-	 */
-	moveDown() {
-		this._moveToDirection("down");
-	}
-
 	/**
 	 * Moves map or picture viewer to given direction.
 	 * @param {string} dir Direction to move to (up, left, down, right)
@@ -567,43 +361,16 @@ export default class Viewer extends Basic {
 			this.map.panBy(pan);
 		}
 		else {
-			let pos = this.psv.getPosition();
-			switch(dir) {
-			case "up":
-				pos.pitch += PSV_MOVE_DELTA;
-				break;
-			case "left":
-				pos.yaw -= PSV_MOVE_DELTA;
-				break;
-			case "down":
-				pos.pitch -= PSV_MOVE_DELTA;
-				break;
-			case "right":
-				pos.yaw += PSV_MOVE_DELTA;
-				break;
-			}
-			this._psvAnimate({ speed: PSV_ANIM_DURATION, ...pos });
+			super._moveToDirection(dir);
 		}
 	}
 
-	/**
-	 * Overrided PSV animate function to ensure a single animation plays at once.
-	 * @param {object} options PSV animate options
-	 * @private
-	 */
-	_psvAnimate(options) {
-		if(this._lastPsvAnim) { this._lastPsvAnim.cancel(); }
-		this._lastPsvAnim = this.psv.animate(options);
-	}
-
 	/**
 	 * Is the map shown as main element instead of viewer (wide map mode) ?
 	 * @memberof Panoramax.components.core.Viewer#
 	 * @returns {boolean} True if map is wider than viewer
-	 * @throws {Error} If map is not enabled
 	 */
 	isMapWide() {
-		if(!this.map) { throw new Error("Map is not enabled"); }
 		return this.mapContainer.parentNode == this.grid;
 	}
 
@@ -695,11 +462,9 @@ export default class Viewer extends Basic {
 	/**
 	 * Toggle the viewer focus (either on picture or map)
 	 * @memberof Panoramax.components.core.Viewer#
-	 * @throws {Error} If map is not enabled
 	 * @private
 	 */
 	_toggleFocus() {
-		if(!this.map) { throw new Error("Map is not enabled"); }
 		this._setFocus(this.isMapWide() ? "pic" : "map");
 	}
 

package/src/components/core/index.js

@@ -9,3 +9,4 @@ export {default as Basic} from "./Basic";
 export {default as CoverageMap} from "./CoverageMap";
 export {default as Editor} from "./Editor";
 export {default as Viewer} from "./Viewer";
+export {default as PhotoViewer} from "./PhotoViewer";

package/src/components/menus/MapLegend.js

@@ -1,10 +1,7 @@
 import {LitElement, html, nothing, css} from "lit";
-import { fa } from "../../utils/widgets";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import PanoramaxImg from "../../img/panoramax.svg";
 
 /**
- * Map legend displays information about map sources and Panoramax.
+ * Map legend displays information about map sources.
  * @class Panoramax.components.menus.MapLegend
  * @element pnx-map-legend
  * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
@@ -22,14 +19,6 @@ export default class MapLegend extends LitElement {
 		small {
 			font-size: 1em;
 		}
-		.presentation {
-			display: flex;
-			gap: 5px;
-			align-items: center;
-		}
-		.logo {
-			width: 45px;
-		}
 	`;
 
 	/** @private */
@@ -37,15 +26,6 @@ export default class MapLegend extends LitElement {
 		const mapAttrib = this._parent?.map?._attribution?._innerContainer;
 
 		return html`
-			<div class="presentation">
-				<img class="logo" src=${PanoramaxImg} alt="" />
-				<div>
-					Panoramax est le géocommun des photos de rues.
-					<pnx-link-button title=${this._parent?._t.map.more_panoramax} kind="outline" href="https://panoramax.fr" target="_blank">
-						${fa(faInfoCircle, { styles: {height: "12px", "margin-inline": "3px"}})}
-					</pnx-link-button>
-				</div>
-			</div>
 			${mapAttrib && mapAttrib.innerHTML.length > 0 ? html`${this._parent?._t.map.map_data}<br />${mapAttrib}` : nothing}
 		`;
 	}

package/src/components/ui/Photo.js

@@ -3,7 +3,7 @@ import LoaderImgBase from "../../img/loader_base.jpg";
 import LogoDead from "../../img/logo_dead.svg";
 import {
 	getDistance, positionToXYZ, xyzToPosition,
-	getRelativeHeading, BASE_PANORAMA_ID,
+	getRelativeHeading, BASE_PANORAMA_ID, isNullId,
 } from "../../utils/utils";
 import { apiFeatureToPSVNode } from "../../utils/picture";
 
@@ -155,7 +155,7 @@ export default class Photo extends PSViewer {
 	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	async _getNodeFromAPI(picId) {
-		if(!picId || picId === BASE_PANORAMA_ID) { return BASE_PANORAMA_NODE; }
+		if(isNullId(picId)) { return BASE_PANORAMA_NODE; }
 
 		const picApiResponse = await fetch(
 			this._parent.api.getPictureMetadataUrl(picId, this._picturesSequences[picId]),
@@ -490,10 +490,20 @@ export default class Photo extends PSViewer {
 	 * @returns {object} Picture metadata
 	 */
 	getPictureMetadata() {
-		if(this._myVTour?.state?.currentNode?.id === BASE_PANORAMA_ID) { return null; }
+		if(isNullId(this._myVTour?.state?.currentNode?.id)) { return null; }
 		return this._myVTour.state.currentNode ? Object.assign({}, this._myVTour.state.currentNode) : null;
 	}
 
+	/**
+	 * Get current picture ID, or loading picture ID if any.
+	 * @memberof Panoramax.components.ui.Photo#
+	 * @returns {string|null} Picture ID (current or loading), or null if none is selected.
+	 */
+	getPictureId() {
+		const id = this._myVTour?.state?.loadingNode || this._myVTour?.state?.currentNode?.id;
+		return isNullId(id) ? null : id;
+	}
+
 	/**
 	 * Handler for select event.
 	 * @private

package/src/components/ui/widgets/Legend.js

@@ -1,14 +1,22 @@
 import {LitElement, html, css} from "lit";
 import { panel } from "../../styles";
+import { fa } from "../../../utils/widgets";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import PanoramaxImg from "../../../img/panoramax.svg";
 
 /**
  * Legend widget, handling switch between map and photo components.
+ * Also displays a default "About Panoramax" message.
  * @class Panoramax.components.ui.widgets.Legend
  * @element pnx-widget-legend
  * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
  * @example
  * ```html
- * <pnx-widget-legend _parent=${viewer} />
+ * <pnx-widget-legend
+ *   _parent=${viewer}
+ *   focus="map"
+ *   picture="PICTURE-ID-IF-ANY"
+ * />
  * ```
  */
 export default class Legend extends LitElement {
@@ -22,6 +30,15 @@ export default class Legend extends LitElement {
 			max-width: 80vh;
 			z-index: 120;
 		}
+		.presentation {
+			font-size: 0.9em;
+			display: flex;
+			gap: 5px;
+			align-items: center;
+		}
+		.logo {
+			width: 45px;
+		}
 	`];
 
 	/**
@@ -29,13 +46,27 @@ export default class Legend extends LitElement {
 	 * @memberof Panoramax.components.ui.widgets.Legend#
 	 * @type {Object}
 	 * @property {string} [focus] The focused main component (map, pic)
+	 * @property {string} [picture] The picture ID
 	 */
 	static properties = {
 		focus: {type: String},
+		picture: {type: String},
 	};
 
 	render() {
 		return html`<div class="pnx-panel pnx-padded" part="panel">
+			<div
+				class="presentation"
+				style=${this.focus != "map" && this.picture ? "display: none": ""}
+			>
+				<img class="logo" src=${PanoramaxImg} alt="" />
+				<div>
+					Panoramax est le géocommun des photos de rues.
+					<pnx-link-button title=${this._parent?._t.map.more_panoramax} kind="outline" href="https://panoramax.fr" target="_blank">
+						${fa(faInfoCircle, { styles: {height: "12px", "margin-inline": "3px"}})}
+					</pnx-link-button>
+				</div>
+			</div>
 			<pnx-picture-legend
 				._parent=${this._parent}
 				style=${this.focus == "map" ? "display: none": ""}

package/src/index.js

@@ -5,3 +5,4 @@ export * as utils from "./utils";
 export {default as Viewer} from "./components/core/Viewer";
 export {default as CoverageMap} from "./components/core/CoverageMap";
 export {default as Editor} from "./components/core/Editor";
+export {default as PhotoViewer} from "./components/core/PhotoViewer";