@panoramax/web-viewer 3.2.2-develop-e0cee138 → 3.2.2-develop-5c3f5e00

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.2-develop-e0cee138",
+  "version": "3.2.2-develop-5c3f5e00",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/StandaloneMap.js

@@ -84,7 +84,7 @@ class StandaloneMap extends CoreView {
 		
 		this.map = new MyMap(this, this.mapContainer, this._options);
 		this.map.addControl(new NavigationControl({ showCompass: false }));
-		this.map.on("load", () => {
+		this.map.waitForEnoughMapLoaded().then(() => {
 			this.map.reloadLayersStyles();
 			this._loader.dismiss();
 		});

package/src/components/Loader.css

@@ -22,7 +22,7 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	gap: 40px;
+	gap: 20px;
 	align-items: center;
 	background: #37474F;
 	z-index: 9000;
@@ -53,4 +53,22 @@
 @keyframes rotating {
 	from { transform: rotate(0deg); }
 	to { transform: rotate(360deg); }
+}
+
+/* Call to action button */
+.gvs .gvs-loader .gvs-loader-cta {
+	border: none;
+	border-radius: 7px;
+	font-weight: 500;
+	font-size: 1.0em;
+	color: white;
+	background-color: #EF6C00;
+	cursor: pointer;
+	margin: 10px;
+	padding: 5px 30px;
+	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
+}
+
+.gvs .gvs-loader .gvs-loader-cta:hover {
+	background-color: #F57C00;
 }

package/src/components/Loader.js

@@ -83,7 +83,15 @@ export default class Loader {
 			this.container.children[0].src = LogoDead;
 			this.container.children[0].style.width = "200px";
 			this.container.children[0].style.animation = "unset";
-			let errHtml = `<small>${next ? this._parent._t.gvs.error_click : this._parent._t.gvs.error_retry}</small>`;
+
+			let errHtml;
+			if(next) {
+				errHtml = `<button class="gvs-loader-cta">${this._parent._t.gvs.error_click}</button>`;
+			}
+			else {
+				errHtml = `<small>${this._parent._t.gvs.error_retry}</small>`;
+			}
+
 			if(errMeaningful) { errHtml = errMeaningful + "<br />" + errHtml; }
 			this.container.children[1].innerHTML = `${this._parent._t.gvs.error}<br />${errHtml}`;
 			if(next) {

package/src/components/Map.js

@@ -110,11 +110,16 @@ export default class Map extends maplibregl.Map {
 			}
 		}, 15000);
 
-		this.on("load", async () => {
-			await this.setVisibleUsers(this._parent._options.users);
-			this.reloadLayersStyles();
-			this.resize();
-		});
+		this.waitForEnoughMapLoaded().then(async () => await this._postLoad());
+	}
+
+	/**
+	 * @private
+	 */
+	async _postLoad() {
+		this.resize();
+		await this.setVisibleUsers(this._parent._options.users);
+		this.reloadLayersStyles();
 	}
 
 	/**
@@ -132,6 +137,54 @@ export default class Map extends maplibregl.Map {
 		delete this._userLayers;
 	}
 
+	/**
+	 * Helper to know when enough map background and Panoramax tiles are loaded for a proper display.
+	 * @returns {Promise} Resolves when enough is loaded
+	 */
+	waitForEnoughMapLoaded() {
+		return new Promise((resolve) => {
+			let nbBgTiles = 0;
+			let nbFgTiles = 0;
+			let nbLoadedBgTiles = 0;
+			let nbLoadedFgTiles = 0;
+
+			const onSourceDataLoading = e => {
+				if(e.dataType === "source" && e.tile) {
+					if(e.sourceId.startsWith("geovisio")) {
+						nbFgTiles++;
+					}
+					else {
+						nbBgTiles++;
+					}
+				}
+			};
+			const onSourceData = e => {
+				if(e.dataType === "source" && e.tile) {
+					if(e.sourceId.startsWith("geovisio")) {
+						nbLoadedFgTiles++;
+						if(e.isSourceLoaded) { nbLoadedFgTiles = nbFgTiles; }
+					}
+					else {
+						nbLoadedBgTiles++;
+						if(e.isSourceLoaded) { nbLoadedBgTiles = nbBgTiles; }
+					}
+				}
+				checkEnoughLoaded();
+			};
+
+			const checkEnoughLoaded = () => {
+				if(nbLoadedBgTiles / nbBgTiles >= 0.75 && nbLoadedFgTiles / nbFgTiles >= 0.75) {
+					this.off("sourcedata", onSourceData);
+					this.off("sourcedataloading", onSourceDataLoading);
+					resolve();
+				}
+			};
+
+			this.on("sourcedataloading", onSourceDataLoading);
+			this.on("sourcedata", onSourceData);
+		});
+	}
+
 	/**
 	 * Sets map view based on returned API bbox (if no precise option given by user).
 	 * @private
@@ -148,7 +201,7 @@ export default class Map extends maplibregl.Map {
 					try {
 						bbox = new maplibregl.LngLatBounds(bbox);
 						if(this.loaded()) { this.fitBounds(bbox, { "animate": false }); }
-						else { this.on("load", () => this.fitBounds(bbox, { "animate": false })); }
+						else { this.waitForEnoughMapLoaded().then(() => this.fitBounds(bbox, { "animate": false })); }
 					}
 					catch(e) {
 						console.warn("Received invalid bbox: "+bbox);

package/src/translations/en.json

@@ -42,7 +42,7 @@
         "copy": "Copy",
         "copied": "Copied",
         "error": "We have a problem…",
-        "error_click": "Click to continue",
+        "error_click": "Continue",
         "error_retry": "Please retry later",
         "sequence_next": "Next picture in sequence",
         "sequence_play": "Play along this sequence",

package/src/translations/es.json

@@ -95,7 +95,7 @@
         "sequence_play": "Reproducir esta secuencia",
         "sequence_pause": "Pausar la secuencia",
         "sequence_prev": "Imagen anterior de la secuencia",
-        "error_click": "Haz click para continuar",
+        "error_click": "Continuar",
         "error_retry": "Por favor, inténtalo más tarde",
         "error_psv": "El visor de fotos esféricas no se carga correctamente",
         "error_pic": "No se encuentra la imagen que queríamos",

package/src/translations/fr.json

@@ -42,7 +42,7 @@
         "copy": "Copier",
         "copied": "Copié",
         "error": "On a un problème…",
-        "error_click": "Cliquez pour continuer",
+        "error_click": "Continuer",
         "error_retry": "Merci de réessayer plus tard",
         "sequence_next": "Photo suivante dans la séquence",
         "sequence_play": "Parcourir cette séquence",

package/src/translations/it.json

@@ -26,7 +26,7 @@
         "copy": "Copia",
         "copied": "Copiato",
         "error": "Abbiamo un problema…",
-        "error_click": "Clicca per continuare",
+        "error_click": "Continuare",
         "error_retry": "Riprovare più tardi",
         "sequence_play": "Riproduci questa sequenza",
         "sequence_pause": "Pausa la sequenza",

package/tests/components/Map.test.js

@@ -143,13 +143,13 @@ describe("setBackground", () => {
 });
 
 describe("getVisibleUsers", () => {
-	it("works", () => {
+	it("works", async () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const m = new Map(p, c);
 		m.getSource = () => true;
 		m.setPaintProperty = jest.fn();
-		m._fire("load");
+		await m._postLoad();
 		m.getLayoutProperty = () => "visible";
 		expect(m.getVisibleUsers()).toStrictEqual(["geovisio"]);
 	});
@@ -177,14 +177,14 @@ describe("setVisibleUsers", () => {
 		m.getLayer = () => true;
 		let cptlCount = 0;
 		let deCalls = [];
-		return new Promise(resolve => {
+		return new Promise(async (resolve) => {
 			p.dispatchEvent = (e) => {
 				deCalls.push(e);
 				if(e.type == "map:users-changed") {
 					resolve();
 				}
 			};
-			m._fire("load");
+			await m._postLoad();
 		}).then(() => {
 			m.setLayoutProperty = jest.fn();
 			m._createPicturesTilesLayer = () => { cptlCount++; return Promise.resolve(); };
@@ -199,7 +199,7 @@ describe("setVisibleUsers", () => {
 });
 
 describe("filterUserLayersContent", () => {
-	it("works", () => {
+	it("works", async () => {
 		const p = createParent();
 		p._options.users = ["blabla", "geovisio"];
 		const c = document.createElement("div");
@@ -207,7 +207,7 @@ describe("filterUserLayersContent", () => {
 		m.getSource = () => true;
 		m.setPaintProperty = jest.fn();
 		m.getLayer = () => true;
-		m._fire("load");
+		await m._postLoad();
 		m.setFilter = jest.fn();
 		m.filterUserLayersContent("pictures", [["test", "true"]]);
 		expect(m.setFilter.mock.calls).toMatchSnapshot();
@@ -215,14 +215,14 @@ describe("filterUserLayersContent", () => {
 });
 
 describe("reloadLayersStyles", () => {
-	it("works", () => {
+	it("works", async () => {
 		const p = createParent();
 		p._options.users = ["blabla", "geovisio"];
 		const c = document.createElement("div");
 		const m = new Map(p, c);
 		m.getSource = () => true;
 		m.setPaintProperty = jest.fn();
-		m._fire("load");
+		await m._postLoad();
 		m.setLayoutProperty = jest.fn();
 		m.setPaintProperty = jest.fn();
 		m.reloadLayersStyles();