@panoramax/web-viewer 3.1.1-develop-1e642517 → 3.1.1-develop-a3fa5272

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
@@ -114,6 +132,7 @@ export function combineStyles(parent, options) {
 	// 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 || []);
 	}
 

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

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";
 
 
 /**
@@ -479,3 +482,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 {
@@ -164,7 +169,7 @@ export default class URLHash extends EventTarget {
 
 			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,6 +341,7 @@ 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 != "")
@@ -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

@@ -455,6 +455,11 @@ a.gvs-btn { text-decoration: none; }
 	margin-right: 5px;
 }
 
+/* Grades */
+.gvs-grade {
+	color: var(--orange);
+}
+
 
 /***********************************************
  * Per-component styles
@@ -601,6 +606,59 @@ a.gvs-btn { text-decoration: none; }
 	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 +708,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; }

package/src/viewer/Widgets.js

@@ -3,9 +3,10 @@ import { PSV_ANIM_DURATION, PSV_ZOOM_DELTA, PIC_MAX_STAY_DURATION } from "../Vie
 import {
 	createPanel, createGroup, fa, fat, createButton, disableButton,
 	createSearchBar, createExpandableButton, enableButton, enableCopyButton, closeOtherPanels,
-	createLinkCell, createTable, createHeader, createButtonSpan, createLabel
+	createLinkCell, createTable, createHeader, createButtonSpan, createLabel, showGrade,
+	showQualityScore,
 } from "../utils/Widgets";
-import { COLORS, isInIframe, getUserAccount } from "../utils/Utils";
+import { COLORS, isInIframe, getUserAccount, QUALITYSCORE_VALUES, getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES, QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_POND_RES, QUALITYSCORE_POND_GPS } from "../utils/Utils";
 import SwitchBig from "../img/switch_big.svg";
 import SwitchMini from "../img/switch_mini.svg";
 import BackgroundAerial from "../img/bg_aerial.jpg";
@@ -50,6 +51,8 @@ import { faCircleQuestion } from "@fortawesome/free-solid-svg-icons/faCircleQues
 import { faCommentDots } from "@fortawesome/free-solid-svg-icons/faCommentDots";
 import { faAt } from "@fortawesome/free-solid-svg-icons/faAt";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons/faPaperPlane";
+import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 
 
 /**
@@ -112,7 +115,8 @@ export default class Widgets {
 				this._initWidgetSearch();
 				this._initWidgetFilters(
 					this._viewer._api._endpoints.user_search !== null
-					&& this._viewer._api._endpoints.user_tiles !== null
+					&& this._viewer._api._endpoints.user_tiles !== null,
+					this._viewer.map && this._viewer.map._hasQualityScore()
 				);
 				this._initWidgetMapLayers();
 				this._listenMapFiltersChanges();
@@ -494,18 +498,30 @@ export default class Widgets {
 	
 		// Camera details
 		popupContent.push(createHeader("h4", `${fat(faCamera)} ${this._t.gvs.metadata_camera}`));
-		const focal = picMeta?.properties?.["pers:interior_orientation"]?.focal_length ? `${picMeta?.properties?.["pers:interior_orientation"]?.focal_length} mm` : "unknown";
+		const focal = picMeta?.properties?.["pers:interior_orientation"]?.focal_length ? `${picMeta?.properties?.["pers:interior_orientation"]?.focal_length} mm` : "❓";
+		let resmp = picMeta?.properties?.["pers:interior_orientation"]?.["sensor_array_dimensions"];
+		if(resmp) {
+			resmp = `${resmp[0]} x ${resmp[1]} px (${Math.floor(resmp[0] * resmp[1] / 1000000)} Mpx)`;
+		}
+		let pictype = this._t.gvs.picture_flat;
+		let picFov = picMeta?.properties?.["pers:interior_orientation"]?.["field_of_view"]; // Use raw value instead of horizontalFov to avoid default showing up
+		if(picFov !== null && picFov !== undefined) {
+			if(picFov === 360) { pictype = this._t.gvs.picture_360; }
+			else { pictype += ` (${picFov}°)`; }
+		}
+
 		const cameraData = [
-			{ section: this._t.gvs.metadata_camera_make, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_manufacturer },
-			{ section: this._t.gvs.metadata_camera_model, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_model },
-			{ section: this._t.gvs.metadata_camera_type, value: picMeta?.horizontalFov === 360 ? this._t.gvs.picture_360 : this._t.gvs.picture_flat },
+			{ section: this._t.gvs.metadata_camera_make, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_manufacturer || "❓" },
+			{ section: this._t.gvs.metadata_camera_model, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_model || "❓" },
+			{ section: this._t.gvs.metadata_camera_type, value: pictype },
+			{ section: this._t.gvs.metadata_camera_resolution, value: resmp || "❓" },
 			{ section: this._t.gvs.metadata_camera_focal_length, value: focal },
 		];
 		popupContent.push(createTable("gvs-table-light", cameraData));
 	
 		// Location details
 		popupContent.push(createHeader("h4", `${fat(faLocationDot)} ${this._t.gvs.metadata_location}`));
-		const orientation = picMeta?.properties?.["view:azimuth"] !== undefined ? `${picMeta.properties["view:azimuth"]}°` : "unknown";
+		const orientation = picMeta?.properties?.["view:azimuth"] !== undefined ? `${picMeta.properties["view:azimuth"]}°` : "❓";
 		const gpsPrecisionLabel = getGPSPrecision(picMeta);
 		const locationData = [
 			{ section: this._t.gvs.metadata_location_longitude, value: picMeta.gps[0] },
@@ -515,6 +531,28 @@ export default class Widgets {
 		];
 		popupContent.push(createTable("gvs-table-light", locationData));
 	
+		// Picture quality level
+		if(this._viewer?.map?._hasQualityScore()) {
+			popupContent.push(createHeader(
+				"h4",
+				`${fat(faMedal)} ${this._t.gvs.metadata_quality} <a href="https://docs.panoramax.fr/pictures-metadata/quality_score/" target="_blank" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle)}</a>`
+			));
+			const gpsGrade = getGrade(QUALITYSCORE_GPS_VALUES, picMeta?.properties?.["quality:horizontal_accuracy"]);
+			const resGrade = getGrade(
+				picMeta?.horizontalFov === 360 ? QUALITYSCORE_RES_360_VALUES : QUALITYSCORE_RES_FLAT_VALUES,
+				picMeta?.properties?.["panoramax:horizontal_pixel_density"]
+			);
+			// Note: score is also calculated in utils/map code
+			const generalGrade = Math.round((resGrade || 1) * QUALITYSCORE_POND_RES + (gpsGrade || 1) * QUALITYSCORE_POND_GPS);
+
+			const qualityData = [
+				{ section: this._t.gvs.metadata_quality_score, value: showQualityScore(generalGrade) },
+				{ section: this._t.gvs.metadata_quality_gps_score, value: showGrade(gpsGrade, this._t) },
+				{ section: this._t.gvs.metadata_quality_resolution_score, value: showGrade(resGrade, this._t) },
+			];
+			popupContent.push(createTable("gvs-table-light", qualityData));
+		}
+
 		// EXIF
 		if (picMeta.properties?.exif) {
 			const exifDetails = document.createElement("details");
@@ -829,6 +867,7 @@ export default class Widgets {
 					<option value="default">${this._t.gvs.map_theme_default}</option>
 					<option value="age">${this._t.gvs.map_theme_age}</option>
 					<option value="type">${this._t.gvs.map_theme_type}</option>
+					${this._viewer?.map?._hasQualityScore() ? "<option value=\"score\">"+this._t.gvs.map_theme_score+"</option>" : ""}
 				</select>
 			</div>
 			<div>
@@ -864,6 +903,9 @@ export default class Widgets {
 						${this._t.gvs.picture_flat}
 					</div>
 				</div>
+				<div id="gvs-map-theme-legend-score" class="gvs-map-theme-legend gvs-hidden">
+					${QUALITYSCORE_VALUES.map(pv => "<span class=\"gvs-qualityscore\" style=\"background-color: "+pv.color+";\">"+pv.label+"</span>").join("")}
+				</div>
 			</div>`;
 
 		// Map theme events
@@ -929,7 +971,7 @@ export default class Widgets {
 	 * This should be called only if map is enabled.
 	 * @private
 	 */
-	_initWidgetFilters(hasUserSearch) {
+	_initWidgetFilters(hasUserSearch, hasQualityScore) {
 		const btnFilter = createExpandableButton("gvs-filter", faSliders, this._t.gvs.filters, this);
 		const pnlFilter = createPanel(this, btnFilter, []);
 		pnlFilter.innerHTML = `
@@ -948,10 +990,9 @@ export default class Widgets {
 					<input type="checkbox" id="gvs-filter-type-360" name="360" checked />
 					<label for="gvs-filter-type-360">${this._t.gvs.picture_360}</label>
 				</div>
-				<!--h4>${fat(faCamera)} ${this._t.gvs.filter_camera_model}</h4>
-				<div class="gvs-input-group" id="gvs-filter-model"></div-->
 			</form>
 		`;
+		const form = pnlFilter.children[0];
 		createGroup(
 			"gvs-widget-filter",
 			this._viewer.isWidthSmall() ? "main-top-right" : "main-top-left",
@@ -964,10 +1005,39 @@ export default class Widgets {
 			pnlFilter.style.width = `${this._viewer.container.offsetWidth - 70}px`;
 		}
 
+		// Create qualityscore filter
+		if(hasQualityScore) {
+			const title = document.createElement("h4");
+			title.innerHTML = `${fat(faMedal)} ${this._t.gvs.filter_qualityscore}`;
+			title.style.marginBottom = "3px";
+			form.appendChild(title);
+
+			const div = document.createElement("div");
+			div.id = "gvs-filter-qualityscore";
+			div.classList.add("gvs-input-group");
+
+			QUALITYSCORE_VALUES.forEach(pv => {
+				const input = document.createElement("input");
+				input.id = "gvs-filter-qualityscore-" + pv.label;
+				input.type = "checkbox";
+				input.name = "qualityscore";
+				input.value = pv.label;
+
+				const label = document.createElement("label");
+				label.setAttribute("for", input.id);
+				label.title = this._t.gvs.filter_qualityscore_help;
+				label.appendChild(document.createTextNode(pv.label));
+				label.style.backgroundColor = pv.color;
+
+				div.appendChild(input);
+				div.appendChild(label);
+			});
+
+			form.appendChild(div);
+		}
+
 		// Create search bar for users
 		if(hasUserSearch) {
-			const form = pnlFilter.querySelector("#gvs-filter-form");
-
 			const title = document.createElement("h4");
 			title.innerHTML = `${fat(faUser)} ${this._t.gvs.filter_user}`;
 			form.appendChild(title);
@@ -994,18 +1064,6 @@ export default class Widgets {
 			form.appendChild(input);
 		}
 
-		// Create search bar for camera model
-		// TODO : implement when API is ready
-		// const cameraSearch = createSearchBar(
-		// 	"gvs-filter-camera-model",
-		// 	this._t.gvs.search,
-		// 	() => Promise.reject(),
-		// 	() => {},
-		//  this
-		// );
-		// document.getElementById("gvs-filter-model").appendChild(cameraSearch);
-
-		const form = pnlFilter.children[0];
 		this._formDelay = null;
 
 		const onFormChange = () => {
@@ -1041,19 +1099,33 @@ export default class Widgets {
 		const fMaxDate = document.getElementById("gvs-filter-date-end");
 		const fTypeFlat = document.getElementById("gvs-filter-type-flat");
 		const fType360 = document.getElementById("gvs-filter-type-360");
-		// const fCamera = document.getElementById("gvs-filter-camera");
 		const fMapTheme = document.getElementById("gvs-map-theme");
 
 		let type = "";
 		if(fType360.checked && !fTypeFlat.checked) { type = "equirectangular"; }
 		if(!fType360.checked && fTypeFlat.checked) { type = "flat"; }
 
+		let qualityscore = [];
+		if(this._viewer?.map?._hasQualityScore()) {
+			const fScoreA = document.getElementById("gvs-filter-qualityscore-A");
+			const fScoreB = document.getElementById("gvs-filter-qualityscore-B");
+			const fScoreC = document.getElementById("gvs-filter-qualityscore-C");
+			const fScoreD = document.getElementById("gvs-filter-qualityscore-D");
+			const fScoreE = document.getElementById("gvs-filter-qualityscore-E");
+			if(fScoreA.checked) { qualityscore.push(5); }
+			if(fScoreB.checked) { qualityscore.push(4); }
+			if(fScoreC.checked) { qualityscore.push(3); }
+			if(fScoreD.checked) { qualityscore.push(2); }
+			if(fScoreE.checked) { qualityscore.push(1); }
+			if(qualityscore.length == 5) { qualityscore = []; }
+		}
+
 		const values = {
 			minDate: fMinDate.value,
 			maxDate: fMaxDate.value,
 			type,
-			// camera: fCamera.value,
 			theme: fMapTheme.value,
+			qualityscore,
 		};
 
 		this._viewer.setFilters(values);
@@ -1068,19 +1140,29 @@ export default class Widgets {
 		const fMaxDate = document.getElementById("gvs-filter-date-end");
 		const fTypeFlat = document.getElementById("gvs-filter-type-flat");
 		const fType360 = document.getElementById("gvs-filter-type-360");
-		// const fCamera = document.getElementById("gvs-filter-camera");
 		const fMapTheme = document.getElementById("gvs-map-theme");
+		const fScoreA = document.getElementById("gvs-filter-qualityscore-A");
+		const fScoreB = document.getElementById("gvs-filter-qualityscore-B");
+		const fScoreC = document.getElementById("gvs-filter-qualityscore-C");
+		const fScoreD = document.getElementById("gvs-filter-qualityscore-D");
+		const fScoreE = document.getElementById("gvs-filter-qualityscore-E");
 
 		// Update widget based on programmatic filter changes
 		this._viewer.addEventListener("filters-changed", e => {
 			if(e.detail.minDate) { fMinDate.value = e.detail.minDate; }
 			if(e.detail.maxDate) { fMaxDate.value = e.detail.maxDate; }
-			// if(e.detail.camera) { fCamera.value = e.detail.camera; }
 			if(e.detail.theme) { fMapTheme.value = e.detail.theme; }
 			if(e.detail.type) {
 				fType360.checked = ["", "equirectangular"].includes(e.detail.type);
 				fTypeFlat.checked = ["", "flat"].includes(e.detail.type);
 			}
+			if(e.detail.qualityscore) {
+				fScoreA.checked = e.detail.qualityscore.includes(5) && e.detail.qualityscore.length < 5;
+				fScoreB.checked = e.detail.qualityscore.includes(4) && e.detail.qualityscore.length < 5;
+				fScoreC.checked = e.detail.qualityscore.includes(3) && e.detail.qualityscore.length < 5;
+				fScoreD.checked = e.detail.qualityscore.includes(2) && e.detail.qualityscore.length < 5;
+				fScoreE.checked = e.detail.qualityscore.includes(1) && e.detail.qualityscore.length < 5;
+			}
 			this._onMapThemeChange();
 		});
 

package/tests/utils/Exif.test.js

@@ -19,22 +19,22 @@ describe("getExifFloat", () => {
 
 describe("getGPSPrecision", () => {
 	it.each([
-		[undefined, "unknown"],
-		[0.4, "ideal"],
-		[0.9, "excellent"],
-		[2.9, "good"],
-		[6.9, "moderate"],
-		[9.9, "fair"],
-		[20, "poor"],
-		["9/10", "excellent"],
-		["99/10", "fair"],
+		[undefined, "❓"],
+		[0.4, "0.4 m"],
+		[0.9, "0.9 m"],
+		[2.9, "2.9 m"],
+		[6.9, "6.9 m"],
+		[9.9, "9.9 m"],
+		[20, "20 m"],
+		["9/10", "0.9 m"],
+		["99/10", "9.9 m"],
 	])("handles GPSHPos %s > %s", (input, expected) => {
 		const p = { properties: { exif: { "Exif.GPSInfo.GPSHPositioningError": input, "Exif.GPSInfo.GPSDOP": input } } };
 		expect(Exif.getGPSPrecision(p)).toBe(expected);
 	});
 
 	it.each([
-		[undefined, "unknown"],
+		[undefined, "❓"],
 		[0.9, "ideal"],
 		[1.9, "excellent"],
 		[4.9, "good"],

package/tests/utils/__snapshots__/API.test.js.snap

@@ -3,6 +3,7 @@
 exports[`_loadMapStyles handles default user 1`] = `
 Object {
   "layers": Array [],
+  "metadata": Object {},
   "sources": Object {
     "geovisio": Object {
       "maxzoom": 15,
@@ -30,6 +31,7 @@ Object {
       "id": "provider_blo",
     },
   ],
+  "metadata": Object {},
   "sources": Object {
     "provider": Object {},
     "provider_bla": Object {},
@@ -46,6 +48,7 @@ Object {
       "id": "provlayer",
     },
   ],
+  "metadata": Object {},
   "name": "Provider",
   "sources": Object {
     "geovisio": Object {
@@ -69,6 +72,7 @@ Object {
       "id": "provlayer",
     },
   ],
+  "metadata": Object {},
   "name": "Provider",
   "sources": Object {
     "geovisio": Object {
@@ -88,6 +92,7 @@ Object {
 exports[`_loadMapStyles works if no background style set 1`] = `
 Object {
   "layers": Array [],
+  "metadata": Object {},
   "sources": Object {
     "geovisio": Object {
       "maxzoom": 15,