@panoramax/web-viewer 3.2.2-develop-43e56902 → 3.2.2-develop-e0cee138

package/package.json

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

package/public/editor.html

@@ -33,10 +33,10 @@
   window.onload = () => {
     editor = new Panoramax.Editor(
       "editor",
-      "https://api.panoramax.xyz/api",
+      "https://panoramax.openstreetmap.fr/api",
       {
-        selectedSequence: "561a5056-78a4-499d-9138-26b259f0765c",
-        selectedPicture: "b9c51504-b25c-40da-bb47-e696b93233fc",
+        selectedSequence: "ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8",
+        selectedPicture:  "329af5c6-4761-4a6d-9c1e-674fd6daa8b6",
         background: "aerial",
         raster: {
           type: "raster",

package/src/Editor.js

@@ -59,14 +59,11 @@ export default class Editor extends CoreView {
 					raster: options.raster,
 					background: options.background,
 					supplementaryStyle: this._createMapStyle(),
+					zoom: 15, // Hack to avoid _initMapPosition call
 				});
 				linkMapAndPhoto(this);
 				this._loadSequence();
 				this.map.once("load", () => {
-					this.map.setPaintProperty("geovisio_editor_sequences", "line-color", this.map._getLayerColorStyle("sequences"));
-					this.map.setPaintProperty("geovisio_editor_pictures", "circle-color", this.map._getLayerColorStyle("pictures"));
-					this.map.setLayoutProperty("geovisio_editor_sequences", "visibility", "visible");
-					this.map.setLayoutProperty("geovisio_editor_pictures", "visibility", "visible");
 					if(options.raster) { this._addMapBackgroundWidget(); }
 					this._bindPicturesEvents();
 				});
@@ -153,6 +150,15 @@ export default class Editor extends CoreView {
 	 */
 	_loadSequence() {
 		return this._api.getSequenceItems(this._selectedSeqId).then(seq => {
+			// Hide loader after source load
+			this.map.once("sourcedata", () => {
+				this.map.setPaintProperty("geovisio_editor_sequences", "line-color", this.map._getLayerColorStyle("sequences"));
+				this.map.setPaintProperty("geovisio_editor_pictures", "circle-color", this.map._getLayerColorStyle("pictures"));
+				this.map.setLayoutProperty("geovisio_editor_sequences", "visibility", "visible");
+				this.map.setLayoutProperty("geovisio_editor_pictures", "visibility", "visible");
+				this.map.once("styledata", () => this._loader.dismiss());
+			});
+
 			// Create data source
 			this._sequenceData = seq.features;
 			this.map.getSource("geovisio_editor_sequences").setData({
@@ -177,40 +183,34 @@ export default class Editor extends CoreView {
 				]
 			});
 
-			const onMapLoad = () => {
-				// Select picture if any
-				if(this._selectedPicId) {
-					const pic = seq.features.find(p => p.id === this._selectedPicId);
-					if(pic) {
-						this.select(this._selectedSeqId, this._selectedPicId, true);
-						this.map.jumpTo({ center: pic.geometry.coordinates, zoom: 18 });
-					}
-					else {
-						console.log("Picture with ID", pic, "was not found");
-					}
+			// Select picture if any
+			if(this._selectedPicId) {
+				const pic = seq.features.find(p => p.id === this._selectedPicId);
+				if(pic) {
+					this.select(this._selectedSeqId, this._selectedPicId, true);
+					this.map.jumpTo({ center: pic.geometry.coordinates, zoom: 18 });
 				}
-				// Show area of sequence otherwise
 				else {
-					const bbox = [
-						...seq.features[0].geometry.coordinates,
-						...seq.features[0].geometry.coordinates
-					];
-
-					for(let i=1; i < seq.features.length; i++) {
-						const c = seq.features[i].geometry.coordinates;
-						if(c[0] < bbox[0]) { bbox[0] = c[0]; }
-						if(c[1] < bbox[1]) { bbox[1] = c[1]; }
-						if(c[0] > bbox[2]) { bbox[2] = c[0]; }
-						if(c[1] > bbox[3]) { bbox[3] = c[1]; }
-					}
-
-					this.map.fitBounds(bbox, {animate: false});
+					console.log("Picture with ID", pic, "was not found");
+				}
+			}
+			// Show area of sequence otherwise
+			else {
+				const bbox = [
+					...seq.features[0].geometry.coordinates,
+					...seq.features[0].geometry.coordinates
+				];
+
+				for(let i=1; i < seq.features.length; i++) {
+					const c = seq.features[i].geometry.coordinates;
+					if(c[0] < bbox[0]) { bbox[0] = c[0]; }
+					if(c[1] < bbox[1]) { bbox[1] = c[1]; }
+					if(c[0] > bbox[2]) { bbox[2] = c[0]; }
+					if(c[1] > bbox[3]) { bbox[3] = c[1]; }
 				}
-				this._loader.dismiss();
-			};
 
-			if(this.map.loaded()) { onMapLoad(); }
-			else { this.map.once("load", onMapLoad); }
+				this.map.fitBounds(bbox, {animate: false});
+			}
 		}).catch(e => this._loader.dismiss(e, this._t.gvs.error_api));
 	}
 

package/src/utils/API.js

@@ -336,13 +336,29 @@ export default class API {
 	 * Get sequence GeoJSON representation
 	 * 
 	 * @param {string} seqId The sequence ID
+	 * @param {string} [next] The next link URL (only for internals)
+	 * @param {object} [data] The previous dataset (only for internals)
 	 * @returns {Promise} Resolves on sequence GeoJSON
 	 */
-	async getSequenceItems(seqId) {
+	async getSequenceItems(seqId, next = null, data = null) {
 		if(!this.isReady()) { throw new Error("API is not ready to use"); }
 		try {
 			API.isIdValid(seqId);
-			return fetch(`${this._endpoints.collections}/${seqId}/items`, this._getFetchOptions()).then(res => res.json());
+			return fetch(
+				next || `${this._endpoints.collections}/${seqId}/items`,
+				this._getFetchOptions()
+			)
+				.then(res => res.json())
+				.then(res => {
+					// Merge previous data with current page
+					let nextData = res;
+					if(data) { nextData.features = data.features.concat(nextData.features); }
+
+					// Handle pagination for next link
+					const nextLink = res.links.find(l => l.rel === "next");
+					if(nextLink) { return this.getSequenceItems(seqId, nextLink.href, nextData); }
+					else { return nextData; }
+				});
 		}
 		catch(e) {
 			return Promise.reject(e);

package/src/viewer/URLHash.js

@@ -277,6 +277,7 @@ export default class URLHash extends EventTarget {
 
 		// Change focus
 		if(vals.focus && ["map", "pic"].includes(vals.focus)) {
+			this._viewer.setPopup(false);
 			this._viewer.setFocus(vals.focus);
 		}
 		if(vals.focus && vals.focus == "meta") {
@@ -434,11 +435,18 @@ export default class URLHash extends EventTarget {
 			const prevPic = this._getCurrentHash().pic || "";
 			const nextPic = this._viewer?.psv?.getPictureMetadata()?.id || "";
 
+			const prevFocus = this._getCurrentHash().focus || "";
+			const nextFocus = nextUrl.hash.includes("focus=meta") ? "meta" : (nextUrl.hash.includes("focus=map") ? "map" : "pic");
+
 			try {
 				// If different pic, add entry in browser history
 				if(prevPic != nextPic) {
 					window.history.pushState(window.history.state, null, nextUrl.href);
 				}
+				// If metadata popup is open, come back to pic/map
+				else if(prevFocus != nextFocus && nextFocus == "meta") {
+					window.history.pushState(window.history.state, null, nextUrl.href);
+				}
 				// If same pic, just update viewer params
 				else {
 					window.history.replaceState(window.history.state, null, nextUrl.href);

package/tests/viewer/URLHash.test.js

@@ -319,6 +319,7 @@ describe("_onHashChange", () => {
 			select: jest.fn(),
 			setFocus: jest.fn(),
 			setFilters: jest.fn(),
+			setPopup: jest.fn(),
 		};
 		const uh = new URLHash(v);
 		uh._getCurrentHash = () => ({
@@ -383,6 +384,7 @@ describe("_onHashChange", () => {
 			select: jest.fn(),
 			setFocus: jest.fn(),
 			setFilters: jest.fn(),
+			setPopup: jest.fn(),
 		};
 		const uh = new URLHash(v);
 		uh._getCurrentHash = () => ({
@@ -414,6 +416,7 @@ describe("_onHashChange", () => {
 			select: jest.fn(),
 			setFocus: jest.fn(),
 			setFilters: jest.fn(),
+			setPopup: jest.fn(),
 		};
 		const uh = new URLHash(v);
 		uh._getCurrentHash = () => ({