@panoramax/web-viewer 3.1.1 → 3.2.0-develop-df9e865f

package/docs/02_Usage.md

@@ -8,9 +8,12 @@
 *   [Editor][4]
 *   [StandaloneMap][5]
 *   [autoDetectLocale][6]
-*   [getCookie][7]
-*   [getUserAccount][8]
-*   [Viewer][9]
+*   [getGrade][7]
+*   [getCookie][8]
+*   [getUserAccount][9]
+*   [showGrade][10]
+*   [showQualityScore][11]
+*   [Viewer][12]
 
 ## CoreView
 
@@ -22,25 +25,25 @@ It is used to prepare API, internationalization, options checks... for Viewer, S
 
 ### Parameters
 
-*   `container` **([string][10] | [Element][11])** The DOM element to create viewer into
-*   `endpoint` **[string][10]** URL to API to use (must be a [STAC API][12])
-*   `options` **[object][13]?** View options. (optional, default `{}`)
+*   `container` **([string][13] | [Element][14])** The DOM element to create viewer into
+*   `endpoint` **[string][13]** URL to API to use (must be a [STAC API][15])
+*   `options` **[object][16]?** View options. (optional, default `{}`)
 
-    *   `options.selectedSequence` **[string][10]?** The ID of sequence to highlight on load (defaults to none)
-    *   `options.selectedPicture` **[string][10]?** The ID of picture to highlight on load (defaults to none)
-    *   `options.fetchOptions` **[object][13]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][14]) (optional, default `null`)
-    *   `options.users` **([string][10] | [Array][15]<[string][10]>)?** List of user IDs to default use for display. Defaults to all users.
-    *   `options.style` **([string][10] | [object][13])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][16], or a URL string pointing to one. Defaults to OSMFR vector tiles.
+    *   `options.selectedSequence` **[string][13]?** The ID of sequence to highlight on load (defaults to none)
+    *   `options.selectedPicture` **[string][13]?** The ID of picture to highlight on load (defaults to none)
+    *   `options.fetchOptions` **[object][16]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][17]) (optional, default `null`)
+    *   `options.users` **([string][13] | [Array][18]<[string][13]>)?** List of user IDs to default use for display. Defaults to all users.
+    *   `options.style` **([string][13] | [object][16])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][19], or a URL string pointing to one. Defaults to OSMFR vector tiles.
 
 ### Properties
 
-*   `_t` **[object][13]** The translations labels
-*   `_selectedSeqId` **[string][10]** The selected sequence ID
-*   `_selectedPicId` **[string][10]** The selected picture ID
+*   `_t` **[object][16]** The translations labels
+*   `_selectedSeqId` **[string][13]** The selected sequence ID
+*   `_selectedPicId` **[string][13]** The selected picture ID
 *   `_api` **API** The API handler
 *   `_loader` **Loader** The initial loader message
-*   `_options` **[object][13]** The stored options
-*   `container` **[Element][11]** The DOM container
+*   `_options` **[object][16]** The stored options
+*   `container` **[Element][14]** The DOM container
 
 ### getClassName
 
@@ -59,13 +62,13 @@ This is useful for Single Page Applications (SPA), to remove various event liste
 
 Is the view running in a small container (small embed or smartphone)
 
-Returns **[boolean][17]** True if container is small
+Returns **[boolean][20]** True if container is small
 
 ### isHeightSmall
 
 Is the view running in a small-height container (small embed or smartphone)
 
-Returns **[boolean][17]** True if container height is small
+Returns **[boolean][20]** True if container height is small
 
 ### select
 
@@ -74,24 +77,24 @@ Calling the method without parameters unselects.
 
 #### Parameters
 
-*   `seqId` **[string][10]?** The sequence UUID (optional, default `null`)
-*   `picId` **[string][10]?** The picture UUID (optional, default `null`)
-*   `force` **[boolean][17]** Force select even if already selected (optional, default `false`)
+*   `seqId` **[string][13]?** The sequence UUID (optional, default `null`)
+*   `picId` **[string][13]?** The picture UUID (optional, default `null`)
+*   `force` **[boolean][20]** Force select even if already selected (optional, default `false`)
 
 ### select
 
 Event for sequence/picture selection
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.seqId` **[string][10]** The selected sequence ID
-    *   `detail.picId` **[string][10]** The selected picture ID (or null if not a precise picture clicked)
-    *   `detail.prevSeqId` **[string][10]?** The previously selected sequence ID (or null if none)
-    *   `detail.prevPicId` **[string][10]?** The previously selected picture ID (or null if none)
+    *   `detail.seqId` **[string][13]** The selected sequence ID
+    *   `detail.picId` **[string][13]** The selected picture ID (or null if not a precise picture clicked)
+    *   `detail.prevSeqId` **[string][13]?** The previously selected sequence ID (or null if none)
+    *   `detail.prevPicId` **[string][13]?** The previously selected picture ID (or null if none)
 
 ### ready
 
@@ -101,174 +104,174 @@ Event for viewer being ready to use (API loaded)
 
 Event for viewer failing to initially load
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.error` **[string][10]** The user-friendly error message to display
+    *   `detail.error` **[string][13]** The user-friendly error message to display
 
 ### map:background-changed
 
 Event for map background changes
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.background` **[string][10]?** The new selected background (aerial, streets)
+    *   `detail.background` **[string][13]?** The new selected background (aerial, streets)
 
 ### map:users-changed
 
 Event for visible users changes
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.usersIds` **[Array][15]<[string][10]>?** The list of newly selected users
+    *   `detail.usersIds` **[Array][18]<[string][13]>?** The list of newly selected users
 
 ### map:sequence-hover
 
 Event when a sequence on map is hovered (not selected)
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.seqId` **[string][10]** The hovered sequence ID
+    *   `detail.seqId` **[string][13]** The hovered sequence ID
 
 ### map:sequence-click
 
 Event when a sequence on map is clicked
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.seqId` **[string][10]** The clicked sequence ID
+    *   `detail.seqId` **[string][13]** The clicked sequence ID
     *   `detail.coordinates` **maplibregl.LngLat** The coordinates of user click
 
 ### map:picture-click
 
 Event when a picture on map is clicked
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.picId` **[string][10]** The clicked picture ID
-    *   `detail.seqId` **[string][10]** The clicked picture's sequence ID
-    *   `detail.feature` **[object][13]** The GeoJSON feature of the picture
+    *   `detail.picId` **[string][13]** The clicked picture ID
+    *   `detail.seqId` **[string][13]** The clicked picture's sequence ID
+    *   `detail.feature` **[object][16]** The GeoJSON feature of the picture
 
 ### psv:picture-loading
 
 Event for picture starting to load
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.picId` **[string][10]** The picture unique identifier
-    *   `detail.lon` **[number][18]** Longitude (WGS84)
-    *   `detail.lat` **[number][18]** Latitude (WGS84)
-    *   `detail.x` **[number][18]** New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
-    *   `detail.y` **[number][18]** New y position (in degrees)
-    *   `detail.z` **[number][18]** New z position (0-100)
+    *   `detail.picId` **[string][13]** The picture unique identifier
+    *   `detail.lon` **[number][21]** Longitude (WGS84)
+    *   `detail.lat` **[number][21]** Latitude (WGS84)
+    *   `detail.x` **[number][21]** New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
+    *   `detail.y` **[number][21]** New y position (in degrees)
+    *   `detail.z` **[number][21]** New z position (0-100)
 
 ### psv:picture-preview-started
 
 Event for picture preview
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.picId` **[string][10]** The picture ID
-    *   `detail.coordinates` **[Array][15]<[number][18]>** \[x,y] coordinates
-    *   `detail.direction` **[number][18]** The theorical picture orientation
+    *   `detail.picId` **[string][13]** The picture ID
+    *   `detail.coordinates` **[Array][18]<[number][21]>** \[x,y] coordinates
+    *   `detail.direction` **[number][21]** The theorical picture orientation
 
 ### psv:picture-preview-stopped
 
 Event for end of picture preview
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.picId` **[string][10]** The picture ID
+    *   `detail.picId` **[string][13]** The picture ID
 
 ### psv:view-rotated
 
 Event for viewer rotation
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.x` **[number][18]** New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
-    *   `detail.y` **[number][18]** New y position (in degrees)
-    *   `detail.z` **[number][18]** New Z position (between 0 and 100)
+    *   `detail.x` **[number][21]** New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
+    *   `detail.y` **[number][21]** New y position (in degrees)
+    *   `detail.z` **[number][21]** New Z position (between 0 and 100)
 
 ### psv:picture-loaded
 
 Event for picture load (low-resolution image is loaded)
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.picId` **[string][10]** The picture unique identifier
-    *   `detail.lon` **[number][18]** Longitude (WGS84)
-    *   `detail.lat` **[number][18]** Latitude (WGS84)
-    *   `detail.x` **[number][18]** New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
-    *   `detail.y` **[number][18]** New y position (in degrees)
-    *   `detail.z` **[number][18]** New z position (0-100)
+    *   `detail.picId` **[string][13]** The picture unique identifier
+    *   `detail.lon` **[number][21]** Longitude (WGS84)
+    *   `detail.lat` **[number][21]** Latitude (WGS84)
+    *   `detail.x` **[number][21]** New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
+    *   `detail.y` **[number][21]** New y position (in degrees)
+    *   `detail.z` **[number][21]** New z position (0-100)
 
 ### psv:picture-tiles-loaded
 
 Event launched when all visible tiles of a picture are loaded
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.picId` **[string][10]** The picture unique identifier
+    *   `detail.picId` **[string][13]** The picture unique identifier
 
 ### psv:transition-duration-changed
 
 Event for transition duration change
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.duration` **[string][10]** New duration (in milliseconds)
+    *   `detail.duration` **[string][13]** New duration (in milliseconds)
 
 ## Map
 
@@ -276,19 +279,19 @@ Type: [object][13]
 
 Map is the component showing pictures and sequences geolocation.
 
-Note that all functions of [MapLibre GL JS class Map][19] are also available.
+Note that all functions of [MapLibre GL JS class Map][22] are also available.
 
 ### Parameters
 
 *   `parent` **[CoreView][1]** The parent view
-*   `container` **[Element][11]** The DOM element to create into
-*   `options` **[object][13]?** The map options (any of [MapLibre GL settings][20] or any supplementary option defined here) (optional, default `{}`)
+*   `container` **[Element][14]** The DOM element to create into
+*   `options` **[object][16]?** The map options (any of [MapLibre GL settings][23] or any supplementary option defined here) (optional, default `{}`)
 
-    *   `options.raster` **[object][13]?** The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition][21].
-    *   `options.background` **[string][10]?** Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
-    *   `options.geocoder` **[object][13]?** Optional geocoder settings
+    *   `options.raster` **[object][16]?** The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition][24].
+    *   `options.background` **[string][13]?** Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
+    *   `options.geocoder` **[object][16]?** Optional geocoder settings
 
-        *   `options.geocoder.engine` **[string][10]?** Set the geocoder engine to use (nominatim, ban)
+        *   `options.geocoder.engine` **[string][13]?** Set the geocoder engine to use (nominatim, ban)
 
 ### destroy
 
@@ -302,13 +305,13 @@ Force refresh of vector tiles data
 
 Check if map offers aerial imagery as well as streets rendering.
 
-Returns **[boolean][17]** True if aerial imagery is available for display
+Returns **[boolean][20]** True if aerial imagery is available for display
 
 ### getBackground
 
 Get the currently selected map background
 
-Returns **[string][10]** aerial or streets
+Returns **[string][13]** aerial or streets
 
 ### setBackground
 
@@ -316,13 +319,13 @@ Change the shown background in map.
 
 #### Parameters
 
-*   `bg` **[string][10]** The new background to display (aerial or streets)
+*   `bg` **[string][13]** The new background to display (aerial or streets)
 
 ### getVisibleUsers
 
 Get the currently visible users
 
-Returns **[Array][15]<[string][10]>** List of visible users
+Returns **[Array][18]<[string][13]>** List of visible users
 
 ### setVisibleUsers
 
@@ -330,7 +333,7 @@ Make given user layers visible on map, and hide all others (if any)
 
 #### Parameters
 
-*   `visibleIds` **([string][10] | [Array][15]<[string][10]>)** The user layers IDs to display (optional, default `[]`)
+*   `visibleIds` **([string][13] | [Array][18]<[string][13]>)** The user layers IDs to display (optional, default `[]`)
 
 ### filterUserLayersContent
 
@@ -338,8 +341,8 @@ Filter the visible data content in all visible map layers
 
 #### Parameters
 
-*   `dataType` **[string][10]** sequences or pictures
-*   `filter` **[object][13]** The MapLibre GL filter rule to apply
+*   `dataType` **[string][13]** sequences or pictures
+*   `filter` **[object][16]** The MapLibre GL filter rule to apply
 
 ### displayPictureMarker
 
@@ -347,9 +350,9 @@ Shows on map a picture position and heading.
 
 #### Parameters
 
-*   `lon` **[number][18]** The longitude
-*   `lat` **[number][18]** The latitude
-*   `heading` **[number][18]** The heading
+*   `lon` **[number][21]** The longitude
+*   `lat` **[number][21]** The latitude
+*   `heading` **[number][21]** The heading
 
 ### reloadLayersStyles
 
@@ -363,22 +366,22 @@ This is useful after a map theme change.
 Photo is the component showing a single picture.
 It uses Photo Sphere Viewer as a basis, and pre-configure dialog with STAC API.
 
-Note that all functions of [PhotoSphereViewer Viewer class][22] are available as well.
+Note that all functions of [PhotoSphereViewer Viewer class][25] are available as well.
 
 ### Parameters
 
 *   `parent` **[CoreView][1]** The parent view
-*   `container` **[Element][11]** The DOM element to create into
-*   `options` **[object][13]?** The viewer options. Can be any of [Photo Sphere Viewer options][23] (optional, default `{}`)
+*   `container` **[Element][14]** The DOM element to create into
+*   `options` **[object][16]?** The viewer options. Can be any of [Photo Sphere Viewer options][26] (optional, default `{}`)
 
-    *   `options.transitionDuration` **[number][18]?** The number of milliseconds the transition animation should be.
-    *   `options.shouldGoFast` **[function][24]?** Function returning a boolean to indicate if we may skip loading HD images.
+    *   `options.transitionDuration` **[number][21]?** The number of milliseconds the transition animation should be.
+    *   `options.shouldGoFast` **[function][27]?** Function returning a boolean to indicate if we may skip loading HD images.
 
 ### getPictureMetadata
 
 Access currently shown picture metadata
 
-Returns **[object][13]** Picture metadata
+Returns **[object][16]** Picture metadata
 
 ### goToNextPicture
 
@@ -394,22 +397,22 @@ Displays in viewer a picture near to given coordinates
 
 #### Parameters
 
-*   `lat` **[number][18]** Latitude (WGS84)
-*   `lon` **[number][18]** Longitude (WGS84)
+*   `lat` **[number][21]** Latitude (WGS84)
+*   `lon` **[number][21]** Longitude (WGS84)
 
-Returns **[Promise][25]** Resolves on picture ID if picture found, otherwise rejects
+Returns **[Promise][28]** Resolves on picture ID if picture found, otherwise rejects
 
 ### getXY
 
 Get 2D position of sphere currently shown to user
 
-Returns **[object][13]** Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top) }
+Returns **[object][16]** Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top) }
 
 ### getXYZ
 
 Get 3D position of sphere currently shown to user
 
-Returns **[object][13]** Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top), z: zoom (0 = wide, 100 = zoomed in) }
+Returns **[object][16]** Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top), z: zoom (0 = wide, 100 = zoomed in) }
 
 ### getPictureOriginalHeading
 
@@ -435,9 +438,9 @@ Change the shown position in picture
 
 #### Parameters
 
-*   `x` **[number][18]** X position (in degrees)
-*   `y` **[number][18]** Y position (in degrees)
-*   `z` **[number][18]** Z position (0-100)
+*   `x` **[number][21]** X position (in degrees)
+*   `y` **[number][21]** Y position (in degrees)
+*   `z` **[number][21]** Z position (0-100)
 
 ### setHigherContrast
 
@@ -445,13 +448,13 @@ Enable or disable higher contrast on picture
 
 #### Parameters
 
-*   `enable` **[boolean][17]** True to enable higher contrast
+*   `enable` **[boolean][20]** True to enable higher contrast
 
 ### getTransitionDuration
 
 Get the duration of stay on a picture during a sequence play.
 
-Returns **[number][18]** The duration (in milliseconds)
+Returns **[number][21]** The duration (in milliseconds)
 
 ### setTransitionDuration
 
@@ -459,7 +462,7 @@ Changes the duration of stay on a picture during a sequence play.
 
 #### Parameters
 
-*   `value` **[number][18]** The new duration (in milliseconds, between 100 and 3000)
+*   `value` **[number][21]** The new duration (in milliseconds, between 100 and 3000)
 
 ### showErrorOverlay
 
@@ -467,9 +470,9 @@ Display an error message to user on screen
 
 #### Parameters
 
-*   `e` **[object][13]** The initial error
+*   `e` **[object][16]** The initial error
 *   `label` **str** The main error label to display
-*   `dissmisable` **[boolean][17]** Is error dissmisable
+*   `dissmisable` **[boolean][20]** Is error dissmisable
 
 ## Editor
 
@@ -478,20 +481,20 @@ Display an error message to user on screen
 Editor allows to focus on a single sequence, and preview what you edits would look like.
 It shows both picture and map.
 
-Note that you can use any of the [CoreView][26] class functions as well.
+Note that you can use any of the [CoreView][29] class functions as well.
 
 ### Parameters
 
-*   `container` **([string][10] | [Element][11])** The DOM element to create viewer into
-*   `endpoint` **[string][10]** URL to API to use (must be a [STAC API][12])
-*   `options` **[object][13]?** View options. (optional, default `{}`)
+*   `container` **([string][13] | [Element][14])** The DOM element to create viewer into
+*   `endpoint` **[string][13]** URL to API to use (must be a [STAC API][15])
+*   `options` **[object][16]?** View options. (optional, default `{}`)
 
-    *   `options.selectedSequence` **[string][10]** The ID of sequence to highlight on load. Must be always defined.
-    *   `options.selectedPicture` **[string][10]?** The ID of picture to highlight on load (defaults to none)
-    *   `options.fetchOptions` **[object][13]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][14]) (optional, default `null`)
-    *   `options.raster` **[object][13]?** The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition][21].
-    *   `options.background` **[string][10]?** Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
-    *   `options.style` **([string][10] | [object][13])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][16], or a URL string pointing to one.
+    *   `options.selectedSequence` **[string][13]** The ID of sequence to highlight on load. Must be always defined.
+    *   `options.selectedPicture` **[string][13]?** The ID of picture to highlight on load (defaults to none)
+    *   `options.fetchOptions` **[object][16]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][17]) (optional, default `null`)
+    *   `options.raster` **[object][16]?** The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition][24].
+    *   `options.background` **[string][13]?** Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
+    *   `options.style` **([string][13] | [object][16])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][19], or a URL string pointing to one.
 
 ### Properties
 
@@ -505,7 +508,7 @@ This doesn't change anything on API-side, it's just a preview.
 
 #### Parameters
 
-*   `relHeading` **[number][18]?** The new relative heading compared to sequence path. In degrees, between -180 and 180 (0 = front, -90 = left, 90 = right). Set to null to remove preview.
+*   `relHeading` **[number][21]?** The new relative heading compared to sequence path. In degrees, between -180 and 180 (0 = front, -90 = left, 90 = right). Set to null to remove preview.
 
 ## StandaloneMap
 
@@ -514,24 +517,24 @@ This doesn't change anything on API-side, it's just a preview.
 The standalone map viewer allows to see STAC pictures data as a map.
 It only embeds a map (no 360° pictures viewer) with a minimal picture preview (thumbnail).
 
-Note that you can use any of the [CoreView][26] class functions as well.
+Note that you can use any of the [CoreView][29] class functions as well.
 
 ### Parameters
 
-*   `container` **([string][10] | [Element][11])** The DOM element to create viewer into
-*   `endpoint` **[string][10]** URL to API to use (must be a [STAC API][12])
-*   `options` **[object][13]?** Map options. Various settings can be passed, either the ones defined here, or any of [MapLibre GL settings][20]. (optional, default `{}`)
+*   `container` **([string][13] | [Element][14])** The DOM element to create viewer into
+*   `endpoint` **[string][13]** URL to API to use (must be a [STAC API][15])
+*   `options` **[object][16]?** Map options. Various settings can be passed, either the ones defined here, or any of [MapLibre GL settings][23]. (optional, default `{}`)
 
-    *   `options.selectedSequence` **[string][10]?** The ID of sequence to highlight on load (defaults to none)
-    *   `options.selectedPicture` **[string][10]?** The ID of picture to highlight on load (defaults to none)
-    *   `options.fetchOptions` **[object][13]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][14]) (optional, default `null`)
-    *   `options.minZoom` **[number][18]** The minimum zoom level of the map (0-24). (optional, default `0`)
-    *   `options.maxZoom` **[number][18]** The maximum zoom level of the map (0-24). (optional, default `24`)
-    *   `options.style` **([string][10] | [object][13])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][16], or a URL string pointing to one.
+    *   `options.selectedSequence` **[string][13]?** The ID of sequence to highlight on load (defaults to none)
+    *   `options.selectedPicture` **[string][13]?** The ID of picture to highlight on load (defaults to none)
+    *   `options.fetchOptions` **[object][16]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][17]) (optional, default `null`)
+    *   `options.minZoom` **[number][21]** The minimum zoom level of the map (0-24). (optional, default `0`)
+    *   `options.maxZoom` **[number][21]** The maximum zoom level of the map (0-24). (optional, default `24`)
+    *   `options.style` **([string][13] | [object][16])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][19], or a URL string pointing to one.
     *   `options.center` **external:maplibre-gl.LngLatLike** The initial geographical centerpoint of the map. If `center` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `[0, 0]` Note: MapLibre GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON. (optional, default `[0,0]`)
-    *   `options.zoom` **[number][18]** The initial zoom level of the map. If `zoom` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`. (optional, default `0`)
+    *   `options.zoom` **[number][21]** The initial zoom level of the map. If `zoom` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`. (optional, default `0`)
     *   `options.bounds` **external:maplibre-gl.LngLatBoundsLike?** The initial bounds of the map. If `bounds` is specified, it overrides `center` and `zoom` constructor options.
-    *   `options.users` **[Array][15]<[string][10]>?** The IDs of users whom data should appear on map (defaults to all)
+    *   `options.users` **[Array][18]<[string][13]>?** The IDs of users whom data should appear on map (defaults to all)
 
 ### Properties
 
@@ -549,11 +552,22 @@ Find best matching language regarding of list of supported languages and browser
 
 ### Parameters
 
-*   `supportedTranslations` **[Array][15]\<str>** List of supported languages
+*   `supportedTranslations` **[Array][18]\<str>** List of supported languages
 *   `fallback` **str** The fallback language
 
 Returns **any** The best matching language
 
+## getGrade
+
+Find the grade associated to an input Quality Score definition.
+
+### Parameters
+
+*   `ranges` **[Array][18]<[number][21]>** The QUALITYSCORE\_\*\_VALUES definition
+*   `value` **[number][21]** The picture value
+
+Returns **[number][21]** The corresponding grade (1 to 5, or null if missing)
+
 ## getCookie
 
 Get a cookie value
@@ -568,7 +582,28 @@ Returns **str** The cookie value, or null if not found
 
 Checks if an user account exists
 
-Returns **[object][13]** Object like {"id", "name"} or null if no authenticated account
+Returns **[object][16]** Object like {"id", "name"} or null if no authenticated account
+
+## showGrade
+
+Show a grade in a nice, user-friendly way
+
+### Parameters
+
+*   `grade` **[number][21]** The obtained grade
+*   `t` &#x20;
+
+Returns **[string][13]** Nice to display grade display
+
+## showQualityScore
+
+Displays a nice QualityScore
+
+### Parameters
+
+*   `grade` **[number][21]** The 1 to 5 grade
+
+Returns **[Element][14]** The HTML code for showing the grade
 
 ## Viewer
 
@@ -576,43 +611,43 @@ Returns **[object][13]** Object like {"id", "name"} or null if no authenticated
 
 Viewer is the main component of Panoramax JS library, showing pictures and map.
 
-Note that you can use any of the [CoreView][26] class functions as well.
+Note that you can use any of the [CoreView][29] class functions as well.
 
 ### Parameters
 
-*   `container` **([string][10] | [Element][11])** The DOM element to create viewer into
-*   `endpoint` **[string][10]** URL to API to use (must be a [STAC API][12])
-*   `options` **[object][13]?** Viewer options (optional, default `{}`)
+*   `container` **([string][13] | [Element][14])** The DOM element to create viewer into
+*   `endpoint` **[string][13]** URL to API to use (must be a [STAC API][15])
+*   `options` **[object][16]?** Viewer options (optional, default `{}`)
 
-    *   `options.selectedPicture` **[string][10]?** Initial picture identifier to display
-    *   `options.position` **[Array][15]<[number][18]>?** Initial position to go to (in \[lat, lon] format)
-    *   `options.hash` **[boolean][17]** Enable URL hash settings (optional, default `true`)
-    *   `options.lang` **[string][10]?** Override language to use (defaults to navigator language, or English if translation not available)
+    *   `options.selectedPicture` **[string][13]?** Initial picture identifier to display
+    *   `options.position` **[Array][18]<[number][21]>?** Initial position to go to (in \[lat, lon] format)
+    *   `options.hash` **[boolean][20]** Enable URL hash settings (optional, default `true`)
+    *   `options.lang` **[string][13]?** Override language to use (defaults to navigator language, or English if translation not available)
     *   `options.transition` **int** Duration of stay on a picture during sequence play (excludes loading time) (optional, default `250`)
-    *   `options.fetchOptions` **[object][13]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][14]) (optional, default `null`)
-    *   `options.users` **([string][10] | [Array][15]<[string][10]>)?** The IDs of users whom data should appear on map (defaults to all). Only works with API having a "user-xyz" or "user-xyz-style" endpoint.
-    *   `options.picturesNavigation` **[string][10]?** The allowed navigation between pictures ("any": no restriction (default), "seq": only pictures in same sequence, "pic": only selected picture)
-    *   `options.map` **([boolean][17] | [object][13])** Enable contextual map for locating pictures. Setting to true or passing an object enables the map. Various settings can be passed, either the ones defined here, or any of [MapLibre GL settings][20] (optional, default `false`)
-
-        *   `options.map.startWide` **[boolean][17]?** Show the map as main element at startup (defaults to false, viewer is wider at start)
-        *   `options.map.minZoom` **[number][18]** The minimum zoom level of the map (0-24). (optional, default `0`)
-        *   `options.map.maxZoom` **[number][18]** The maximum zoom level of the map (0-24). (optional, default `24`)
-        *   `options.map.raster` **[object][13]?** The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition][21].
+    *   `options.fetchOptions` **[object][16]** Set custom options for fetch calls made against API ([same syntax as fetch options parameter][17]) (optional, default `null`)
+    *   `options.users` **([string][13] | [Array][18]<[string][13]>)?** The IDs of users whom data should appear on map (defaults to all). Only works with API having a "user-xyz" or "user-xyz-style" endpoint.
+    *   `options.picturesNavigation` **[string][13]?** The allowed navigation between pictures ("any": no restriction (default), "seq": only pictures in same sequence, "pic": only selected picture)
+    *   `options.map` **([boolean][20] | [object][16])** Enable contextual map for locating pictures. Setting to true or passing an object enables the map. Various settings can be passed, either the ones defined here, or any of [MapLibre GL settings][23] (optional, default `false`)
+
+        *   `options.map.startWide` **[boolean][20]?** Show the map as main element at startup (defaults to false, viewer is wider at start)
+        *   `options.map.minZoom` **[number][21]** The minimum zoom level of the map (0-24). (optional, default `0`)
+        *   `options.map.maxZoom` **[number][21]** The maximum zoom level of the map (0-24). (optional, default `24`)
+        *   `options.map.raster` **[object][16]?** The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition][24].
         *   `options.map.center` **external:maplibre-gl.LngLatLike** The initial geographical centerpoint of the map. If `center` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `[0, 0]` Note: MapLibre GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON. (optional, default `[0,0]`)
-        *   `options.map.zoom` **[number][18]** The initial zoom level of the map. If `zoom` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`. (optional, default `0`)
+        *   `options.map.zoom` **[number][21]** The initial zoom level of the map. If `zoom` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`. (optional, default `0`)
         *   `options.map.bounds` **external:maplibre-gl.LngLatBoundsLike?** The initial bounds of the map. If `bounds` is specified, it overrides `center` and `zoom` constructor options.
-        *   `options.map.geocoder` **[object][13]?** Optional geocoder settings
+        *   `options.map.geocoder` **[object][16]?** Optional geocoder settings
 
-            *   `options.map.geocoder.engine` **[string][10]?** Set the geocoder engine to use (nominatim, ban)
-        *   `options.map.background` **[string][10]?** Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
-        *   `options.map.theme` **[string][10]** The colouring scheme to use for pictures and sequences on map (default, age, type) (optional, default `default`)
-    *   `options.style` **([string][10] | [object][13])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][16], or a URL string pointing to one.
-    *   `options.widgets` **[object][13]?** Settings related to viewer buttons and widgets
+            *   `options.map.geocoder.engine` **[string][13]?** Set the geocoder engine to use (nominatim, ban)
+        *   `options.map.background` **[string][13]?** Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
+        *   `options.map.theme` **[string][13]** The colouring scheme to use for pictures and sequences on map (default, age, type) (optional, default `default`)
+    *   `options.style` **([string][13] | [object][16])?** The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification][19], or a URL string pointing to one.
+    *   `options.widgets` **[object][16]?** Settings related to viewer buttons and widgets
 
-        *   `options.widgets.editIdUrl` **[string][10]?** URL to the OpenStreetMap iD editor (defaults to OSM.org iD instance)
-        *   `options.widgets.customWidget` **([string][10] | [Element][11])?** A user-defined widget to add (will be shown over "Share" button)
-        *   `options.widgets.mapAttribution` **[string][10]?** Override the default map attribution (read from MapLibre style)
-        *   `options.widgets.iframeBaseURL` **[string][10]?** Set a custom base URL for the "Share as iframe" menu (defaults to current page)
+        *   `options.widgets.editIdUrl` **[string][13]?** URL to the OpenStreetMap iD editor (defaults to OSM.org iD instance)
+        *   `options.widgets.customWidget` **([string][13] | [Element][14])?** A user-defined widget to add (will be shown over "Share" button)
+        *   `options.widgets.mapAttribution` **[string][13]?** Override the default map attribution (read from MapLibre style)
+        *   `options.widgets.iframeBaseURL` **[string][13]?** Set a custom base URL for the "Share as iframe" menu (defaults to current page)
 
 ### Properties
 
@@ -635,8 +670,8 @@ Change full-page popup visibility and content
 
 #### Parameters
 
-*   `visible` **[boolean][17]** True to make it appear
-*   `content` **([string][10] | [Array][15]<[Element][11]>)?** The new popup content (optional, default `null`)
+*   `visible` **[boolean][20]** True to make it appear
+*   `content` **([string][13] | [Array][18]<[Element][14]>)?** The new popup content (optional, default `null`)
 
 ### playSequence
 
@@ -650,7 +685,7 @@ Stops playing current sequence
 
 Is there any sequence being played right now ?
 
-Returns **[boolean][17]** True if sequence is playing
+Returns **[boolean][20]** True if sequence is playing
 
 ### toggleSequencePlaying
 
@@ -682,13 +717,13 @@ Moves the view of main component slightly to the bottom.
 
 Is the map shown as main element instead of viewer (wide map mode) ?
 
-Returns **[boolean][17]** True if map is wider than viewer
+Returns **[boolean][20]** True if map is wider than viewer
 
 ### getPicturesNavigation
 
 Get current pictures navigation mode.
 
-Returns **[string][10]** The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)
+Returns **[string][13]** The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)
 
 ### setPicturesNavigation
 
@@ -696,17 +731,17 @@ Switch the allowed navigation between pictures.
 
 #### Parameters
 
-*   `pn` **[string][10]** The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)
+*   `pn` **[string][13]** The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)
 
 ### toggleJOSMLive
 
-Enable or disable JOSM live editing using [Remote][27]
+Enable or disable JOSM live editing using [Remote][30]
 
 #### Parameters
 
-*   `enabled` **[boolean][17]** Set to true to enable JOSM live
+*   `enabled` **[boolean][20]** Set to true to enable JOSM live
 
-Returns **[Promise][25]** Resolves on JOSM live being enabled or disabled
+Returns **[Promise][28]** Resolves on JOSM live being enabled or disabled
 
 ### setFocus
 
@@ -714,8 +749,8 @@ Change the viewer focus (either on picture or map)
 
 #### Parameters
 
-*   `focus` **[string][10]** The object to focus on (map, pic)
-*   `skipEvent` **[boolean][17]** True to not send focus-changed event (optional, default `false`)
+*   `focus` **[string][13]** The object to focus on (map, pic)
+*   `skipEvent` **[boolean][20]** True to not send focus-changed event (optional, default `false`)
 
 ### toggleFocus
 
@@ -727,7 +762,7 @@ Change the visibility of reduced component (picture or map)
 
 #### Parameters
 
-*   `visible` **[boolean][17]** True to make reduced component visible
+*   `visible` **[boolean][20]** True to make reduced component visible
 
 ### toggleUnfocusedVisible
 
@@ -739,14 +774,15 @@ Change the map filters
 
 #### Parameters
 
-*   `filters` **[object][13]** Filtering values
+*   `filters` **[object][16]** Filtering values
 
-    *   `filters.minDate` **[string][10]?** Start date for pictures (format YYYY-MM-DD)
-    *   `filters.maxDate` **[string][10]?** End date for pictures (format YYYY-MM-DD)
-    *   `filters.type` **[string][10]?** Type of picture to keep (flat, equirectangular)
-    *   `filters.camera` **[string][10]?** Camera make and model to keep
-    *   `filters.theme` **[string][10]?** Map theme to use
-*   `skipZoomIn` **[boolean][17]** If true, doesn't force zoom in to map level >= 7 (optional, default `false`)
+    *   `filters.minDate` **[string][13]?** Start date for pictures (format YYYY-MM-DD)
+    *   `filters.maxDate` **[string][13]?** End date for pictures (format YYYY-MM-DD)
+    *   `filters.type` **[string][13]?** Type of picture to keep (flat, equirectangular)
+    *   `filters.camera` **[string][13]?** Camera make and model to keep
+    *   `filters.theme` **[string][13]?** Map theme to use
+    *   `filters.qualityscore` **[Array][18]<[number][21]>?** QualityScore values, as a list of 1 to 5 grades
+*   `skipZoomIn` **[boolean][20]** If true, doesn't force zoom in to map level >= 7 (optional, default `false`)
 
 ### sequence-playing
 
@@ -760,13 +796,13 @@ Event for sequence stopped playing
 
 Event for pictures navigation mode change
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.value` **[string][10]** New mode (any, pic, seq)
+    *   `detail.value` **[string][13]** New mode (any, pic, seq)
 
 ### josm-live-enabled
 
@@ -780,29 +816,30 @@ Event for JOSM live disabled
 
 Event for focus change (either map or picture is shown wide)
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.focus` **[string][10]** Component now focused on (map, pic)
+    *   `detail.focus` **[string][13]** Component now focused on (map, pic)
 
 ### filters-changed
 
 Event for filters changes
 
-Type: [object][13]
+Type: [object][16]
 
 #### Properties
 
-*   `detail` **[object][13]** Event information
+*   `detail` **[object][16]** Event information
 
-    *   `detail.minDate` **[string][10]?** The minimum date in time range (ISO format)
-    *   `detail.maxDate` **[string][10]?** The maximum date in time range (ISO format)
-    *   `detail.type` **[string][10]?** Camera type (equirectangular, flat, null/empty string for both)
-    *   `detail.camera` **[string][10]?** Camera make and model
-    *   `detail.theme` **[string][10]?** Map theme
+    *   `detail.minDate` **[string][13]?** The minimum date in time range (ISO format)
+    *   `detail.maxDate` **[string][13]?** The maximum date in time range (ISO format)
+    *   `detail.type` **[string][13]?** Camera type (equirectangular, flat, null/empty string for both)
+    *   `detail.camera` **[string][13]?** Camera make and model
+    *   `detail.theme` **[string][13]?** Map theme
+    *   `detail.qualityscore` **[Array][18]<[number][21]>?** QualityScore values, as a list of 1 to 5 grades
 
 [1]: #coreview
 
@@ -816,44 +853,50 @@ Type: [object][13]
 
 [6]: #autodetectlocale
 
-[7]: #getcookie
+[7]: #getgrade
+
+[8]: #getcookie
+
+[9]: #getuseraccount
+
+[10]: #showgrade
 
-[8]: #getuseraccount
+[11]: #showqualityscore
 
-[9]: #viewer
+[12]: #viewer
 
-[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[11]: https://developer.mozilla.org/docs/Web/API/Element
+[14]: https://developer.mozilla.org/docs/Web/API/Element
 
-[12]: https://github.com/radiantearth/stac-api-spec/blob/main/overview.md
+[15]: https://github.com/radiantearth/stac-api-spec/blob/main/overview.md
 
-[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[14]: https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters
+[17]: https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters
 
-[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[16]: https://maplibre.org/maplibre-gl-js-docs/style-spec/
+[19]: https://maplibre.org/maplibre-gl-js-docs/style-spec/
 
-[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[21]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 
-[19]: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/
+[22]: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/
 
-[20]: https://maplibre.org/maplibre-gl-js-docs/api/map/#map-parameters
+[23]: https://maplibre.org/maplibre-gl-js-docs/api/map/#map-parameters
 
-[21]: https://maplibre.org/maplibre-style-spec/sources/#raster
+[24]: https://maplibre.org/maplibre-style-spec/sources/#raster
 
-[22]: https://photo-sphere-viewer.js.org/api/classes/core.viewer
+[25]: https://photo-sphere-viewer.js.org/api/classes/core.viewer
 
-[23]: https://photo-sphere-viewer.js.org/guide/config.html#standard-options
+[26]: https://photo-sphere-viewer.js.org/guide/config.html#standard-options
 
-[24]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[27]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 
-[25]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise
+[28]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise
 
-[26]: #CoreView
+[29]: #CoreView
 
-[27]: https://josm.openstreetmap.de/wiki/Help/RemoteControlCommands
+[30]: https://josm.openstreetmap.de/wiki/Help/RemoteControlCommands