@panoramax/web-viewer 3.1.1 → 3.2.0-develop-8f79d734

package/src/utils/Map.js

@@ -1,7 +1,7 @@
 // DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
 import maplibregl from "!maplibre-gl";
 import LoaderImg from "../img/marker.svg";
-import { COLORS } from "./Utils";
+import { COLORS, QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_RES_360_VALUES, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_POND_RES, QUALITYSCORE_POND_GPS } from "./Utils";
 import { autoDetectLocale } from "./I18n";
 
 export const DEFAULT_TILES = "https://panoramax.openstreetmap.fr/pmtiles/basic.json";
@@ -63,6 +63,24 @@ export const VECTOR_STYLES = {
 	}
 };
 
+
+// See MapLibre docs for explanation of expressions magic: https://maplibre.org/maplibre-style-spec/expressions/
+const MAP_EXPR_QUALITYSCORE_RES_360  = ["case", ["has", "h_pixel_density"], ["step", ["get", "h_pixel_density"], ...QUALITYSCORE_RES_360_VALUES], 1];
+const MAP_EXPR_QUALITYSCORE_RES_FLAT = ["case", ["has", "h_pixel_density"], ["step", ["get", "h_pixel_density"], ...QUALITYSCORE_RES_FLAT_VALUES], 1];
+const MAP_EXPR_QUALITYSCORE_RES = [
+	"case", ["==", ["get", "type"], "equirectangular"],
+	MAP_EXPR_QUALITYSCORE_RES_360, MAP_EXPR_QUALITYSCORE_RES_FLAT
+];
+const MAP_EXPR_QUALITYSCORE_GPS = ["case", ["has", "gps_accuracy"], ["step", ["get", "gps_accuracy"], ...QUALITYSCORE_GPS_VALUES], 1];
+// Note: score is also calculated in widgets/popup code
+export const MAP_EXPR_QUALITYSCORE = [
+	"round",
+	["+",
+		["*", MAP_EXPR_QUALITYSCORE_RES, QUALITYSCORE_POND_RES],
+		["*", MAP_EXPR_QUALITYSCORE_GPS, QUALITYSCORE_POND_GPS]]
+];
+
+
 /**
  * Get the GIF shown while thumbnail loads
  * @param {object} lang Translations
@@ -109,10 +127,12 @@ export function combineStyles(parent, options) {
 	
 	// Complete styles
 	style.layers = style.layers.concat(getMissingLayerStyles(style.sources, style.layers));
+	if(!style.metadata) { style.metadata = {}; }
 
 	// Complementary style
 	if(options.supplementaryStyle) {
 		Object.assign(style.sources, options.supplementaryStyle.sources || {});
+		Object.assign(style.metadata, options.supplementaryStyle.metadata || {});
 		style.layers = style.layers.concat(options.supplementaryStyle.layers || []);
 	}
 
@@ -155,13 +175,15 @@ export function combineStyles(parent, options) {
 	});
 
 	// TODO : remove override once available in default Panoramax style
-	if(!style.metadata["panoramax:locales"]) {
+	if(!style.metadata?.["panoramax:locales"]) {
 		style.metadata["panoramax:locales"] = ["fr", "en", "de", "es", "ru", "pt", "zh", "hi", "latin"];
 	}
 
 	// Override labels to use appropriate language
 	if(style.metadata["panoramax:locales"]) {
-		const prefLang = autoDetectLocale(style.metadata["panoramax:locales"], "latin");
+		let prefLang = parent._options.lang || autoDetectLocale(style.metadata["panoramax:locales"], "latin");
+		if(prefLang.includes("-")) { prefLang = prefLang.split("-")[0]; }
+		if(prefLang.includes("_")) { prefLang = prefLang.split("_")[0]; }
 		style.layers.forEach(l => {
 			if(isLabelLayer(l) && l.layout["text-field"].includes("name:latin")) {
 				l.layout["text-field"] = [
@@ -179,18 +201,19 @@ export function combineStyles(parent, options) {
 	let capitalLayer = style.layers.find(l => l.id == "place_label_capital");
 	if(citiesLayer && !capitalLayer) {
 		// Create capital layer from original city style
+		citiesLayer.paint = {
+			"text-color": "hsl(0, 0%, 0%)",
+			"text-halo-blur": 0,
+			"text-halo-color": "hsla(0, 0%, 100%, 1)",
+			"text-halo-width": 3,
+		};
+		citiesLayer.layout["text-letter-spacing"] = 0.1;
 		capitalLayer = JSON.parse(JSON.stringify(citiesLayer));
 		capitalLayer.id = "place_label_capital";
 		capitalLayer.filter.push(["<=", "capital", 2]);
 
 		// Edit original city to make it less import
 		citiesLayer.filter.push([">", "capital", 2]);
-		citiesLayer.paint = {
-			"text-color": "hsl(0,0%,15%)",
-			"text-halo-blur": 0.5,
-			"text-halo-color": "hsl(0,0%,100%)",
-			"text-halo-width": 0.8,
-		};
 		style.layers.push(capitalLayer);
 	}
 
@@ -317,7 +340,6 @@ export function getMissingLayerStyles(sources, layers) {
 		l.layout = Object.assign(l.layout || {}, VECTOR_STYLES.PICTURES.layout);
 	});
 
-
 	return newLayers;
 }
 
@@ -342,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/src/utils/Utils.js

@@ -23,9 +23,45 @@ export const COLORS_HEX = Object.fromEntries(Object.entries(COLORS).map(e => {
 	return e;
 }));
 
+export const QUALITYSCORE_VALUES = [
+	{ color: "#007f4e", label: "A" },
+	{ color: "#72b043", label: "B" },
+	{ color: "#b5be2f", label: "C" },
+	{ color: "#f8cc1b", label: "D" },
+	{ color: "#f6a020", label: "E" },
+];
+
+export const QUALITYSCORE_RES_FLAT_VALUES = [1, 15, 2, 38, 3, 60, 4];				// Grade, < Px/FOV value
+export const QUALITYSCORE_RES_360_VALUES = [2, 15, 3, 20, 4, 38, 5];				// Grade, < Px/FOV value
+export const QUALITYSCORE_GPS_VALUES = [5, 1.01, 4, 2.01, 3, 5.01, 2, 10.01, 1];	// Grade, < Meters value
+export const QUALITYSCORE_POND_RES = 4/5;
+export const QUALITYSCORE_POND_GPS = 1/5;
+
 const ArrowTriangle = svgToPSVLink(ArrowTriangleSVG, "white");
 const ArrowTurn = svgToPSVLink(ArrowTurnSVG, COLORS.NEXT);
 
+
+/**
+ * Find the grade associated to an input Quality Score definition.
+ * @param {number[]} ranges The QUALITYSCORE_*_VALUES definition
+ * @param {number} value The picture value
+ * @return {number} The corresponding grade (1 to 5, or null if missing)
+ */
+export function getGrade(ranges, value) {
+	if(value === null || value === undefined || value === "") { return null; }
+
+	// Read each pair from table (grade, reference value)
+	for(let i = 0; i < ranges.length; i += 2) {
+		const grade = ranges[i];
+		const limit = ranges[i+1];
+
+		// Send grade if value is under limit
+		if (value < limit) { return grade;}
+	}
+	// Otherwise, send last grade
+	return ranges[ranges.length - 1];
+}
+
 /**
  * Get cartesian distance between two points
  * @param {number[]} from Start [x,y] coordinates
@@ -350,7 +386,7 @@ export function apiFeatureToPSVNode(f, t, fastInternet=false, customLinkFilter=n
 		};
 	}
 	// 360°
-	else if(is360) {
+	else if(is360 && matrix) {
 		panorama = {
 			baseUrl,
 			origBaseUrl: baseUrl,
@@ -395,7 +431,7 @@ export function apiFeatureToPSVNode(f, t, fastInternet=false, customLinkFilter=n
 		};
 	}
 
-	return {
+	const node = {
 		id: f.id,
 		caption: getNodeCaption(f, t),
 		panorama,
@@ -410,6 +446,8 @@ export function apiFeatureToPSVNode(f, t, fastInternet=false, customLinkFilter=n
 		horizontalFov,
 		properties: f.properties,
 	};
+	
+	return node;
 }
 
 /**
@@ -514,29 +552,35 @@ export function isInternetFast() {
 	}
 	// Fallback for other browsers
 	catch(e) {
-		// Check if test has been done before and stored
-		const isFast = sessionStorage.getItem(INTERNET_FAST_STORAGE);
-		if(["true", "false"].includes(isFast)) {
-			return Promise.resolve(isFast === "true");
-		}
+		try {
+			// Check if test has been done before and stored
+			const isFast = sessionStorage.getItem(INTERNET_FAST_STORAGE);
+			if(["true", "false"].includes(isFast)) {
+				return Promise.resolve(isFast === "true");
+			}
 
-		// Run download testing
-		const startTime = (new Date()).getTime();
-		return fetch(INTERNET_FAST_TESTFILE+"?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;
-				sessionStorage.setItem(INTERNET_FAST_STORAGE, isFast ? "true" : "false");
-				return isFast;
-			})
-			.catch(e => {
-				console.warn("Failed to run speedtest", e);
-				return false;
-			});
+			// Run download testing
+			const startTime = (new Date()).getTime();
+			return fetch(INTERNET_FAST_TESTFILE+"?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;
+					sessionStorage.setItem(INTERNET_FAST_STORAGE, isFast ? "true" : "false");
+					return isFast;
+				})
+				.catch(e => {
+					console.warn("Failed to run speedtest", e);
+					return false;
+				});
+		}
+		// Fallback for browser blocking third-party downloads or sessionStorage
+		catch(e) {
+			return Promise.resolve(false);
+		}
 	}
 }
 

package/src/utils/Widgets.js

@@ -7,6 +7,9 @@ import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons/faMagnifyin
 import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
 import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
 import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
+import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
+import { faStar as farStar } from "@fortawesome/free-regular-svg-icons/faStar";
+import { QUALITYSCORE_VALUES } from "./Utils";
 
 
 /**
@@ -59,6 +62,19 @@ export function createExpandableButton(id, icon, label, container, classes = [])
 		btn.title = label;
 	}
 	btn.classList.add("gvs-btn", "gvs-widget-bg", "gvs-btn-expandable", ...classes);
+	btn.setActive = val => {
+		let span = btn.querySelector(".gvs-filters-active");
+		if(val && !span) {
+			span = document.createElement("span");
+			span.classList.add("gvs-filters-active");
+			const svg = btn.querySelector("svg");
+			if(svg.nextSibling) { btn.insertBefore(span, svg.nextSibling); }
+			else { btn.appendChild(span); }
+		}
+		else if(!val && span) {
+			span.remove();
+		}
+	};
 	return btn;
 }
 
@@ -95,6 +111,7 @@ export function createSearchBar(
 	const input = document.createElement("input");
 	input.type = "text";
 	input.placeholder = placeholder;
+	input.id = `${id}-input`;
 	bar.appendChild(input);
 	const extendInput = () => {
 		bar.classList.remove("gvs-search-bar-reduced");
@@ -138,7 +155,7 @@ export function createSearchBar(
 	bar.resetSearch = resetSearch;
 
 	// Handle result item click
-	const goItem = (entry) => {
+	input.goItem = (entry) => {
 		if(reduced) {
 			onResultClick(entry);
 			resetSearch();
@@ -148,6 +165,7 @@ export function createSearchBar(
 			input.value = entry.title;
 			list.innerHTML = "";
 			list._toggle(false);
+			switchIcon(iconEmpty);
 			onResultClick(entry);
 		}
 	};
@@ -195,7 +213,7 @@ export function createSearchBar(
 					listEntry.classList.add("gvs-search-bar-result");
 					listEntry.innerHTML = `${entry.title}<br /><small>${entry?.subtitle || ""}</small>`;
 					list.appendChild(listEntry);
-					listEntry.addEventListener("click", () => goItem(entry));
+					listEntry.addEventListener("click", () => input.goItem(entry));
 				});
 			}).catch(e => {
 				console.error(e);
@@ -479,3 +497,47 @@ export function createLabel(forAttr, text, faIcon = null) {
 	label.appendChild(document.createTextNode(text));
 	return label;
 }
+
+/**
+ * Show a grade in a nice, user-friendly way
+ * @param {number} grade The obtained grade
+ * @returns {string} Nice to display grade display
+ */
+export function showGrade(grade, t) {
+	let label = "<span class=\"gvs-grade\">";
+
+	for(let i=1; i <= grade; i++) {
+		label += fat(faStar);
+	}
+	for(let i=grade+1; i <= 5; i++) {
+		label += fat(farStar);
+	}
+	
+	label += "</span> (";
+	if(grade === null) { label += t.gvs.metadata_quality_missing+")"; }
+	else { label += grade + "/5)"; }
+	return label;
+}
+
+/**
+ * Displays a nice QualityScore
+ * @param {number} grade The 1 to 5 grade
+ * @returns {Element} The HTML code for showing the grade
+ */
+export function showQualityScore(grade) {
+	const span = document.createElement("span");
+
+	for(let i=1; i <= QUALITYSCORE_VALUES.length; i++) {
+		const pv = QUALITYSCORE_VALUES[i-1];
+		const sub = document.createElement("span");
+		sub.appendChild(document.createTextNode(pv.label));
+		sub.classList.add("gvs-qualityscore");
+		sub.style.backgroundColor = pv.color;
+		if(i === (6-grade)) {
+			sub.classList.add("gvs-qualityscore-selected");
+		}
+		span.appendChild(sub);
+	}
+
+	return span;
+}

package/src/viewer/URLHash.js

@@ -4,6 +4,7 @@ const MAP_FILTERS_JS2URL = {
 	"type": "pic_type",
 	"camera": "camera",
 	"theme": "theme",
+	"qualityscore": "pic_score",
 };
 const MAP_FILTERS_URL2JS = Object.fromEntries(Object.entries(MAP_FILTERS_JS2URL).map(v => [v[1], v[0]]));
 const UPDATE_HASH_EVENTS = [
@@ -98,6 +99,10 @@ export default class URLHash extends EventTarget {
 						hashParts[MAP_FILTERS_JS2URL[k]] = this._viewer._mapFilters[k];
 					}
 				}
+				if(hashParts.pic_score) {
+					const mapping = [null, "E", "D", "C", "B", "A"];
+					hashParts.pic_score = hashParts.pic_score.map(v => mapping[v]).join("");
+				}
 			}
 		}
 		else {
@@ -158,13 +163,13 @@ export default class URLHash extends EventTarget {
 		if(keyvals.s) {
 			const shortVals = Object.fromEntries(
 				keyvals.s
-					.split("|")
+					.split(";")
 					.map(kv => [kv[0], kv.substring(1)])
 			);
 
 			keyvals = {};
 
-			// Used letters: b c d e f k m n p s t u v
+			// Used letters: b c d e f k m n p q s t u v
 			// Focus
 			if(shortVals.f === "m") { keyvals.focus = "map"; }
 			else if(shortVals.f === "p") { keyvals.focus = "pic"; }
@@ -202,6 +207,7 @@ export default class URLHash extends EventTarget {
 			if(shortVals.v === "d") { keyvals.theme = "default"; }
 			else if(shortVals.v === "a") { keyvals.theme = "age"; }
 			else if(shortVals.v === "t") { keyvals.theme = "type"; }
+			else if(shortVals.v === "s") { keyvals.theme = "score"; }
 
 			// Background
 			if(shortVals.b === "s") { keyvals.background = "streets"; }
@@ -209,6 +215,9 @@ export default class URLHash extends EventTarget {
 
 			// Users
 			if(shortVals.u !== "") { keyvals.users = shortVals.u; }
+
+			// Photoscore
+			if(shortVals.q !== "") { keyvals.pic_score = shortVals.q; }
 		}
 
 		return keyvals;
@@ -332,11 +341,12 @@ export default class URLHash extends EventTarget {
 			v: (hashParts.theme || "").substring(0, 1),
 			b: (hashParts.background || "").substring(0, 1),
 			u: hashParts.users,
+			q: hashParts.pic_score,
 		};
 		const short = Object.entries(shortVals)
 			.filter(([,v]) => v != undefined && v != "")
 			.map(([k,v]) => `${k}${v}`)
-			.join("|");
+			.join(";");
 		url.hash = `s=${short}`;
 		return url;
 	}
@@ -353,6 +363,11 @@ export default class URLHash extends EventTarget {
 				newMapFilters[MAP_FILTERS_URL2JS[k]] = vals[k];
 			}
 		}
+		if(newMapFilters.qualityscore) {
+			let values = newMapFilters.qualityscore.split("");
+			const mapping = {"A": 5, "B": 4, "C": 3, "D": 2, "E": 1};
+			newMapFilters.qualityscore = values.map(v => mapping[v]);
+		}
 		return newMapFilters;
 	}
 

package/src/viewer/Widgets.css

@@ -207,6 +207,63 @@ span.gvs-input-btn {
 	width: 100%;
 }
 
+/* Checkbox looking like buttons */
+.gvs-input-group.gvs-checkbox-btns {
+	gap: 0;
+}
+.gvs-checkbox-btns label {
+	display: inline-block;
+	padding: 2px 7px;
+	background: none;
+	border: 1px solid var(--widget-border-btn);
+	color: var(--widget-font-btn-direct);
+	cursor: pointer;
+	font-size: 16px;
+	text-decoration: none;
+	border-left-width: 0px;
+}
+.gvs-checkbox-btns label:hover {
+	background-color: var(--widget-bg-hover);
+}
+.gvs-checkbox-btns label:first-of-type {
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+	border-left-width: 1px;
+}
+.gvs-checkbox-btns label:last-of-type {
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+.gvs-checkbox-btns input[type="checkbox"] { display: none; }
+.gvs-checkbox-btns input[type="checkbox"]:checked + label {
+	background-color: var(--widget-bg-active);
+	color: var(--widget-font-active);
+}
+.gvs-checkbox-btns input[type="checkbox"]:checked + label:first-of-type {
+	border-right-color: white;
+}
+
+/* Input shortcuts */
+.gvs-input-shortcuts {
+	margin-top: -10px;
+	margin-bottom: 5px;
+}
+.gvs-input-shortcuts button {
+	border: none;
+	height: 20px;
+	line-height: 20px;
+	font-size: 11px;
+	padding: 0 8px;
+	vertical-align: middle;
+	background-color: var(--grey-pale);
+	color: var(--black);
+	border-radius: 10px;
+	cursor: pointer;
+}
+.gvs-input-shortcuts button:hover {
+	background-color: #d9dcd9;
+}
+
 
 /* Group */
 .gvs-group {
@@ -455,6 +512,11 @@ a.gvs-btn { text-decoration: none; }
 	margin-right: 5px;
 }
 
+/* Grades */
+.gvs-grade {
+	color: var(--orange);
+}
+
 
 /***********************************************
  * Per-component styles
@@ -586,10 +648,25 @@ a.gvs-btn { text-decoration: none; }
 
 /* Filters */
 #gvs-filter { margin-bottom: 5px; }
+.gvs-filters-active {
+	width: 15px;
+	height: 15px;
+	border-radius: 8px;
+	border: 3px solid white;
+	position: absolute;
+	left: 20px;
+	top: 5px;
+	background-color: var(--orange);
+}
 #gvs-filter-panel {
 	width: 350px;
 	max-width: 350px;
 }
+#gvs-filter-panel .gvs-filter-active {
+	background-color: var(--widget-bg-active);
+	border-color: var(--widget-bg-active);
+	color: var(--widget-font-active);
+}
 #gvs-filter-panel input[type=date] {
 	min-width: 0;
 	flex-grow: 2;
@@ -597,10 +674,67 @@ a.gvs-btn { text-decoration: none; }
 	text-align: center;
 }
 #gvs-filter-camera-model, #gvs-filter-search-user { width: 100%; }
+#gvs-filter-search-user.gvs-filter-active input {
+	color: var(--widget-font-active);
+	background: none;
+}
 #gvs-filter-zoomin {
 	text-align: center;
 	font-weight: bold;
 	margin-bottom: 15px;
+	color: var(--orange);
+}
+
+#gvs-filter-qualityscore {
+	gap: 0px;
+	justify-content: center;
+	height: 42px;
+}
+
+.gvs-qualityscore, #gvs-filter-qualityscore label {
+	font-size: 18px;
+	width: 25px;
+	height: 30px;
+	line-height: 26px;
+	display: inline-block;
+	border: 1px solid white;
+	text-align: center;
+	background-color: gray;
+	color: rgba(255,255,255,0.9);
+	font-family: sans-serif;
+	font-weight: bold;
+	vertical-align: middle;
+}
+#gvs-filter-qualityscore label { cursor: pointer; }
+#gvs-filter-qualityscore label:hover {
+	width: 28px;
+	height: 35px;
+	line-height: 30px;
+	border-radius: 3px;
+	font-size: 22px;
+	color: white;
+	border: 2px solid white;
+}
+.gvs-qualityscore:first-of-type,
+#gvs-filter-qualityscore label:first-of-type {
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+}
+.gvs-qualityscore:last-of-type,
+#gvs-filter-qualityscore label:last-of-type {
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+#gvs-filter-qualityscore input[type="checkbox"] { display: none; }
+.gvs-qualityscore-selected,
+#gvs-filter-qualityscore input[type="checkbox"]:checked + label {
+	width: 30px;
+	height: 42px;
+	line-height: 37px;
+	border-radius: 8px;
+	font-size: 27px;
+	color: white;
+	border: 2px solid white;
 }
 
 
@@ -650,6 +784,11 @@ a.gvs-btn { text-decoration: none; }
 	margin-right: 5px;
 }
 
+#gvs-map-theme-legend-score {
+	justify-content: center;
+	gap: 0;
+}
+
 
 /* Player */
 #gvs-widget-player { justify-content: center; }