@panoramax/web-viewer 3.2.3 → 4.0.0-develop-9f9cf858

package/docs/reference/utils/URLHandler.md

@@ -0,0 +1,107 @@
+<a name="Panoramax.utils.URLHandler"></a>
+
+## Panoramax.utils.URLHandler
+**Kind**: static class of <code>Panoramax.utils</code>  
+**Emits**: [<code>url-changed</code>](#Panoramax.utils.URLHandler+event_url-changed)  
+
+* [.URLHandler](#Panoramax.utils.URLHandler)
+    * [new URLHandler(parent)](#new_Panoramax.utils.URLHandler_new)
+    * [.listenToChanges()](#Panoramax.utils.URLHandler+listenToChanges)
+    * [.nextURLParams()](#Panoramax.utils.URLHandler+nextURLParams) ⇒ <code>object</code>
+    * [.nextURLString()](#Panoramax.utils.URLHandler+nextURLString) ⇒ <code>string</code>
+    * [.currentURLParams([readFromHash])](#Panoramax.utils.URLHandler+currentURLParams) ⇒ <code>object</code>
+    * [.currentMapString()](#Panoramax.utils.URLHandler+currentMapString) ⇒ <code>string</code>
+    * [.currentPSVString()](#Panoramax.utils.URLHandler+currentPSVString) ⇒ <code>string</code>
+    * [.nextShortLink()](#Panoramax.utils.URLHandler+nextShortLink) ⇒ <code>str</code>
+    * [.getUnmanagedParameters(prevUrl)](#Panoramax.utils.URLHandler+getUnmanagedParameters)
+    * ["url-changed"](#Panoramax.utils.URLHandler+event_url-changed)
+
+<a name="new_Panoramax.utils.URLHandler_new"></a>
+
+### new URLHandler(parent)
+Updates the URL query part with various parent component information.
+
+Note that you may call `listenToChanges()` for this class to be effective once parent is ready-enough.
+
+
+| Param | Type | Description |
+| --- | --- | --- |
+| parent | [<code>Basic</code>](../components/core/Basic.md/#Panoramax.components.core.Basic) | The parent component |
+
+<a name="Panoramax.utils.URLHandler+listenToChanges"></a>
+
+### urlHandler.listenToChanges()
+Start listening to URL & parent changes through events.
+This leads to parent & URL updates.
+
+**Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
+<a name="Panoramax.utils.URLHandler+nextURLParams"></a>
+
+### urlHandler.nextURLParams() ⇒ <code>object</code>
+Compute next values to insert in URL
+
+**Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
+**Returns**: <code>object</code> - Query parameters  
+<a name="Panoramax.utils.URLHandler+nextURLString"></a>
+
+### urlHandler.nextURLString() ⇒ <code>string</code>
+Compute next URL query string (based on `nextURLParams()`)
+
+**Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
+**Returns**: <code>string</code> - The query string  
+<a name="Panoramax.utils.URLHandler+currentURLParams"></a>
+
+### urlHandler.currentURLParams([readFromHash]) ⇒ <code>object</code>
+Transforms current URL query string into key->value object
+
+**Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
+**Returns**: <code>object</code> - Key-value read from current URL query  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [readFromHash] | <code>boolean</code> | <code>false</code> | Switch to reading from hash URL part (for retro-compatibility) |
+
+<a name="Panoramax.utils.URLHandler+currentMapString"></a>
+
+### urlHandler.currentMapString() ⇒ <code>string</code>
+Get string representation of map position
+
+**Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
+**Returns**: <code>string</code> - zoom/lat/lon or zoom/lat/lon/bearing/pitch  
+<a name="Panoramax.utils.URLHandler+currentPSVString"></a>
+
+### urlHandler.currentPSVString() ⇒ <code>string</code>
+Get PSV view position as string
+
+**Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
+**Returns**: <code>string</code> - x/y/z  
+<a name="Panoramax.utils.URLHandler+nextShortLink"></a>
+
+### urlHandler.nextShortLink() ⇒ <code>str</code>
+Get short link URL (query replaced by Base64)
+
+**Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
+**Returns**: <code>str</code> - The short link URL  
+<a name="Panoramax.utils.URLHandler+getUnmanagedParameters"></a>
+
+### urlHandler.getUnmanagedParameters(prevUrl)
+Returns a string containing only parameters out of URLHandler scope
+
+**Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| prevUrl | <code>URL</code> | The previously set URL |
+
+<a name="Panoramax.utils.URLHandler+event_url-changed"></a>
+
+### "url-changed"
+URL changed event
+
+**Kind**: event emitted by [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.url | <code>string</code> | The new used URL |
+

package/docs/reference.md

@@ -0,0 +1,79 @@
+# API reference overview
+
+All of components and classes are grouped in the imported library named `Panoramax`.
+
+## `components.core`
+
+Main web components:
+
+- [Basic](./reference/components/core/Basic.md) : base class for other components, embedding shared logic.
+- [CoverageMap](./reference/components/core/CoverageMap.md) : map showing Panoramax data availability.
+- [Editor](./reference/components/core/Editor.md) : photo and map display for editing purposes.7
+- [PhotoViewer](./reference/components/core/PhotoViewer.md) : the classic photo-only viewer.
+- [Viewer](./reference/components/core/Viewer.md) : the photo and map viewer.
+
+## `components.layout`
+
+Layout helpers:
+
+- [BottomDrawer](./reference/components/layout/BottomDrawer.md) : a mobile-like drawer from screen bottom.
+- [CorneredGrid](./reference/components/layout/CorneredGrid.md) : corner-oriented layout over a background component.
+- [Mini](./reference/components/layout/Mini.md) : reduced and collapsable mini component.
+- [Tabs](./reference/components/layout/Tabs.md) : tabbed content manager.
+
+## `components.menus`
+
+All-in-one, ready-to-use menus for complex operations. Note that they don't embed a container (like popup or panel) to be reusable in any situation.
+
+- [MapBackground](./reference/components/menus/MapBackground.md) : change map background.
+- [MapFilters](./reference/components/menus/MapFilters.md) : set map filters.
+- [MapLayers](./reference/components/menus/MapLayers.md) : change map theme and background.
+- [MapLegend](./reference/components/menus/MapLegend.md) : display map sources and Panoramax info.
+- [PictureLegend](./reference/components/menus/PictureLegend.md) : display date, author and info for a picture.
+- [PictureMetadata](./reference/components/menus/PictureMetadata.md) : display full details about a picture.
+- [PlayerOptions](./reference/components/menus/PlayerOptions.md) : speed and constrast settings for play sequence feature.
+- [QualityScoreDoc](./reference/components/menus/QualityScoreDoc.md) : details about quality score computation.
+- [ReportForm](./reference/components/menus/ReportForm.md) : picture issue reporting form.
+- [ShareMenu](./reference/components/menus/ShareMenu.md) : links and iframe sharing.
+
+## `components.ui`
+
+Basic UI components:
+
+- [Button](./reference/components/ui/Button.md) : a simple button.
+- [ButtonGroup](./reference/components/ui/ButtonGroup.md) : button bar.
+- [CopyButton](./reference/components/ui/CopyButton.md) : a copy-to-clipboard button.
+- [Grade](./reference/components/ui/Grade.md) : a 5-star rating display.
+- [LinkButton](./reference/components/ui/LinkButton.md) : a link button.
+- [ListGroup](./reference/components/ui/ListGroup.md) : a menu-like list of buttons and links.
+- [Loader](./reference/components/ui/Loader.md) : the fullscreen initial loader.
+- [Map](./reference/components/ui/Map.md) : the browseable map (MapLibre GL).
+- [MapMore](./reference/components/ui/MapMore.md) : advanced version of the browseable map.
+- [Photo](./reference/components/ui/Photo.md) : the picture display (Photo Sphere Viewer).
+- [Popup](./reference/components/ui/Popup.md) : an overlaying popup/modal.
+- [ProgressBar](./reference/components/ui/ProgressBar.md) : a progress bar.
+- [QualityScore](./reference/components/ui/QualityScore.md) : a A/B/C/D/E grade display and input.
+- [SearchBar](./reference/components/ui/SearchBar.md) : a search bar.
+- [TogglableGroup](./reference/components/ui/TogglableGroup.md) : an helper for showing a menu on button click.
+
+
+## `components.ui.widgets`
+
+More complex UI components (but not menus):
+
+- [GeoSearch](./reference/components/ui/widgets/GeoSearch.md) : a geocoder search bar with GPS location tool.
+- [Legend](./reference/components/ui/widgets/Legend.md) : a togglable map/picture legend.
+- [MapFiltersButton](./reference/components/ui/widgets/MapFiltersButton.md) : a togglable map filters button & menu.
+- [MapLayersButton](./reference/components/ui/widgets/MapLayersButton.md) : a togglable map layers button & menu.
+- [OSMEditors](./reference/components/ui/widgets/OSMEditors.md) : shortcuts for OpenStreetMap editing tools.
+- [PictureLegendActions](./reference/components/ui/widgets/PictureLegendActions.md) : various actions from picture legend.
+- [Player](./reference/components/ui/widgets/Player.md) : the previous/next/play/pause toolbar.
+- [Zoom](./reference/components/ui/widgets/Zoom.md) : the +/- zoom toolbar.
+
+## `utils`
+
+General helpers outside of single component scope:
+
+- [API](./reference/utils/API.md) : the Panoramax API helper (many get & post HTTP helpers).
+- [InitParameters](./reference/utils/InitParameters.md) : helper for merging URL and component parameters.
+- [URLHandler](./reference/utils/URLHandler.md) : the window URL manager (changes query part).

package/docs/shortcuts.md

@@ -0,0 +1,11 @@
+# Keyboard shortcuts
+
+All interactions with the viewer can be done using the mouse, and some can be also done using keyboard.
+
+* __Arrows__ (or 2/4/8/6 on keypad): move inside the picture, or move the map
+* __Page up/down__ (or 3/9 on keypad) : go to next or previous picture in sequence
+* __+ / -__ : zoom picture or map in or out
+* __*__ (or 5 on keypad) : move picture or map to its center
+* __Home / ↖️__ (or 7 on keypad) : switch map and picture as main shown component
+* __End__ (or 1 on keypad) : hide minimized map or picture
+* __Space__ : play or pause current sequence

package/docs/tutorials/aerial_imagery.md

@@ -0,0 +1,19 @@
+# Adding aerial imagery
+
+In complement of classic _streets_ rendering, you can add an aerial imagery as map background. This is possible using a WMS or WMTS service, and setting configuration as following (this example uses the French IGN aerial imagery):
+
+```html
+<pnx-viewer
+  endpoint="https://panoramax.ign.fr/api"
+  map='{"raster": {
+    "type": "raster",
+    "tiles": [
+      "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
+    ],
+    "minzoom": 0,
+    "maxzoom": 21,
+    "attribution": "&copy; IGN",
+    "tileSize": 256
+  }}'
+/>
+```

package/docs/tutorials/authentication.md

@@ -0,0 +1,10 @@
+# Authentication against API
+
+If the STAC API you're using needs some kind of authentication, you can pass it through any core component options. Parameter `fetchOptions` allows you to set custom parameters for the [JS fetch function](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters), like the `credentials` setting. For example:
+
+```html
+<pnx-viewer
+	endpoint="https://your-secured-stac.fr/api"
+	fetchOptions='{ "credentials": "include" }'
+/>
+```

package/docs/tutorials/custom_widgets.md

@@ -0,0 +1,59 @@
+# Manage custom widgets
+
+The viewer allows you to manage finely its widgets, you can either add or replace all widgets offered by the viewer.
+
+We use internally [slots](https://developer.mozilla.org/docs/Web/HTML/Element/slot) to make this possible. Each corner of the viewer is identified uniquely, so you can add in the exact place you'd like. This is in a similar fashion to MapLibre GL or Leaflet widgets management.
+
+!!! note
+
+	This is only available for __Viewer__ & __Photo Viewer__ components, not for _Coverage Map_ or _Editor_.
+
+
+## Add a new widget
+
+Let's say you want to add a custom widget without removing existing viewer ones. You can insert your element inside of the viewer markup:
+
+```html
+<pnx-viewer
+  endpoint="https://panoramax.openstreetmap.fr/"
+>
+  <p slot="top-right">My custom text</p>
+</pnx-viewer>
+```
+
+The magic happens here thanks to the `slop="top-right"` attribute on your element. You can use any corner you like (`top-left`, `top`, `top-right`, `bottom-left`, `bottom`, `bottom-right`), and add several elements on a same corner (they will stack depending of existing CSS styles).
+
+## Replace all widgets
+
+For finer control, you may want to get rid of all existing widgets before adding your own ones. This is also possible by setting `widgets="false"` attribute on the viewer:
+
+```html
+<pnx-viewer
+  endpoint="https://panoramax.openstreetmap.fr/"
+  widgets="false"
+>
+  <p slot="top-right">My custom text</p>
+</pnx-viewer>
+```
+
+Note that this keeps only the _Mini_ map/picture display (in bottom-left corner).
+
+!!! note
+
+	If you don't need map at all, you can also use the [Photo Viewer](../reference/components/core/PhotoViewer.md) component, which is a picture display without any map.
+
+
+## Reuse default widgets
+
+You may also want to reuse differently existing widgets. Note that all of them are listed in the [API reference](../reference.md). Just insert them as slotted components inside the viewer:
+
+```html
+<pnx-viewer
+  endpoint="https://panoramax.openstreetmap.fr/"
+  widgets="false"
+>
+  <pnx-widget-zoom slot="top-right" />
+</pnx-viewer>
+```
+
+Note that parent variables (`_parent` and `_t`) are automatically passed through by the viewer, no need to add it manually.

package/docs/tutorials/map_style.md

@@ -0,0 +1,39 @@
+# Change map background style
+
+All components can be configured to use a different map background than the default one. By default, an OpenStreetMap France classic style if offered. Changing the style is done by passing a `mapstyle` parameter on viewer setup. It should follow the [MapLibre Style specification](https://maplibre.org/maplibre-style-spec/) and be passed as an object, or an URL to such style:
+
+```html
+<pnx-viewer
+  endpoint="https://api.panoramax.xyz/api"
+  mapstyle="https://my.tiles.provider/basic.json"
+/>
+```
+
+Note that we also support PMTiles (for a simpler tile hosting), so your style file can contain vector source defined like this:
+
+```html
+<pnx-viewer
+  endpoint="https://api.panoramax.xyz/api"
+  mapstyle='{
+    "sources": {
+      "protomaps": {
+          "type": "vector",
+          "url": "pmtiles://https://example.com/example.pmtiles",
+      }
+    }
+    ...
+  }'
+/>
+```
+
+And you can also customize the map attribution, especially if your style JSON doesn't contain any by default, for example:
+
+```html
+<pnx-viewer
+  endpoint="https://api.panoramax.xyz/api"
+  mapstyle="https://my.tiles.provider/basic.json"
+  map='{
+    "attributionControl": { "customAttribution": "&copy; IGN" }
+  }'
+/>
+```

package/docs/tutorials/migrate_v4.md

@@ -0,0 +1,153 @@
+# Migration from v3 to v4
+
+The version 4 of _Panoramax Web Viewer_ has seen major changes, migrating from custom code to Web Components. This requires you to change a few things compared to version 3.
+
+!!! note
+
+	If at some point you're lost or need help, you can contact us through [issues](https://gitlab.com/panoramax/clients/web-viewer/-/issues) or by [email](mailto:panoramax@panoramax.fr).
+
+## 🪄 Initializing components
+
+The way you create a component (viewer, editor, coverage map) is different :
+
+=== "v4"
+
+	Now, you have to create a HTML-like component and pass attributes.
+
+	```html
+	<pnx-viewer id="myviewer" endpoint="https://api.panoramax.xyz/api" />
+	```
+
+	You can then access it in JS to manage it.
+
+	```js
+	let myviewer = document.getElementById("myviewer");
+	```
+
+	Also note that custom MapLibre style must be passed as `mapstyle` attribute.
+
+=== "v3"
+
+	Before, you created a `div` with ID, then passed it to JS class.
+
+	```js
+	let myViewer = new Panoramax.Viewer("viewer", "https://api.panoramax.xyz/api");
+	```
+
+	And MapLibre style was passed as a `style` property in option object.
+
+## ⏯️ Widgets options
+
+Viewer widgets options are managed quite differently in version 4:
+
+- You can disable all widgets with `widgets="false" map="false"` options
+- You can add or replace widgets using web component slots (insert your own widgets as child of viewer)
+
+This allows to do things like:
+
+```html
+<pnx-viewer
+  endpoint="https://panoramax.openstreetmap.fr/"
+  widgets="false"
+>
+  <p slot="top-right">My custom text</p>
+</pnx-viewer>
+```
+
+This offers more flexibility, check out [how to manage custom widgets in dedicated documentation](./custom_widgets.md).
+
+## 🏷️ Class & packages names
+
+Many stuff was moved around, and have a bit different naming. Main classes should be called directly by their web component name:
+
+| v3 class | v4 web component |
+|----------|------------------|
+| `Panoramax.Viewer` | `<pnx-viewer>` |
+| `Panoramax.Editor` | `<pnx-editor>` |
+| `Panoramax.StandaloneMap` | `<pnx-coverage-map>` |
+
+A new main component is available, named __Photo Viewer__ (`<pnx-photo-viewer>`) for showing up only picture (without map).
+
+And source code is splitted in more packages:
+
+* `Panoramax.components` : everything you can see graphically
+    * `.core` : Viewer, Editor, Coverage Map and Basic (common code)
+    * `.layout` : helper classes for layout
+    * `.menus` : complex menus (map filters, picture metadata...)
+    * `.ui` : re-usable small graphical components
+    * `.ui.widgets` : specialized small graphical components (button + menu, extended search bar...)
+* `Panoramax.utils` : helper classes and functions
+
+## 👂 Events
+
+Many events names were changed, and some of them moved to sub-components.
+
+| v3 class | v3 event name                     | v4 class               | v4 event name |
+|----------|-----------------------------------|------------------------|---------------|
+| CoreView | `map:background-changed`          | components.ui.Map      | `background-changed` |
+| CoreView | `map:picture-click`               | components.ui.Map      | `picture-click` |
+| CoreView | `map:sequence-hover`              | components.ui.Map      | `sequence-hover` |
+| CoreView | `map:sequence-click`              | components.ui.Map      | `sequence-click` |
+| CoreView | `map:users-changed`               | components.ui.Map      | `users-changed` |
+| CoreView | `psv:picture-loaded`              | components.ui.Photo    | `picture-loaded` |
+| CoreView | `psv:picture-loading`             | components.ui.Photo    | `picture-loading` |
+| CoreView | `psv:picture-preview-started`     | components.ui.Photo    | `picture-preview-started` |
+| CoreView | `psv:picture-preview-stopped`     | components.ui.Photo    | `picture-preview-stopped` |
+| CoreView | `psv:picture-tiles-loaded`        | components.ui.Photo    | `picture-tiles-loaded` |
+| CoreView | `psv:view-rotated`                | components.ui.Photo    | `view-rotated` |
+| CoreView | `psv:transition-duration-changed` | components.ui.Photo    | `transition-duration-changed` |
+| Viewer   | `filters-changed`                 | components.ui.MapMore  | `filters-changed` |
+| Viewer   | `focus-changed`                   | components.core.Viewer | `focus-changed` |
+| Viewer   | `josm-live-enabled`               | ❌ Removed              | |
+| Viewer   | `josm-live-disabled`              | ❌ Removed              | |
+| Viewer   | `pictures-navigation-changed`     | components.ui.Photo     | `pictures-navigation-changed` |
+| Viewer   | `sequence-playing`                | components.ui.Photo     | `sequence-playing` |
+| Viewer   | `sequence-stopped`                | components.ui.Photo     | `sequence-stopped` |
+
+To listen to these events, you can use `map` and `psv` properties of your component.
+
+```js
+myviewer.addEventListener("focus-changed", e => console.log(e));
+myviewer.psv.addEventListener("sequence-playing", e => console.log(e));
+
+// Note that MapLibre uses on/once functions for events
+myviewer.map.on("picture-click", e => console.log(e));
+```
+
+To make use of these sub-components events easier, note that you can also call them from parent component using the property name as a prefix. For example:
+
+```js
+// Transfers listener to map sub-component
+myviewer.addEventListener("map:moveend", e => console.log(e));
+
+// Works for any sub-component, like URL Handler or PSV
+myviewer.addEventListener("urlHandler:url-changed", e => console.log(e));
+myviewer.addEventListener("psv:picture-loaded", e => console.log(e));
+```
+
+To know more about available events per component, please refer [to their individual API page](../reference.md).
+
+## ⚙️ Functions
+
+Many functions were changed as well, in order to reduce source files size and make things more logical. You can find [all API reference in this doc](../reference.md), here's a summary:
+
+| v3 | v4 |
+|---------------------|---------------------|
+| `Viewer.refreshPSV` | `(components.ui).Photo.forceRefresh` |
+| `Viewer`'s play/stop/toggle sequence | Gone to `(components.ui).Photo` |
+| `Viewer`'s get/set pictures navigation | Gone to `(components.ui).Photo` |
+| `Viewer.toggleJOSMLive` | Made private in `(components.ui.widgets).Share` |
+| `Viewer`'s set/toggle focus/unfocused | Managed through `(components.core).Viewer` `focus` attribute and `mini` property |
+| `Viewer.setFilters` | `(components.ui).MapMore` |
+
+## 🌍 URL parameters
+
+URL parameters are now managed in the URL _search_ part (everything after the `?`), whereas in version 3 it was managed through _hash_ part (everything after the `#`). To ensure long-term compatibility, you may just replace the `#` in your URL by `?`. Here's an example of these new URL:
+
+```urlencoded
+https://panoramax.ign.fr/?background=streets&focus=map&map=9/48.6659/2.3237&speed=250
+```
+
+## 🪛 Initialization parameters
+
+Parameters passed to __Viewer__ are more finely read, they can come from Web Component itself (attributes), browser local storage or URL search parameters. URL ones are read first, then local storage, and finally component attributes. This can be misleading while you develop, [read more about this on Develop documentation](../09_Develop.md#parameters-handling).

package/docs/tutorials/synced_coverage.md

@@ -0,0 +1,43 @@
+# Coverage map synced with external component
+
+Let's say you want to list all sequences of an user. You can display a standalone map which can be synced with your custom list. Create your _Coverage Map_ web component:
+
+```html
+<pnx-coverage-map
+  id="coverage"
+  class="fullpage"
+  endpoint="https://api.panoramax.xyz/api"
+/>
+```
+
+Then, access it through JavaScript for further interaction:
+
+```js
+// Retrieve component from DOM
+var coverage = document.getElementById("coverage");
+
+// Wait for map initial load
+coverage.addEventListener("ready", () => {
+	// Change visible map area
+	coverage.map.fitBounds([0, 0, 180, 90]);
+
+	// Listen to sequence hovered on map
+	// You can alternatively use: coverage.addEventListener("map:sequence-hover", ...)
+	coverage.map.on("sequence-hover", e => {
+		console.log("Hovered sequence", e.seqId);
+	});
+
+	// Listen to user clicks on map
+	coverage.addEventListener("select", e => {
+		console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
+	});
+
+	// You can also programatically change selection on map
+	coverage.select(
+		"c463d190-06b0-47fb-98a8-b4a775a39ad6", // A sequence ID
+		"bdea1eb4-4496-46da-a4d5-b22b16e75fa8"  // A picture ID (can be null if unknown)
+	);
+}, {once: true});
+```
+
+All available interaction are listed in [Coverage Map reference](../reference/components/core/CoverageMap.md).

package/mkdocs.yml

@@ -20,6 +20,7 @@ plugins:
 markdown_extensions:
   - admonition
   - pymdownx.superfences
+  - pymdownx.details
   - pymdownx.tabbed:
       alternate_style: true
   - pymdownx.highlight:
@@ -34,12 +35,72 @@ markdown_extensions:
       emoji_generator: !!python/name:material.extensions.emoji.to_svg
 
 nav:
-  - 'Quick start': '01_Start.md'
-  - Configuration:
+  - 'Quick start': 'index.md'
+  - 'Migrating to v4': 'tutorials/migrate_v4.md'
+  - Tips:
     - 'URL settings': '03_URL_settings.md'
-    - 'Advanced examples': '04_Advanced_examples.md'
-  - Developping:
+    - Shortcuts: 'shortcuts.md'
+  - Tutorials:
+    - 'Change map style': 'tutorials/map_style.md'
+    - 'Add aerial imagery': 'tutorials/aerial_imagery.md'
+    - 'Server authentication': 'tutorials/authentication.md'
+    - 'Custom widgets': 'tutorials/custom_widgets.md'
+    - 'Synced coverage map': 'tutorials/synced_coverage.md'
+  - Develop:
     - 'Where to start': '09_Develop.md'
-    - 'Viewer''s API reference': '02_Usage.md'
     - 'STAC API compatibility': '05_Compatibility.md'
     - 'Make a release': '90_Releases.md'
+  - 'API reference':
+    - Overview: 'reference.md'
+    - components:
+      - core:
+        - Basic: 'reference/components/core/Basic.md'
+        - CoverageMap: 'reference/components/core/CoverageMap.md'
+        - Editor: 'reference/components/core/Editor.md'
+        - PhotoViewer: 'reference/components/core/PhotoViewer.md'
+        - Viewer: 'reference/components/core/Viewer.md'
+      - layout:
+        - BottomDrawer: 'reference/components/layout/BottomDrawer.md'
+        - CorneredGrid: 'reference/components/layout/CorneredGrid.md'
+        - Mini: 'reference/components/layout/Mini.md'
+        - Tabs: 'reference/components/layout/Tabs.md'
+      - menus:
+        - MapBackground: 'reference/components/menus/MapBackground.md'
+        - MapFilters: 'reference/components/menus/MapFilters.md'
+        - MapLayers: 'reference/components/menus/MapLayers.md'
+        - MapLegend: 'reference/components/menus/MapLegend.md'
+        - PictureLegend: 'reference/components/menus/PictureLegend.md'
+        - PictureMetadata: 'reference/components/menus/PictureMetadata.md'
+        - PlayerOptions: 'reference/components/menus/PlayerOptions.md'
+        - QualityScoreDoc: 'reference/components/menus/QualityScoreDoc.md'
+        - ReportForm: 'reference/components/menus/ReportForm.md'
+        - ShareMenu: 'reference/components/menus/ShareMenu.md'
+      - ui:
+        - widgets:
+          - GeoSearch: 'reference/components/ui/widgets/GeoSearch.md'
+          - Legend: 'reference/components/ui/widgets/Legend.md'
+          - MapFiltersButton: 'reference/components/ui/widgets/MapFiltersButton.md'
+          - MapLayersButton: 'reference/components/ui/widgets/MapLayersButton.md'
+          - OSMEditors: 'reference/components/ui/widgets/OSMEditors.md'
+          - PictureLegendActions: 'reference/components/ui/widgets/PictureLegendActions.md'
+          - Player: 'reference/components/ui/widgets/Player.md'
+          - Zoom: 'reference/components/ui/widgets/Zoom.md'
+        - Button: 'reference/components/ui/Button.md'
+        - ButtonGroup: 'reference/components/ui/ButtonGroup.md'
+        - CopyButton: 'reference/components/ui/CopyButton.md'
+        - Grade: 'reference/components/ui/Grade.md'
+        - LinkButton: 'reference/components/ui/LinkButton.md'
+        - ListGroup: 'reference/components/ui/ListGroup.md'
+        - Loader: 'reference/components/ui/Loader.md'
+        - Map: 'reference/components/ui/Map.md'
+        - MapMore: 'reference/components/ui/MapMore.md'
+        - Photo: 'reference/components/ui/Photo.md'
+        - Popup: 'reference/components/ui/Popup.md'
+        - ProgressBar: 'reference/components/ui/ProgressBar.md'
+        - QualityScore: 'reference/components/ui/QualityScore.md'
+        - SearchBar: 'reference/components/ui/SearchBar.md'
+        - TogglableGroup: 'reference/components/ui/TogglableGroup.md'
+    - utils:
+      - API: 'reference/utils/API.md'
+      - InitParameters: 'reference/utils/InitParameters.md'
+      - URLHandler: 'reference/utils/URLHandler.md'