@panoramax/web-viewer 4.0.1-develop-955ebafc → 4.0.1-develop-6b70d6bf

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/09_Develop.md

@@ -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/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-955ebafc",
+  "version": "4.0.1-develop-6b70d6bf",
   "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/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/widgets/OSMEditors.js

@@ -1,12 +1,12 @@
 import { LitElement, html, nothing, css } from "lit";
 import { fa } from "../../../utils/widgets";
 import { josmBboxParameters } from "../../../utils/utils";
+import { IdEditorURL } from "../../../utils/services";
 import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
 import { faSatelliteDish } from "@fortawesome/free-solid-svg-icons/faSatelliteDish";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
 
 const JOSM_REMOTE_URL = "http://127.0.0.1:8111";
-const ID_URL = "https://www.openstreetmap.org/edit?editor=id";
 
 /**
  * OSM Editors component offers direct links to OpenStreetMap's iD and JOSM editors.
@@ -126,7 +126,7 @@ export default class OSMEditors extends LitElement {
 				"photo_overlay": "panoramax",
 				"photo": `panoramax/${this._pic.id}`,
 			};
-			const idUrl = idOpts && `${ID_URL}#${new URLSearchParams(idOpts).toString()}`;
+			const idUrl = idOpts && `${IdEditorURL()}#${new URLSearchParams(idOpts).toString()}`;
 
 			return html`
 				<pnx-link-button

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

@@ -1,6 +1,8 @@
 // DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
 import maplibregl from "!maplibre-gl";
 
+import { NominatimBaseUrl, AdresseDataGouvBaseURL } from "./services";
+
 /**
  * Transforms a set of parameters into an URL-ready string
  * It also removes null/undefined values
@@ -94,7 +96,7 @@ export function forwardGeocodingNominatim(config) {
 		viewbox: config.bbox,
 	};
 
-	return fetch(`https://nominatim.openstreetmap.org/search?${geocoderParamsToURLString(params)}&format=geojson&polygon_geojson=1&addressdetails=1`)
+	return fetch(`${NominatimBaseUrl()}/search?${geocoderParamsToURLString(params)}&format=geojson&polygon_geojson=1&addressdetails=1`)
 		.then(res => res.json())
 		.then(res => {
 			const finalRes = { features: [] };
@@ -115,7 +117,7 @@ export function forwardGeocodingNominatim(config) {
 }
 
 export function reverseGeocodingNominatim(lat, lon) {
-	return fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&zoom=18&format=jsonv2`)
+	return fetch(`${NominatimBaseUrl()}/reverse?lat=${lat}&lon=${lon}&zoom=18&format=jsonv2`)
 		.then(res => res.json())
 		.then(res => nominatimAddressToPlaceName(res?.address));
 }
@@ -138,7 +140,7 @@ export function forwardGeocodingBAN(config) {
 	const toPlaceName = p => [p.name, p.district, p.city].filter(v => v).join(", ");
 	const placeTypeToZoom =  { "housenumber": 20, "street": 18, "locality": 15, "municipality": 12 };
 	
-	return fetch(`https://api-adresse.data.gouv.fr/search/?${geocoderParamsToURLString(params)}`)
+	return fetch(`${AdresseDataGouvBaseURL()}/search/?${geocoderParamsToURLString(params)}`)
 		.then(res => res.json())
 		.then(res => {
 			res.features = res.features.map(f => ({

package/src/utils/index.js

@@ -2,10 +2,11 @@ import * as geocoder from "./geocoder";
 import * as i18n from "./i18n";
 import * as map from "./map";
 import * as picture from "./picture";
+import * as services from "./services";
 import * as utils from "./utils";
 import * as widgets from "./widgets";
 
-export { geocoder, i18n, map, picture, utils, widgets };
+export { geocoder, i18n, map, picture, services, utils, widgets };
 export {default as API} from "./API";
 export {default as PhotoAdapter} from "./PhotoAdapter";
 export {default as URLHandler} from "./URLHandler";

package/src/utils/services.js

@@ -0,0 +1,57 @@
+/*
+ * Settings that may be useful to change for special cases (e.g. offline implementation).
+ * Most users will be fine with the defaults.
+ */
+
+
+/**
+ * OpenStreetMap iD editor URL
+ * @returns {string} The editor URL
+ */
+export function IdEditorURL() {
+	return "https://www.openstreetmap.org/edit?editor=id";
+}
+
+
+/* -----------------------------------------------------
+ * Internet speed tests
+ */
+
+/**
+ * Get the threshold fast internet speed value.
+ *
+ * @returns {number} the minimum speed in MBps for internet to be considered "fast"
+ */
+export function InternetFastThreshold() {
+	return 10;
+}
+
+/**
+ * Get the fast internet speed test file.
+ *
+ * @returns {string} URL for the file to use for internet speed testing.
+ */
+export function InternetFastTestFile() {
+	return "https://panoramax.openstreetmap.fr/images/05/ca/2c/98/0111-4baf-b6f3-587bb8847d2e.jpg";
+}
+
+
+/* -----------------------------------------------------
+ * Geocoding-related settings
+ */
+
+/**
+ * Get the Adresse Data Gouv FR base URL for geocoding API.
+ * @returns {string} The Adresse Data Gouv URL (must support /search calls).
+ */
+export function AdresseDataGouvBaseURL() {
+	return "https://api-adresse.data.gouv.fr";
+}
+
+/**
+ * Get the Nominatim base URL for geocoding API.
+ * @returns {string} The Nominatim URL (must support /search & /reverse calls).
+ */
+export function NominatimBaseUrl() {
+	return "https://nominatim.openstreetmap.org";
+}

package/src/utils/utils.js

@@ -1,3 +1,5 @@
+import { InternetFastTestFile, InternetFastThreshold } from "./services";
+
 export const BASE_PANORAMA_ID = "geovisio-fake-id-0";
 
 export const COLORS = {
@@ -245,9 +247,7 @@ export function isInIframe() {
 }
 
 
-const INTERNET_FAST_THRESHOLD = 10; // MBit/s
 const INTERNET_FAST_STORAGE = "pnx-internet-fast";
-const INTERNET_FAST_TESTFILE = "https://panoramax.openstreetmap.fr/images/05/ca/2c/98/0111-4baf-b6f3-587bb8847d2e.jpg";
 
 /**
  * Check if Internet connection is high-speed or not.
@@ -258,7 +258,7 @@ export function isInternetFast() {
 	// Check if downlink property is available
 	try {
 		const speed = navigator.connection.downlink; // MBit/s
-		return Promise.resolve(speed >= INTERNET_FAST_THRESHOLD);
+		return Promise.resolve(speed >= InternetFastThreshold());
 	}
 	// Fallback for other browsers
 	catch(e) {
@@ -271,14 +271,14 @@ export function isInternetFast() {
 
 			// Run download testing
 			const startTime = (new Date()).getTime();
-			return fetch(INTERNET_FAST_TESTFILE+"?nocache="+startTime)
+			return fetch(`${InternetFastTestFile()}?nocache=${startTime}`)
 				.then(async res => [res, await res.blob()])
 				.then(([res, blob]) => {
 					const size = parseInt(res.headers.get("Content-Length") || blob.size); // Bytes
 					const endTime = (new Date()).getTime();
 					const duration = (endTime - startTime) / 1000; // Transfer time in seconds
 					const speed = (size * 8 / 1024 / 1024) / duration; // MBits/s
-					const isFast = speed >= INTERNET_FAST_THRESHOLD;
+					const isFast = speed >= InternetFastThreshold();
 					sessionStorage.setItem(INTERNET_FAST_STORAGE, isFast ? "true" : "false");
 					return isFast;
 				})

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