@panoramax/web-viewer 4.0.1 → 4.0.2-develop-9b499e28

package/config/jest/mocks.js

@@ -97,9 +97,10 @@ jest.mock("maplibre-gl", () => ({
 		addControl() {;}
 		addSource() {;}
 		addLayer() {;}
-		getLayer() {;}
+		getLayer(l) { return {id: l}; }
 		setLayoutProperty() {;}
 		setPaintProperty() {;}
+		loaded() { return true; }
 		getStyle() {
 			return {
 				layers: [],

package/docs/03_URL_settings.md

@@ -31,7 +31,7 @@ By default, picture is shown wide.
 
 ### :simple-speedtest: `speed`: sequence play speed
 
-The duration of stay on a picture during sequence play (excluding image dowloading time), in milliseconds. Authorized values are between 0 and 3000. Example:
+The duration of stay on a picture during sequence play (excluding image downloading time), in milliseconds. Authorized values are between 0 and 3000. Example:
 
 ```urlencoded
 speed=1000

package/docs/09_Develop.md

@@ -14,7 +14,7 @@ The current code is split between various elements:
 
 - __Core components__: a single functional entry, like [Viewer](./reference/components/core/Viewer.md) (map + picture), [Photo Viewer](./reference/components/core/PhotoViewer.md) (picture only), [Coverage Map](./reference/components/core/CoverageMap.md) or [Editor](./reference/components/core/Editor.md). They share parts of code in [Basic](./reference/components/core/Basic.md) class. They specialized the behaviour of components depending on the needs.
 - __UI components, menus & widgets__: reusable web components, like [Map](./reference/components/ui/Map.md), [Photo](./reference/components/ui/Photo.md) or [Loader](./reference/components/ui/Loader.md). They are used in some views depending of the context.
-- __Utils__: utility functions, splitted in various files for clarity.
+- __Utils__: utility functions, split into various files for clarity.
 
 ![Class diagram of Panoramax web viewer](./images/class_diagram.jpg)
 
@@ -54,6 +54,10 @@ This allows a flexible way to interact with viewer for users. Prioritization of
 
 This means that, when developing, if you want to check if your attributes are well-defined, you may want to get rid of URL search parameters, as well as remove the `pnx-map-parameters` local storage item. Otherwise, they may not be read as they are lower priority than others.
 
+### Third-party services URL
+
+All third-party services URL (like geocoding API, OSM iD editor) are grouped into a dedicated `src/utils/services.js` file. You can easily change them to deploy a custom version of the viewer.
+
 ## Testing
 
 We're trying to make Panoramax as reliable and secure as possible. To ensure this, we rely heavily on code testing. A variety of testing tools is made available:

package/docs/reference/components/core/Viewer.md

@@ -114,7 +114,7 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 | [psv] | <code>object</code> |  | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"` |
 | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
 | [focus] | <code>string</code> | <code>&quot;pic&quot;</code> | The component showing up as main component (pic, map) |
-| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban) |
+| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API) |
 | [widgets] | <code>string</code> | <code>true</code> | Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like. |
 | [picture] | <code>string</code> |  | The picture ID to display |
 | [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |

package/docs/reference/components/ui/CopyButton.md

@@ -35,4 +35,5 @@ Component properties.
 | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
 | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
 | [unstyled] | <code>boolean</code> | <code>false</code> | Disable all styling (for list group integration) |
+| [title] | <code>string</code> |  | Tooltip text displayed when hovering over the button |
 

package/docs/reference/components/ui/Map.md

@@ -14,6 +14,7 @@
     * [.getBackground()](#Panoramax.components.ui.Map+getBackground) ⇒ <code>string</code>
     * [.setBackground(bg)](#Panoramax.components.ui.Map+setBackground)
     * [.getVisibleUsers()](#Panoramax.components.ui.Map+getVisibleUsers) ⇒ <code>Array.&lt;string&gt;</code>
+    * [.onceLayerReady(layerId)](#Panoramax.components.ui.Map+onceLayerReady) ⇒ <code>Promise</code>
     * [.setVisibleUsers(visibleIds)](#Panoramax.components.ui.Map+setVisibleUsers)
     * [.filterUserLayersContent(dataType, filter)](#Panoramax.components.ui.Map+filterUserLayersContent)
     * [.displayPictureMarker(lon, lat, heading, [skipCenter])](#Panoramax.components.ui.Map+displayPictureMarker)
@@ -109,6 +110,18 @@ Get the currently visible users
 
 **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map)  
 **Returns**: <code>Array.&lt;string&gt;</code> - List of visible users  
+<a name="Panoramax.components.ui.Map+onceLayerReady"></a>
+
+### map.onceLayerReady(layerId) ⇒ <code>Promise</code>
+Wait for a given map layer to be really available.
+
+**Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map)  
+**Fulfil**: <code>null</code> When layer is ready.  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| layerId | <code>string</code> | the layer ID |
+
 <a name="Panoramax.components.ui.Map+setVisibleUsers"></a>
 
 ### map.setVisibleUsers(visibleIds)

package/docs/reference/components/ui/MapMore.md

@@ -14,6 +14,7 @@
     * [.getBackground()](Map.md/#Panoramax.components.ui.Map+getBackground) ⇒ <code>string</code>
     * [.setBackground(bg)](Map.md/#Panoramax.components.ui.Map+setBackground)
     * [.getVisibleUsers()](Map.md/#Panoramax.components.ui.Map+getVisibleUsers) ⇒ <code>Array.&lt;string&gt;</code>
+    * [.onceLayerReady(layerId)](Map.md/#Panoramax.components.ui.Map+onceLayerReady) ⇒ <code>Promise</code>
     * [.setVisibleUsers(visibleIds)](Map.md/#Panoramax.components.ui.Map+setVisibleUsers)
     * [.filterUserLayersContent(dataType, filter)](Map.md/#Panoramax.components.ui.Map+filterUserLayersContent)
     * [.displayPictureMarker(lon, lat, heading, [skipCenter])](#Panoramax.components.ui.Map+displayPictureMarker)
@@ -109,6 +110,18 @@ Get the currently visible users
 
 **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
 **Returns**: <code>Array.&lt;string&gt;</code> - List of visible users  
+<a name="Panoramax.components.ui.Map+onceLayerReady"></a>
+
+### mapMore.onceLayerReady(layerId) ⇒ <code>Promise</code>
+Wait for a given map layer to be really available.
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Fulfil**: <code>null</code> When layer is ready.  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| layerId | <code>string</code> | the layer ID |
+
 <a name="Panoramax.components.ui.Map+setVisibleUsers"></a>
 
 ### mapMore.setVisibleUsers(visibleIds)

package/docs/reference/components/ui/Photo.md

@@ -289,7 +289,7 @@ Event for picture preview
 | --- | --- | --- |
 | detail.picId | <code>string</code> | The picture ID |
 | detail.coordinates | <code>Array.&lt;number&gt;</code> | [x,y] coordinates |
-| detail.direction | <code>number</code> | The theorical picture orientation |
+| detail.direction | <code>number</code> | The theoretical picture orientation |
 
 <a name="Panoramax.components.ui.Photo+event_picture-preview-stopped"></a>
 

package/docs/reference/components/ui/widgets/CopyCoordinates.md

@@ -0,0 +1,32 @@
+<a name="Panoramax.components.ui.widgets.CopyCoordinates"></a>
+
+## Panoramax.components.ui.widgets.CopyCoordinates ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui.widgets</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-copy-coordinates  
+
+* [.CopyCoordinates](#Panoramax.components.ui.widgets.CopyCoordinates) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new CopyCoordinates()](#new_Panoramax.components.ui.widgets.CopyCoordinates_new)
+    * [.properties](#Panoramax.components.ui.widgets.CopyCoordinates+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.widgets.CopyCoordinates_new"></a>
+
+### new CopyCoordinates()
+Copy Coordinates button allows easy copy of several format of map coordinates.
+
+**Example**  
+```html
+<pnx-copy-coordinates gps=${[-1.7, 48.6]} _parent=${viewer} />
+```
+<a name="Panoramax.components.ui.widgets.CopyCoordinates+properties"></a>
+
+### copyCoordinates.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>CopyCoordinates</code>](#Panoramax.components.ui.widgets.CopyCoordinates)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| gps | <code>Array.&lt;number&gt;</code> | GPS/map coordinates, as [lon, lat] |
+

package/docs/reference/components/ui/widgets/GeoSearch.md

@@ -16,7 +16,11 @@ Ready-to-use geocoder search bar.
 
 **Example**  
 ```html
+<!-- Default geocoder -->
 <pnx-widget-geosearch _parent=${viewer} />
+
+<!-- Custom-URL geocoder -->
+<pnx-widget-geosearch geocoder="https://photon.komoot.io/api" _parent=${viewer} />
 ```
 <a name="Panoramax.components.ui.widgets.GeoSearch+properties"></a>
 
@@ -28,5 +32,5 @@ Component properties.
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban) |
+| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API) |
 

package/docs/reference/utils/API.md

@@ -39,7 +39,7 @@ API contains various utility functions to communicate with Panoramax/STAC API
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
-| endpoint | <code>string</code> |  | The endpoint. It corresponds to the <a href="https://github.com/radiantearth/stac-api-spec/blob/main/overview.md#example-landing-page">STAC landing page</a>, with all links describing the API capabilites. |
+| endpoint | <code>string</code> |  | The endpoint. It corresponds to the <a href="https://github.com/radiantearth/stac-api-spec/blob/main/overview.md#example-landing-page">STAC landing page</a>, with all links describing the API capabilities. |
 | [options] | <code>object</code> |  | Options |
 | [options.style] | <code>string</code> \| <code>object</code> |  | General map style |
 | [options.tiles] | <code>string</code> |  | API route serving pictures & sequences vector tiles |

package/docs/reference.md

@@ -61,6 +61,7 @@ Basic UI components:
 
 More complex UI components (but not menus):
 
+- [CopyCoordinates](./reference/components/ui/widgets/CopyCoordinates.md) : a copy-to-clipboard button for coordinates, with many format options.
 - [GeoSearch](./reference/components/ui/widgets/GeoSearch.md) : a geocoder search bar with GPS location tool.
 - [Legend](./reference/components/ui/widgets/Legend.md) : a togglable map/picture legend.
 - [MapFiltersButton](./reference/components/ui/widgets/MapFiltersButton.md) : a togglable map filters button & menu.

package/docs/tutorials/migrate_v4.md

@@ -68,7 +68,7 @@ Many stuff was moved around, and have a bit different naming. Main classes shoul
 
 A new main component is available, named __Photo Viewer__ (`<pnx-photo-viewer>`) for showing up only picture (without map).
 
-And source code is splitted in more packages:
+And source code is split into more packages:
 
 * `Panoramax.components` : everything you can see graphically
     * `.core` : Viewer, Editor, Coverage Map and Basic (common code)

package/docs/tutorials/synced_coverage.md

@@ -32,7 +32,7 @@ coverage.addEventListener("ready", () => {
 		console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
 	});
 
-	// You can also programatically change selection on map
+	// You can also programmatically change selection on map
 	coverage.select(
 		"c463d190-06b0-47fb-98a8-b4a775a39ad6", // A sequence ID
 		"bdea1eb4-4496-46da-a4d5-b22b16e75fa8"  // A picture ID (can be null if unknown)

package/mkdocs.yml

@@ -77,6 +77,7 @@ nav:
         - ShareMenu: 'reference/components/menus/ShareMenu.md'
       - ui:
         - widgets:
+          - CopyCoordinates: 'reference/components/ui/widgets/CopyCoordinates.md'
           - GeoSearch: 'reference/components/ui/widgets/GeoSearch.md'
           - Legend: 'reference/components/ui/widgets/Legend.md'
           - MapFiltersButton: 'reference/components/ui/widgets/MapFiltersButton.md'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.1",
+  "version": "4.0.2-develop-9b499e28",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/CoverageMap.js

@@ -108,8 +108,8 @@ export default class CoverageMap extends Basic {
 		this.map.on("picture-click", e => this.select(e.seqId, e.picId));
 		this.map.on("sequence-click", e => this.select(e.seqId));
 
-		this.map.waitForEnoughMapLoaded().then(() => {
-			alterMapState(this.map, this._initParams.getMapPostInit());
+		this.map.waitForEnoughMapLoaded().then(async () => {
+			await alterMapState(this.map, this._initParams.getMapPostInit());
 			this.map.reloadLayersStyles();
 			this.loader.dismiss();
 		});

package/src/components/core/PhotoViewer.js

@@ -323,7 +323,11 @@ export default class PhotoViewer extends Basic {
 		for(let cn of this.grid.childNodes) {
 			if(cn.getAttribute("slot") !== "bg") {
 				cn.addEventListener("focusin", () => keytonone());
-				cn.addEventListener("focusout", () => keytopsv());
+				cn.addEventListener("focusout", () => {
+					if(this.popup.getAttribute("visible") === null) {
+						keytopsv();
+					}
+				});
 			}
 		}
 	}

package/src/components/core/Viewer.js

@@ -95,7 +95,7 @@ export default class Viewer extends PhotoViewer {
 	 * @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)
-	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban)
+	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API)
 	 * @property {string} [widgets=true] Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
 	 * @property {string} [picture] The picture ID to display
 	 * @property {string} [sequence] The sequence ID of the picture displayed
@@ -294,7 +294,7 @@ export default class Viewer extends PhotoViewer {
 			});
 		});
 
-		alterMapState(this.map, this._initParams.getMapPostInit());
+		await alterMapState(this.map, this._initParams.getMapPostInit());
 		initMapKeyboardHandler(this);
 		linkMapAndPhoto(this);
 	}
@@ -336,11 +336,11 @@ export default class Viewer extends PhotoViewer {
 		};
 		const keytopsv = () => {
 			this.psv.startKeyboardControl();
-			this.map?.keyboard?.disable();
+			this.map.keyboard.disable();
 		};
 		const keytonone = () => {
 			this.psv.stopKeyboardControl();
-			this.map?.keyboard?.disable();
+			this.map.keyboard.disable();
 		};
 		const keytofocused = () => {
 			if(this.map && this.isMapWide()) { keytomap(); }
@@ -350,6 +350,7 @@ export default class Viewer extends PhotoViewer {
 		// General focus change
 		this.addEventListener("focus-changed", e => {
 			if(e.detail.focus === "map") { keytomap(); }
+			if(this.popup.getAttribute("visible")) { keytonone(); }
 			else { keytopsv(); }
 		});
 
@@ -361,7 +362,11 @@ export default class Viewer extends PhotoViewer {
 		for(let cn of this.grid.childNodes) {
 			if(cn.getAttribute("slot") !== "bg") {
 				cn.addEventListener("focusin", () => keytonone());
-				cn.addEventListener("focusout", () => keytofocused());
+				cn.addEventListener("focusout", () => {
+					if(this.popup.getAttribute("visible") === null) {
+						keytofocused();
+					}
+				});
 			}
 		}
 	}

package/src/components/menus/PictureLegend.js

@@ -145,6 +145,9 @@ export default class PictureLegend extends LitElement {
 			this._parent.psv.addEventListener("picture-loaded", () => {
 				this._onPicChange(this._parent.psv.getPictureMetadata());
 			});
+			this._parent.psv.addEventListener("sequence-stopped", () => {
+				this._onPicChange(this._parent.psv.getPictureMetadata());
+			});
 		});
 	}
 
@@ -154,12 +157,12 @@ export default class PictureLegend extends LitElement {
 		this._caption = picMeta?.caption;
 		
 		if(picMeta) {
-			const coordsHash = `${picMeta.gps[0]}/${picMeta.gps[1]}`;
+			const coordsHash = `${picMeta.gps[0].toFixed(4)}/${picMeta.gps[1].toFixed(4)}`;
 			if(this._prevSearches[coordsHash]) {
 				this._addr = this._prevSearches[coordsHash];
 			}
-			else {
-				this._addrTimer2 = setTimeout(() => this._addr = "", 250);
+			else if(!this._parent.psv._sequencePlaying) {
+				this._addr = "";
 				this._addrTimer1 = setTimeout(() => {
 					reverseGeocodingNominatim(picMeta.gps[1], picMeta.gps[0])
 						.then(addr => {
@@ -167,7 +170,7 @@ export default class PictureLegend extends LitElement {
 							this._addr = addr;
 							this._prevSearches[coordsHash] = addr;
 						});
-				}, 750);
+				}, 500);
 			}
 		}
 		else {

package/src/components/menus/PictureMetadata.js

@@ -146,8 +146,18 @@ export default class PictureMetadata extends LitElement {
 		// Location tab
 		const orientation = this._meta?.properties?.["view:azimuth"] !== undefined && `${this._meta.properties["view:azimuth"]}°`;
 		const locationData = [
-			{ title: this._parent?._t.pnx.metadata_location_longitude, content: this._meta.gps[0] },
-			{ title: this._parent?._t.pnx.metadata_location_latitude, content: this._meta.gps[1] },
+			{
+				title: this._parent?._t.pnx.metadata_location_coordinates,
+				content: html`
+					${this._meta.gps[0]}, ${this._meta.gps[1]}
+					<pnx-copy-coordinates
+						._parent=${this._parent}
+						.gps=${this._meta.gps}
+						style="margin-left: 10px"
+					></pnx-copy-coordinates>
+				`,
+				style: "width: 100%"
+			},
 			{ title: this._parent?._t.pnx.metadata_location_orientation, content: orientation || missing() },
 			{ title: this._parent?._t.pnx.metadata_location_precision, content: getGPSPrecision(this._meta) || missing() },
 		];
@@ -211,6 +221,17 @@ export default class PictureMetadata extends LitElement {
 					style: value.length > 30 ? "width: 100%" : undefined
 				};
 			});
+		exifData.unshift({
+			content: html`
+				<pnx-link-button
+					size="sm"
+					target="_blank"
+					href="https://exiv2.org/metadata.html"
+					title=${this._parent?._t.pnx.metadata_exif_doc_title}
+				>${fa(faInfoCircle)} ${this._parent?._t.pnx.metadata_exif_doc}</pnx-link-button>
+			`,
+			style: "width: 100%"
+		});
 
 		// General metadata
 		const overview = [

package/src/components/styles.js

@@ -274,6 +274,67 @@ export const btn = css`
 	}
 `;
 
+// Button group
+export const btngroup = css`
+	pnx-button-group > pnx-button {
+		display: inline-flex;
+	}
+
+	pnx-button-group > pnx-button::part(btn) {
+		height: unset;
+	}
+
+	/* Togglable in group */
+	pnx-button-group > pnx-togglable-group > pnx-button {
+		width: 100%;
+		height: 100%;
+	}
+
+	/* Row */
+	pnx-button-group[dir="row"] > :not(:first-child):not(:last-child)::part(btn),
+	pnx-button-group[dir="row"] > :not(:first-child):not(:last-child) > ::part(btn) {
+		border-radius: 0;
+		border-left: none;
+		border-right: none;
+	}
+
+	pnx-button-group[dir="row"] > :first-child::part(btn),
+	pnx-button-group[dir="row"] > :first-child > ::part(btn) {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		border-right: none;
+	}
+
+	pnx-button-group[dir="row"] > :last-child::part(btn),
+	pnx-button-group[dir="row"] > :last-child > ::part(btn) {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+		border-left: none;
+	}
+
+	/* Column */
+	pnx-button-group[dir="column"] > :not(:first-child):not(:last-child)::part(btn),
+	pnx-button-group[dir="column"] > :not(:first-child):not(:last-child) > ::part(btn) {
+		border-radius: 0;
+		border-top: none;
+		border-bottom: none;
+	}
+
+	pnx-button-group[dir="column"] > :first-child::part(btn),
+	pnx-button-group[dir="column"] > :first-child > ::part(btn) {
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+		border-bottom: none;
+	}
+
+	pnx-button-group[dir="column"] > :last-child::part(btn),
+	pnx-button-group[dir="column"] > :last-child > ::part(btn) {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		border-top: none;
+	}
+`;
+
 // Titles
 export const titles = css`
 	h1, h2, h3, h4, h5, h6 {

package/src/components/ui/ButtonGroup.css

@@ -1,3 +1,5 @@
+/* Also defined in styles.js */
+
 pnx-button-group > pnx-button {
 	display: inline-flex;
 }

package/src/components/ui/CopyButton.js

@@ -41,6 +41,7 @@ export default class CopyButton extends LitElement {
 	 * @property {string} [kind=full] The style variation of the button (full, 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
      */
 	static properties = {
 		text: {type: String},
@@ -48,6 +49,7 @@ export default class CopyButton extends LitElement {
 		kind: {type: String},
 		size: {type: String},
 		unstyled: {type: Boolean},
+		title: { type: String },
 		_active: {state: true, type: Boolean},
 	};
 
@@ -94,7 +96,7 @@ export default class CopyButton extends LitElement {
 			[`pnx-btn-${this.kind}`]: !this.unstyled,
 			[`pnx-btn-${this.size}`]: !this.unstyled,
 		};
-		return html`<button class=${classMap(classes)} part="btn">
+		return html`<button title=${this.title} class=${classMap(classes)} part="btn">
 			${this._active ?
 				html`${this._t?.pnx.copied || ""} ${fa(faCheck)}` :
 				html`<slot>${fa(faCopy)} ${this._t?.pnx.copy || ""}</slot>`

package/src/components/ui/Map.js

@@ -326,10 +326,29 @@ export default class Map extends maplibregl.Map {
 	 */
 	getVisibleUsers() {
 		return [...this._userLayers].filter(l => (
-			this.getLayoutProperty(getUserLayerId(l, "pictures"), "visibility") === "visible"
+			this.getLayer(getUserLayerId(l, "pictures"))
+			&& this.getLayoutProperty(getUserLayerId(l, "pictures"), "visibility") === "visible"
 		));
 	}
 
+	/**
+	 * Wait for a given map layer to be really available.
+	 * @param {string} layerId the layer ID
+	 * @returns {Promise}
+	 * @fulfil {null} When layer is ready.
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	onceLayerReady(layerId) {
+		if(this.getLayer(layerId)) {
+			return Promise.resolve();
+		}
+		else {
+			return new Promise(resolve => {
+				setTimeout(resolve, 250);
+			}).then(() => this.onceLayerReady(layerId));
+		}
+	}
+
 	/**
 	 * Make given user layers visible on map, and hide all others (if any)
 	 * @memberof Panoramax.components.ui.Map#
@@ -343,7 +362,10 @@ export default class Map extends maplibregl.Map {
 		await Promise.all(
 			visibleIds
 				.filter(id => id != "" && !this._userLayers.has(id))
-				.map(id => this._createPicturesTilesLayer(id))
+				.map(id => {
+					this._createPicturesTilesLayer(id);
+					return this.onceLayerReady(getUserLayerId(id, "pictures"));
+				})
 		);
 
 		// Switch visibility
@@ -375,6 +397,10 @@ export default class Map extends maplibregl.Map {
 	 */
 	filterUserLayersContent(dataType, filter) {
 		[...this._userLayers].forEach(l => {
+			if(!this.getLayer(getUserLayerId(l, dataType))) {
+				console.warn("Layer", getUserLayerId(l, dataType), "not ready");
+				return;
+			}
 			this.setFilter(getUserLayerId(l, dataType), filter);
 			if(dataType === "sequences" && this.getLayer(getUserLayerId(l, "sequences_plus"))) {
 				this.setFilter(getUserLayerId(l, "sequences_plus"), filter);
@@ -428,11 +454,16 @@ export default class Map extends maplibregl.Map {
 	reloadLayersStyles() {
 		const updateStyle = (layer, style) => {
 			[...this._userLayers].forEach(l => {
+				const layerId = getUserLayerId(l, layer);
+				if(!this.getLayer(layerId)) {
+					console.warn("Layer", layerId, "not ready");
+					return;
+				}
 				for(let p in style.layout) {
-					this.setLayoutProperty(getUserLayerId(l, layer), p, style.layout[p]);
+					this.setLayoutProperty(layerId, p, style.layout[p]);
 				}
 				for(let p in style.paint) {
-					this.setPaintProperty(getUserLayerId(l, layer), p, style.paint[p]);
+					this.setPaintProperty(layerId, p, style.paint[p]);
 				}
 			});
 		};

package/src/components/ui/Photo.js

@@ -266,7 +266,9 @@ export default class Photo extends PSViewer {
 			}
 			// Different sequence -> Point to center + no animation
 			else {
-				nodeTransition = forwardNoAnim;
+				nodeTransition = Object.assign(forwardNoAnim, {
+					rotateTo: { pitch: 0, yaw: 0 },
+				});
 			}
 		}
 
@@ -338,7 +340,7 @@ export default class Photo extends PSViewer {
 		 * @type {CustomEvent}
 		 * @property {string} detail.picId The picture ID
 		 * @property {number[]} detail.coordinates [x,y] coordinates
-		 * @property {number} detail.direction The theorical picture orientation
+		 * @property {number} detail.direction The theoretical picture orientation
 		 */
 		const event = new CustomEvent("picture-preview-started", { detail: {
 			picId: fromLink.nodeId,

package/src/components/ui/TogglableGroup.js

@@ -145,7 +145,7 @@ export default class TogglableGroup extends LitElement {
 			"pnx-padded": this.padded !== "false",
 		};
 
-		return html`<div class="container">
+		return html`<div class="container" @click=${e => e.stopPropagation()}>
 			<slot name="button" @slotchange=${this.handleButtonSlotChange}></slot>
 			<div class=${classMap(panelClasses)} part="menu">
 				<slot></slot>