@panoramax/web-viewer 3.1.0-develop-428bc81e → 3.1.0-develop-088b8c49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.1.0-develop-428bc81e",
+  "version": "3.1.0-develop-088b8c49",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -96,8 +96,8 @@
     "@photo-sphere-viewer/markers-plugin": "5.10.1",
     "@photo-sphere-viewer/virtual-tour-plugin": "5.10.1",
     "documentation": "^14.0.1",
-    "maplibre-gl": "^3.6.2",
-    "pmtiles": "^2.11.0"
+    "maplibre-gl": "^4.7.1",
+    "pmtiles": "^3.2.0"
   },
   "eslintConfig": {
     "env": {

package/src/components/Map.js

@@ -96,6 +96,13 @@ export default class Map extends maplibregl.Map {
 		// Parent selection
 		this._parent.addEventListener("select", this.reloadLayersStyles.bind(this));
 
+		// Timeout for initial loading
+		setTimeout(() => {
+			if(!this.loaded() && this._parent._loader.isVisible()) {
+				this._parent._loader.dismiss({}, this._parent._t.map.slow_loading, () => {});
+			}
+		}, 15000);
+
 		this.on("load", async () => {
 			await this.setVisibleUsers(this._parent._options.users);
 			this.reloadLayersStyles();
@@ -291,10 +298,10 @@ export default class Map extends maplibregl.Map {
 	filterUserLayersContent(dataType, filter) {
 		[...this._userLayers].forEach(l => {
 			this.setFilter(getUserLayerId(l, dataType), filter);
-			if(dataType === "sequences") {
+			if(dataType === "sequences" && this.getLayer(getUserLayerId(l, "sequences_plus"))) {
 				this.setFilter(getUserLayerId(l, "sequences_plus"), filter);
 			}
-			if(dataType === "pictures") {
+			if(dataType === "pictures" && this.getLayer(getUserLayerId(l, "pictures_symbols"))) {
 				this.setFilter(getUserLayerId(l, "pictures_symbols"), filter);
 			}
 		});
@@ -362,7 +369,7 @@ export default class Map extends maplibregl.Map {
 			Object.entries(style.sources).forEach(([sId, s]) => this.addSource(sId, s));
 			style.layers = style.layers || [];
 			const layers = style.layers.concat(getMissingLayerStyles(style.sources, style.layers));
-			layers.forEach(l => this.addLayer(l, firstLabelLayerId?.id));
+			layers.filter(l => Object.keys(l).length > 0).forEach(l => this.addLayer(l, firstLabelLayerId?.id));
 		}
 
 		// Map interaction events
@@ -609,7 +616,7 @@ export default class Map extends maplibregl.Map {
 				if(thumbUrl) {
 					let content = document.createElement("img");
 					content.classList.add("gvs-map-thumb");
-					content.alt = this._parent._t.thumbnail;
+					content.alt = this._parent._t.map.thumbnail;
 					let img = new Image();
 					img.src = thumbUrl;
 
@@ -634,7 +641,7 @@ export default class Map extends maplibregl.Map {
 					}
 				}
 				else {
-					this._picPopup.setHTML(`<i>${this._parent._t.no_thumbnail}</i>`);
+					this._picPopup.setHTML(`<i>${this._parent._t.map.no_thumbnail}</i>`);
 				}
 			}
 		};

package/src/translations/en.json

@@ -161,6 +161,7 @@
         "loading": "Loading…",
         "thumbnail": "Thumbnail of hovered picture",
         "no_thumbnail": "No thumbnail",
-        "not_public": "Not publicly visible"
+        "not_public": "Not publicly visible",
+        "slow_loading": "Map is slow to load and could appear broken"
     }
 }

package/src/translations/fr.json

@@ -161,6 +161,7 @@
         "loading": "Chargement…",
         "thumbnail": "Miniature de la photo survolée",
         "no_thumbnail": "Pas de miniature",
-        "not_public": "Masqué au public"
+        "not_public": "Masqué au public",
+        "slow_loading": "La carte est longue à charger et pourrait apparaître cassée"
     }
 }

package/src/utils/API.js

@@ -285,7 +285,9 @@ export default class API {
 	 * @returns {object} The fetch options
 	 */
 	_getFetchOptions() {
-		return Object.assign({}, this._fetchOpts);
+		return Object.assign({
+			signal: AbortSignal.timeout(15000)
+		}, this._fetchOpts);
 	}
 
 	/**
@@ -295,8 +297,10 @@ export default class API {
 	 * @returns {function} The RequestTransformFunction
 	 */
 	_getMapRequestTransform() {
+		const fetchOpts = this._getFetchOptions();
+		delete fetchOpts.signal;
 		// Only if tiles endpoint is enabled and fetch options set
-		if(Object.keys(this._getFetchOptions()).length > 0) {
+		if(Object.keys(fetchOpts).length > 0) {
 			return (url) => {
 				// As MapLibre will use this function for all its calls
 				// We must make sure fetch options are sent only for
@@ -304,7 +308,7 @@ export default class API {
 				if(url.startsWith(this._endpoint)) {
 					return {
 						url,
-						...this._getFetchOptions()
+						...fetchOpts
 					};
 				}
 			};

package/src/utils/Utils.js

@@ -338,7 +338,7 @@ export function apiFeatureToPSVNode(f, t, fastInternet=false, customLinkFilter=n
 	let panorama;
 
 	// Cropped panorama
-	if(Object.keys(croppedPanoData).length > 0) {
+	if(!tileUrl && Object.keys(croppedPanoData).length > 0) {
 		panorama = {
 			baseUrl: fastInternet ? hdUrl : baseUrl,
 			origBaseUrl: fastInternet ? hdUrl : baseUrl,

package/src/viewer/Widgets.js

@@ -723,6 +723,8 @@ export default class Widgets {
 		const overridenGeocoder = query => {
 			const rgxCoords = /([-+]?\d{1,2}\.\d+),\s*([-+]?\d{1,3}\.\d+)/;
 			const coordsMatch = query.match(rgxCoords);
+			const rgxUuid = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+			const uuidMatch = query.match(rgxUuid);
 		
 			if(coordsMatch) {
 				const lat = parseFloat(coordsMatch[1]);
@@ -732,7 +734,12 @@ export default class Widgets {
 					zoom: 16,
 				});
 				return Promise.resolve(true);
-			} else {
+			}
+			else if(uuidMatch) {
+				this._viewer.select(null, query);
+				return Promise.resolve(true);
+			}
+			else {
 				return this._viewer.map.geocoder({
 					query,
 					limit: 3,

package/tests/Editor.test.js

@@ -18,6 +18,7 @@ jest.mock("../src/components/Photo", () => class {
 });
 
 jest.mock("../src/components/Map", () => class {});
+global.AbortSignal = { timeout: jest.fn() };
 
 const API_URL = "http://localhost:5000/api/search";
 

package/tests/StandaloneMap.test.js

@@ -5,6 +5,7 @@ jest.mock("maplibre-gl", () => ({
 }));
 
 jest.mock("../src/components/Map", () => class {});
+global.AbortSignal = { timeout: jest.fn() };
 
 const API_URL = "http://localhost:5000/api/search";
 

package/tests/Viewer.test.js

@@ -19,6 +19,8 @@ jest.mock("maplibre-gl", () => ({
 	Map: class {},
 }));
 
+global.AbortSignal = { timeout: jest.fn() };
+
 const API_URL = "http://localhost:5000/api/search";
 
 

package/tests/components/CoreView.test.js

@@ -7,6 +7,7 @@ jest.mock("maplibre-gl", () => ({
 }));
 
 global.console = { info: jest.fn() };
+global.AbortSignal = { timeout: jest.fn() };
 
 describe("constructor", () => {
 	it("works with JS element", () => {

package/tests/components/Map.test.js

@@ -206,6 +206,7 @@ describe("filterUserLayersContent", () => {
 		const m = new Map(p, c);
 		m.getSource = () => true;
 		m.setPaintProperty = jest.fn();
+		m.getLayer = () => true;
 		m._fire("load");
 		m.setFilter = jest.fn();
 		m.filterUserLayersContent("pictures", [["test", "true"]]);

package/tests/utils/API.test.js

@@ -3,6 +3,7 @@ import API from "../../src/utils/API";
 jest.mock("maplibre-gl", () => ({
 	addProtocol: jest.fn(),
 }));
+global.AbortSignal = { timeout: jest.fn() };
 
 const ENDPOINT = "https://panoramax.ign.fr/api";
 const VALID_LANDING = {