@panoramax/web-viewer 3.1.1-develop-c42d6114 → 3.1.1-develop-a3fa5272

package/docs/03_URL_settings.md

@@ -116,13 +116,22 @@ The camera make and model to filter shown pictures and sequences on map (if map
 - `camera=gopro%20max` will only show pictures taken with a _GoPro Max_ camera
 - `camera=max` will not shown any picture on map, as it doesn't match any camera make
 
+### :medal: `pic_score`: filter map data by quality score
+
+The pictures quality level wanted for map display (if map is enabled). Values are `A`, `B`, `C`, `D`, `E` and can be used that way:
+
+- `pic_score=A` for only best pictures
+- `pic_score=ABC` for A, B or C-grade pictures
+
+
 ### :material-format-paint: `theme`: map colouring for pictures and sequences
 
 The map theme to use for displaying pictures and sequences (if map is enabled). Available themes are:
 
 - `theme=default` (or no setting defined): single color for display (no classification)
 - `theme=age`: color based on picture/sequence age (red = recent, yellow = 2+ years old)
-- `theme=type`: color based on camera type (orange = classic, green = 360°) 
+- `theme=type`: color based on camera type (orange = classic, green = 360°)
+- `theme=score`: color based on quality score (green = best quality, yellow = worst)
 
 ### :material-nature-people: `background`: map background
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.1.1-develop-c42d6114",
+  "version": "3.1.1-develop-a3fa5272",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -88,8 +88,9 @@
     "workbox-webpack-plugin": "^6.5.4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@photo-sphere-viewer/core": "5.11.0-beta.1",
     "@photo-sphere-viewer/equirectangular-tiles-adapter": "5.11.0-beta.1",
     "@photo-sphere-viewer/gallery-plugin": "5.11.0-beta.1",

package/src/Viewer.js

@@ -2,11 +2,11 @@ import "./Viewer.css";
 import { SYSTEM as PSSystem, DEFAULTS as PSDefaults } from "@photo-sphere-viewer/core";
 import Widgets from "./viewer/Widgets";
 import URLHash from "./viewer/URLHash";
-import { COLORS, josmBboxParameters, linkMapAndPhoto } from "./utils/Utils";
+import { COLORS, QUALITYSCORE_VALUES, josmBboxParameters, linkMapAndPhoto } from "./utils/Utils";
 import CoreView from "./components/CoreView";
 import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION, PIC_MAX_STAY_DURATION } from "./components/Photo";
 import Map from "./components/Map";
-import { TILES_PICTURES_ZOOM } from "./utils/Map";
+import { TILES_PICTURES_ZOOM, MAP_EXPR_QUALITYSCORE } from "./utils/Map";
 import { enableCopyButton, fa } from "./utils/Widgets";
 import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
 
@@ -20,6 +20,7 @@ const MAP_THEMES = {
 	DEFAULT: "default",
 	AGE: "age",
 	TYPE: "type",
+	SCORE: "score",
 };
 
 
@@ -809,6 +810,15 @@ class Viewer extends CoreView {
 				COLORS.QUALI_2
 			);
 		}
+		else if(this._mapTheme == MAP_THEMES.SCORE) {
+			s.push(
+				["==", MAP_EXPR_QUALITYSCORE, 5], QUALITYSCORE_VALUES[0].color,
+				["==", MAP_EXPR_QUALITYSCORE, 4], QUALITYSCORE_VALUES[1].color,
+				["==", MAP_EXPR_QUALITYSCORE, 3], QUALITYSCORE_VALUES[2].color,
+				["==", MAP_EXPR_QUALITYSCORE, 2], QUALITYSCORE_VALUES[3].color,
+				QUALITYSCORE_VALUES[4].color,
+			);
+		}
 		else {
 			s.push(COLORS.BASE);
 		}
@@ -827,6 +837,7 @@ class Viewer extends CoreView {
 		//  - 20-80 : custom ranges
 		//  - 10  : basic feature
 		//  - 0   : on bottom / feature with undefined property
+
 		// Hidden style
 		const s = ["case",
 			["==", ["get", "hidden"], true], 90
@@ -859,6 +870,15 @@ class Viewer extends CoreView {
 				["==", ["get", "type"], "equirectangular"], 50,
 			);
 		}
+		else if(this._mapTheme == MAP_THEMES.SCORE) {
+			s.push(
+				["==", MAP_EXPR_QUALITYSCORE, 5], 80,
+				["==", MAP_EXPR_QUALITYSCORE, 4], 65,
+				["==", MAP_EXPR_QUALITYSCORE, 3], 50,
+				["==", MAP_EXPR_QUALITYSCORE, 2], 35,
+				["==", MAP_EXPR_QUALITYSCORE, 1], 20,
+			);
+		}
 
 		s.push(10);
 		return s;
@@ -1076,6 +1096,7 @@ class Viewer extends CoreView {
 	 * @param {string} [filters.type] Type of picture to keep (flat, equirectangular)
 	 * @param {string} [filters.camera] Camera make and model to keep
 	 * @param {string} [filters.theme] Map theme to use
+	 * @param {number[]} [filters.qualityscore] QualityScore values, as a list of 1 to 5 grades
 	 * @param {boolean} [skipZoomIn=false] If true, doesn't force zoom in to map level >= 7
 	 */
 	setFilters(filters, skipZoomIn = false) {
@@ -1088,6 +1109,7 @@ class Viewer extends CoreView {
 			mapSeqFilters.push([">=", ["get", "date"], filters.minDate]);
 			mapPicFilters.push([">=", ["get", "ts"], filters.minDate]);
 		}
+
 		if(filters.maxDate && filters.maxDate !== "") {
 			this._mapFilters.maxDate = filters.maxDate;
 			mapSeqFilters.push(["<=", ["get", "date"], filters.maxDate]);
@@ -1099,11 +1121,13 @@ class Viewer extends CoreView {
 			d = d.toISOString().split("T")[0];
 			mapPicFilters.push(["<=", ["get", "ts"], d]);
 		}
+
 		if(filters.type && filters.type !== "") {
 			this._mapFilters.type = filters.type;
 			mapSeqFilters.push(["==", ["get", "type"], filters.type]);
 			mapPicFilters.push(["==", ["get", "type"], filters.type]);
 		}
+
 		if(filters.camera && filters.camera !== "") {
 			this._mapFilters.camera = filters.camera;
 			// low/high model hack : to enable fuzzy filtering of camera make and model
@@ -1116,6 +1140,12 @@ class Viewer extends CoreView {
 			mapPicFilters.push(["<=", ["get", "model"], highModel, collator]);
 		}
 
+		if(filters.qualityscore && filters.qualityscore.length > 0) {
+			this._mapFilters.qualityscore = filters.qualityscore;
+			mapSeqFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", this._mapFilters.qualityscore]]);
+			mapPicFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", this._mapFilters.qualityscore]]);
+		}
+
 		if(filters.theme && Object.values(MAP_THEMES).includes(filters.theme)) {
 			this._mapFilters.theme = filters.theme;
 			if(this.map) {
@@ -1175,6 +1205,7 @@ class Viewer extends CoreView {
 		 * @property {string} [detail.type] Camera type (equirectangular, flat, null/empty string for both)
 		 * @property {string} [detail.camera] Camera make and model
 		 * @property {string} [detail.theme] Map theme
+		 * @property {number[]} [detail.qualityscore] QualityScore values, as a list of 1 to 5 grades
 		 */
 		const event = new CustomEvent("filters-changed", { detail: Object.assign({}, this._mapFilters) });
 		this.dispatchEvent(event);

package/src/components/CoreView.css

@@ -53,6 +53,12 @@
 	margin-right: 2px;
 }
 
+.gvs h4 a svg {
+	height: 16px;
+	vertical-align: sub;
+	margin-left: 2px;
+}
+
 /* Hidden elements on mobile */
 @container (max-width: 576px) {
 	.gvs-mobile-hidden { display: none !important; }

package/src/components/CoreView.js

@@ -68,16 +68,31 @@ export default class CoreView extends EventTarget {
 		this.container.appendChild(this.loaderContainer);
 		this._loader = new Loader(this, this.loaderContainer);
 
-		// API init
-		endpoint = endpoint.replace("/api/search", "/api");
-		this._api = new API(endpoint, {
-			users: this._options.users,
-			fetch: this._options?.fetchOptions,
-			style: this._options.style,
-		});
-		this._api.onceReady()
-			.then(() => console.info(`🌐 Connected to API "${this._api._metadata.name}" (${this._api._endpoint})\nℹ️ API runs STAC ${this._api._metadata.stac_version} & GeoVisio ${this._api._metadata.geovisio_version}`))
-			.catch(e => this._loader.dismiss(e, this._t.gvs.error_api));
+		// API init)
+		endpoint = (endpoint || "").replace("/api/search", "/api");
+		try {
+			this._api = new API(endpoint, {
+				users: this._options.users,
+				fetch: this._options?.fetchOptions,
+				style: this._options.style,
+			});
+			this._api.onceReady()
+				.then(() => {
+					let unavailable = this._api.getUnavailableFeatures();
+					let available = this._api.getAvailableFeatures();
+					available = unavailable.length === 0 ? "✅ All features available" : "✅ Available features: "+available.join(", ");
+					unavailable = unavailable.length === 0 ? "" : "🚫 Unavailable features: "+unavailable.join(", ");
+					console.info(`🌐 Connected to API "${this._api._metadata.name}" (${this._api._endpoint})
+ℹ️ API runs STAC ${this._api._metadata.stac_version} ${this._api._metadata.geovisio_version ? "& GeoVisio "+this._api._metadata.geovisio_version : ""}
+   ${available}
+   ${unavailable}
+`.trim());
+				})
+				.catch(e => this._loader.dismiss(e, this._t.gvs.error_api));
+		}
+		catch(e) {
+			this._loader.dismiss(e, this._t.gvs.error_api);
+		}
 	}
 
 	/**

package/src/components/Map.js

@@ -187,6 +187,15 @@ export default class Map extends maplibregl.Map {
 		});
 	}
 
+	/**
+	 * Is QualityScore available in vector tiles ?
+	 * @private
+	 */
+	_hasQualityScore() {
+		const fields = this.getStyle()?.metadata?.["panoramax:fields"] || {};
+		return fields?.pictures?.includes("gps_accuracy") && fields?.pictures?.includes("h_pixel_density");
+	}
+
 	/**
 	 * Force refresh of vector tiles data
 	 */

package/src/translations/en.json

@@ -62,7 +62,8 @@
             "🔍 Analyzing EXIF metadata",
             "🏘️ 3D rendering",
             "📷 Initializing 360° pictures",
-            "🟠 Colour balancing"
+            "🟠 Colour balancing",
+            "💯 Computing Quality Score ©"
         ],
         "loading_labels_fun": [
             "🦌 Deer crossing sign detection",
@@ -97,8 +98,9 @@
         "filter_zoom_in": "Zoom-in for filters to be visible",
         "picture_flat": "Classic",
         "picture_360": "360°",
-        "filter_camera_model": "By camera model",
         "filter_reset": "Clear filters",
+        "filter_qualityscore": "Quality score",
+        "filter_qualityscore_help": "Click to enable or disable",
         "map_background": "Map background",
         "map_background_aerial": "Aerial",
         "map_background_streets": "Streets",
@@ -110,6 +112,7 @@
         "map_theme_age_3": "< 1 year",
         "map_theme_age_4": "< 1 month",
         "map_theme_type": "Camera type",
+        "map_theme_score": "Quality score",
         "contrast": "Enable higher image contrast",
         "metadata": "Picture metadata",
         "metadata_general_picid": "Picture identifier",
@@ -124,12 +127,19 @@
         "metadata_camera_make": "Make",
         "metadata_camera_model": "Model",
         "metadata_camera_type": "Type",
+        "metadata_camera_resolution": "Resolution",
         "metadata_camera_focal_length": "Focal length",
         "metadata_location": "Location",
         "metadata_location_longitude": "Longitude",
         "metadata_location_latitude": "Latitude",
         "metadata_location_orientation": "Capture direction",
         "metadata_location_precision": "Positioning precision",
+        "metadata_quality": "Quality Score",
+        "metadata_quality_help": "Know more about Quality Score",
+        "metadata_quality_score": "Global score",
+        "metadata_quality_gps_score": "Positioning score",
+        "metadata_quality_resolution_score": "Resolution score",
+        "metadata_quality_missing": "no value set in picture",
         "metadata_exif": "EXIF / XMP",
         "metadata_exif_name": "Tag",
         "metadata_exif_value": "Value",

package/src/translations/fr.json

@@ -62,7 +62,8 @@
             "🔍 Analyse des métadonnées EXIF",
             "🏘️ Création du rendu 3D",
             "📷 Initialisation des vues 360°",
-            "🟠 Équilibrage des couleurs"
+            "🟠 Équilibrage des couleurs",
+            "💯 Calcul du score qualité ©"
         ],
         "loading_labels_fun": [
             "🦌 Détection des panneaux biche",
@@ -96,8 +97,9 @@
         "filter_picture": "Type d'image",
         "picture_flat": "Classique",
         "picture_360": "360°",
-        "filter_camera_model": "Par modèle d'appareil",
         "filter_reset": "Retirer les filtres",
+        "filter_qualityscore": "Score de qualité",
+        "filter_qualityscore_help": "Cliquez pour activer ou désactiver",
         "filter_zoom_in": "Zoomez plus pour voir les filtres",
         "map_background": "Fond de carte",
         "map_background_aerial": "Satellite",
@@ -110,6 +112,7 @@
         "map_theme_age_3": "< 1 an",
         "map_theme_age_4": "< 1 mois",
         "map_theme_type": "Type de caméra",
+        "map_theme_score": "Score de qualité",
         "contrast": "Augmenter le contraste de l'image",
         "metadata": "Métadonnées de la photo",
         "metadata_general_picid": "Identifiant de photo",
@@ -124,12 +127,19 @@
         "metadata_camera_make": "Fabricant",
         "metadata_camera_model": "Modèle",
         "metadata_camera_type": "Type",
+        "metadata_camera_resolution": "Résolution",
         "metadata_camera_focal_length": "Longueur focale",
         "metadata_location": "Localisation",
         "metadata_location_longitude": "Longitude",
         "metadata_location_latitude": "Latitude",
         "metadata_location_orientation": "Direction de prise de vue",
         "metadata_location_precision": "Précision du positionnement",
+        "metadata_quality": "Score de qualité",
+        "metadata_quality_help": "En savoir plus sur le score de qualité",
+        "metadata_quality_score": "Note globale",
+        "metadata_quality_gps_score": "Note du positionnement",
+        "metadata_quality_resolution_score": "Note de la résolution",
+        "metadata_quality_missing": "pas d'info dans l'image",
         "metadata_exif": "EXIF / XMP",
         "metadata_exif_name": "Balise",
         "metadata_exif_value": "Valeur",

package/src/utils/API.js

@@ -76,6 +76,22 @@ export default class API {
 		return this._isReady == 1;
 	}
 
+	/**
+	 * List of available features offered by API
+	 * @returns {string[]} Keywords of enabled features
+	 */
+	getAvailableFeatures() {
+		return Object.entries(this._endpoints).filter(e => e[1] !== null).map(e => e[0]);
+	}
+
+	/**
+	 * List of unavailable features on API
+	 * @returns {string[]} Keywords of disabled features
+	 */
+	getUnavailableFeatures() {
+		return Object.entries(this._endpoints).filter(e => e[1] === null).map(e => e[0]);
+	}
+
 	/**
 	 * Interprets JSON landing page and store important information
 	 *
@@ -107,7 +123,7 @@ export default class API {
 		// Read metadata
 		this._metadata.name = landing.title || "Unnamed";
 		this._metadata.stac_version = landing.stac_version;
-		this._metadata.geovisio_version = landing.geovisio_version || "Unknown";
+		this._metadata.geovisio_version = landing.geovisio_version;
 
 		// Read links
 		const supportedLinks = [
@@ -243,7 +259,7 @@ export default class API {
 		const mapUsers = new Set(users || []);
 
 		// Load all necessary map styles
-		this.mapStyle = { version: 8, sources: {}, layers: [] };
+		this.mapStyle = { version: 8, sources: {}, layers: [], metadata: {} };
 		const stylePromises = [ this.getMapStyle() ];
 
 		// General map style
@@ -263,7 +279,7 @@ export default class API {
 		return Promise.all(stylePromises)
 			.then(styles => {
 				const overridableProps = [
-					"bearing", "center", "glyphs", "light", "metadata", "name",
+					"bearing", "center", "glyphs", "light", "name",
 					"pitch", "sky", "sprite", "terrain", "transition", "zoom"
 				];
 
@@ -272,6 +288,7 @@ export default class API {
 						if(style[p]) { this.mapStyle[p] = style[p] || this.mapStyle[p]; }
 					});
 					Object.assign(this.mapStyle.sources, style?.sources || {});
+					Object.assign(this.mapStyle.metadata, style?.metadata || {});
 					this.mapStyle.layers = this.mapStyle.layers.concat(style?.layers || []);
 				});
 			})

package/src/utils/Exif.js

@@ -41,17 +41,12 @@ export function getExifFloat(val) {
  * @private
  */
 export function getGPSPrecision(picture) {
-	let quality = "unknown";
-	const gpsHPosError = getExifFloat(picture?.properties?.exif?.["Exif.GPSInfo.GPSHPositioningError"]);
+	let quality = "❓";
+	const gpsHPosError = picture?.properties?.["quality:horizontal_accuracy"] || getExifFloat(picture?.properties?.exif?.["Exif.GPSInfo.GPSHPositioningError"]);
 	const gpsDop = getExifFloat(picture?.properties?.exif?.["Exif.GPSInfo.GPSDOP"]);
 	
 	if(gpsHPosError !== undefined) {
-		if(gpsHPosError < 0.5) { quality = "ideal"; }
-		else if(gpsHPosError < 1) { quality = "excellent"; }
-		else if(gpsHPosError < 3) { quality = "good"; }
-		else if(gpsHPosError < 7) { quality = "moderate"; }
-		else if(gpsHPosError < 10) { quality = "fair"; }
-		else { quality = "poor"; }
+		quality = `${gpsHPosError} m`;
 	}
 	else if(gpsDop !== undefined) {
 		if(gpsDop < 1) { quality = "ideal"; }

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;
 	}