@panoramax/web-viewer 4.0.1-develop-676dfe51 → 4.0.1-develop-35288366

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.1-develop-676dfe51",
+  "version": "4.0.1-develop-35288366",
   "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/Viewer.js

@@ -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);
 	}

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/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/utils/InitParameters.js

@@ -323,7 +323,7 @@ export function alterPSVState(psv, params) {
  * @param {Map} map The MapLibre component to change.
  * @param {object} params The parameters to apply.
  */
-export function alterMapState(map, params) {
+export async function alterMapState(map, params) {
 	// Map position
 	const mapOpts = getMapPositionFromString(params.map, map);
 	if(mapOpts) {
@@ -333,7 +333,7 @@ export function alterMapState(map, params) {
 	// Visible users
 	let vu = Array.isArray(params.users) ? params.users : (params.users || "").split(",");
 	if(vu.length === 0 || (vu.length === 1 && vu[0].trim() === "")) { vu = ["geovisio"]; }
-	map.setVisibleUsers(vu);
+	await map.setVisibleUsers(vu);
 
 	// Change map filters
 	map.setFilters?.(paramsToMapFilters(params));

package/tests/components/ui/Map.test.js

@@ -81,6 +81,7 @@ describe("getBackground", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const m = new Map(p, c);
+		m.getLayer = () => undefined;
 		expect(m.getBackground()).toBe("streets");
 	});
 });
@@ -99,7 +100,7 @@ describe("setBackground", () => {
 				resolve();
 			});
 			m.setBackground("aerial");
-		})
+		});
 	});
 
 	it("skips if setting streets and no raster available", () => {
@@ -107,6 +108,7 @@ describe("setBackground", () => {
 		const c = document.createElement("div");
 		const m = new Map(p, c);
 		m.setLayoutProperty = jest.fn();
+		m.getLayer = () => undefined;
 		m.setBackground("streets");
 		expect(m.setLayoutProperty.mock.calls.length).toBe(0);
 	});
@@ -115,6 +117,7 @@ describe("setBackground", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const m = new Map(p, c);
+		m.getLayer = () => undefined;
 		expect(() => m.setBackground("aerial")).toThrowError("No aerial imagery available");
 	});
 });
@@ -138,9 +141,10 @@ describe("setVisibleUsers", () => {
 		const c = document.createElement("div");
 		const m = new Map(p, c);
 		m._createPicturesTilesLayer = (url, id) => m._userLayers.add(id);
-		m.setLayoutProperty = jest.fn();
+		m._addedLayers = [];
+		m.addLayer = jest.fn();
 		await m.setVisibleUsers(["blabla"]);
-		expect(m.setLayoutProperty.mock.calls).toMatchSnapshot();
+		expect(m.addLayer.mock.calls).toMatchSnapshot();
 		expect(p.dispatchEvent.mock.calls).toMatchSnapshot();
 	});
 

package/tests/utils/InitParameters.test.js

@@ -372,47 +372,47 @@ describe("alterMapState", () => {
 
 	afterEach(() => jest.clearAllMocks());
 
-	it("should jump to map position when map param is provided", () => {
+	it("should jump to map position when map param is provided", async () => {
 		const params = { map: "10/20/30" };
 		const mapOpts = { center: [30,20], zoom: 10, pitch: 0 };
 
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.jumpTo).toHaveBeenCalledWith(mapOpts);
 	});
 
-	it("should set visible users when users param is provided", () => {
+	it("should set visible users when users param is provided", async () => {
 		const params = { users: "user1,user2" };
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.setVisibleUsers).toHaveBeenCalledWith(["user1", "user2"]);
 	});
 
-	it("should set default visible user when users param is empty", () => {
+	it("should set default visible user when users param is empty", async () => {
 		const params = { users: "" };
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.setVisibleUsers).toHaveBeenCalledWith(["geovisio"]);
 	});
 
-	it("should set map filters when params are provided", () => {
+	it("should set map filters when params are provided", async () => {
 		const params = { "date_from": "2024-01-01", "pic_score": "ABC" };
 		const filters = { "minDate": "2024-01-01", "qualityscore": [5,4,3] };
-
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.setFilters).toHaveBeenCalledWith(filters);
 	});
 
-	it("should set map background when background param is valid", () => {
+	it("should set map background when background param is valid", async () => {
 		const params = { background: "aerial" };
-		alterMapState(map, params);
+		map.setVisibleUsers = () => Promise.resolve();
+		await alterMapState(map, params);
 		expect(map.setBackground).toHaveBeenCalledWith("aerial");
 	});
 
-	it("should not set map background when background param is invalid", () => {
+	it("should not set map background when background param is invalid", async () => {
 		const params = { background: "invalid" };
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.setBackground).not.toHaveBeenCalled();
 	});
 
-	it("should handle multiple params correctly", () => {
+	it("should handle multiple params correctly", async () => {
 		const params = {
 			map: "15/7/6",
 			users: "user1,user2",
@@ -422,7 +422,7 @@ describe("alterMapState", () => {
 		const mapOpts = { center: [6, 7], zoom: 15, pitch: 0 };
 		const filters = { camera: "value1" };
 
-		alterMapState(map, params);
+		await alterMapState(map, params);
 		expect(map.jumpTo).toHaveBeenCalledWith(mapOpts);
 		expect(map.setVisibleUsers).toHaveBeenCalledWith(["user1", "user2"]);
 		expect(map.setFilters).toHaveBeenCalledWith(filters);