@panoramax/web-viewer 3.1.1-develop-95d65b81 → 3.1.1-develop-38b64ee6

package/docs/05_Compatibility.md

@@ -83,6 +83,7 @@ A supplementary layer _grid_ can be made available for low-zoom overview:
 
 - Available on zoom levels < 6
 - Available properties: `id` (grid cell ID), `nb_pictures` (amount of pictures), `coef` (value from 0 to 1, relative quantity of available pictures)
+- Optional properties: `nb_360_pictures`, `coef_360_pictures`, `nb_flat_pictures`, `coef_flat_pictures` (similar to `nb_pictures` and `coef` but separated by picture type)
 
 ### Labels translation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.1.1-develop-95d65b81",
+  "version": "3.1.1-develop-38b64ee6",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/Viewer.js

@@ -240,6 +240,13 @@ class Viewer extends CoreView {
 					}).catch(e => console.warn("Error when looking up for user names", e));
 				}
 			}
+
+			// Dismiss popup with Escape
+			document.addEventListener("keyup", e => {
+				if(e.key === "Escape" && !this.popupContainer.classList.contains("gvs-hidden")) {
+					this.setPopup(false);
+				}
+			});
 		};
 
 		this._api.onceReady().then(() => {
@@ -1103,6 +1110,7 @@ class Viewer extends CoreView {
 	setFilters(filters, skipZoomIn = false) {
 		let mapSeqFilters = [];
 		let mapPicFilters = [];
+		let reloadMapStyle = false;
 		this._mapFilters = {};
 
 		if(filters.minDate && filters.minDate !== "") {
@@ -1128,6 +1136,9 @@ class Viewer extends CoreView {
 			mapSeqFilters.push(["==", ["get", "type"], filters.type]);
 			mapPicFilters.push(["==", ["get", "type"], filters.type]);
 		}
+		if(this.map?._hasGridStats()) {
+			reloadMapStyle = true;
+		}
 
 		if(filters.camera && filters.camera !== "") {
 			this._mapFilters.camera = filters.camera;
@@ -1151,7 +1162,7 @@ class Viewer extends CoreView {
 			this._mapFilters.theme = filters.theme;
 			if(this.map) {
 				this._mapTheme = this._mapFilters.theme;
-				this.map.reloadLayersStyles();
+				reloadMapStyle = true;
 			}
 		}
 
@@ -1170,6 +1181,10 @@ class Viewer extends CoreView {
 		}
 
 		if(this.map) {
+			if(reloadMapStyle) {
+				this.map.reloadLayersStyles();
+			}
+
 			const allUsers = this.map.getVisibleUsers().includes("geovisio");
 			if(mapSeqFilters && allUsers) {
 				mapSeqFilters = ["step", ["zoom"],
@@ -1189,6 +1204,7 @@ class Viewer extends CoreView {
 				)
 				&& allUsers
 				&& this.map.getZoom() < 7
+				&& !this.map._hasGridStats()
 			) {
 				this.map.easeTo({ zoom: 7 });
 			}

package/src/components/Map.js

@@ -2,7 +2,7 @@ import "./Map.css";
 import {
 	forwardGeocodingBAN, forwardGeocodingNominatim, VECTOR_STYLES,
 	TILES_PICTURES_ZOOM, getThumbGif, RASTER_LAYER_ID, combineStyles,
-	getMissingLayerStyles, isLabelLayer, getUserLayerId, getUserSourceId,
+	getMissingLayerStyles, isLabelLayer, getUserLayerId, getUserSourceId, switchCoefValue,
 } from "../utils/Map";
 import { COLORS } from "../utils/Utils";
 import MarkerBaseSVG from "../img/marker.svg";
@@ -188,7 +188,7 @@ export default class Map extends maplibregl.Map {
 	}
 
 	/**
-	 * Is QualityScore available in vector tiles ?
+	 * Is Quality Score available in vector tiles ?
 	 * @private
 	 */
 	_hasQualityScore() {
@@ -196,6 +196,16 @@ export default class Map extends maplibregl.Map {
 		return fields?.pictures?.includes("gps_accuracy") && fields?.pictures?.includes("h_pixel_density");
 	}
 
+	/**
+	 * Are 360/flat pictures stats available in vector tiles for grid layer ?
+	 * @private
+	 */
+	_hasGridStats() {
+		const fields = this.getStyle()?.metadata?.["panoramax:fields"] || {};
+		return fields?.grid?.includes("nb_360_pictures") && fields?.grid?.includes("nb_flat_pictures")
+			&& fields?.grid?.includes("coef_360_pictures") && fields?.grid?.includes("coef_flat_pictures");
+	}
+
 	/**
 	 * Force refresh of vector tiles data
 	 */
@@ -361,6 +371,25 @@ export default class Map extends maplibregl.Map {
 		["pictures", "pictures_symbols", "sequences"].forEach(l => {
 			updateStyle(l, this._getLayerStyleProperties(l));
 		});
+
+		// Also handle the grid stats
+		if(this._hasGridStats() && this._parent?._mapFilters) {
+			let newType = "coef";
+			if(this._parent._mapFilters?.type) {
+				newType = this._parent._mapFilters.type == "flat" ? "coef_flat_pictures" : "coef_360_pictures";
+			}
+			this.getStyle().layers
+				.filter(l => l.id.endsWith("_grid"))
+				.forEach(l => {
+					const newl = switchCoefValue(l, newType);
+					for(let p in newl.layout) {
+						this.setLayoutProperty(l.id, p, newl.layout[p]);
+					}
+					for(let p in newl.paint) {
+						this.setPaintProperty(l.id, p, newl.paint[p]);
+					}
+				});
+		}
 	}
 
 	/**

package/src/utils/Map.js

@@ -340,7 +340,6 @@ export function getMissingLayerStyles(sources, layers) {
 		l.layout = Object.assign(l.layout || {}, VECTOR_STYLES.PICTURES.layout);
 	});
 
-
 	return newLayers;
 }
 
@@ -365,6 +364,30 @@ export function getUserSourceId(userId) {
 	return userId === "geovisio" ? "geovisio" : "geovisio_"+userId;
 }
 
+/**
+ * Switches used coef value in MapLibre style JSON expression
+ * @param {*} expr The MapLibre style expression
+ * @param {string} newCoefVal The new coef value to use
+ * @returns {*} The switched expression
+ * @private
+ */
+export function switchCoefValue(expr, newCoefVal) {
+	if(Array.isArray(expr)) {
+		return expr.map(v => switchCoefValue(v, newCoefVal));
+	}
+	else if(typeof expr === "object" && expr !== null) {
+		const newExpr = {};
+		for (const key in expr) {
+			newExpr[key] = switchCoefValue(expr[key], newCoefVal);
+		}
+		return newExpr;
+	}
+	else if(typeof expr === "string" && expr.startsWith("coef")) {
+		return newCoefVal;
+	}
+	return expr;
+}
+
 /**
  * Transforms a set of parameters into an URL-ready string
  * It also removes null/undefined values

package/tests/Viewer.test.js

@@ -344,6 +344,7 @@ describe("setFilters", () => {
 			reloadLayersStyles: jest.fn(),
 			filterUserLayersContent: jest.fn(),
 			getVisibleUsers: () => ["geovisio"],
+			_hasGridStats: () => false,
 		};
 		v.dispatchEvent = jest.fn();
 		Date.prototype.getDate = () => 8;

package/tests/utils/Map.test.js

@@ -50,6 +50,14 @@ describe("getUserSourceId", () => {
 	});
 });
 
+describe("switchCoefValue", () => {
+	it("works", () => {
+		const l = {id: "bla", paint: { "circle-radius": ["bla", ["get", "coef"]]}, layout: {"circle-sort": "coef"}};
+		const res = Map.switchCoefValue(l, "coef_360");
+		expect(res).toEqual({id: "bla", paint: { "circle-radius": ["bla", ["get", "coef_360"]]}, layout: {"circle-sort": "coef_360"}})
+	});
+});
+
 describe("geocoderParamsToURLString", () => {
 	it("works", () => {
 		const p = { bla: "blorg", you: 1 };