@panoramax/web-viewer 3.2.3-develop-d7e5a16d → 3.2.3-develop-6257391e

package/docs/reference/utils/InitParameters.md

@@ -0,0 +1,67 @@
+<a name="Panoramax.utils.InitParameters"></a>
+
+## Panoramax.utils.InitParameters
+**Kind**: static class of <code>Panoramax.utils</code>  
+
+* [.InitParameters](#Panoramax.utils.InitParameters)
+    * [new InitParameters([componentAttrs], [urlParams])](#new_Panoramax.utils.InitParameters_new)
+    * [.getParentInit()](#Panoramax.utils.InitParameters+getParentInit)
+    * [.getParentPostInit()](#Panoramax.utils.InitParameters+getParentPostInit)
+    * [.getPSVInit()](#Panoramax.utils.InitParameters+getPSVInit)
+    * [.getPSVPostInit()](#Panoramax.utils.InitParameters+getPSVPostInit)
+    * [.getMapInit()](#Panoramax.utils.InitParameters+getMapInit)
+    * [.getMapPostInit()](#Panoramax.utils.InitParameters+getMapPostInit)
+
+<a name="new_Panoramax.utils.InitParameters_new"></a>
+
+### new InitParameters([componentAttrs], [urlParams])
+Merges all URL parameters and component attributes into a single set of coherent settings.
+
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [componentAttrs] | <code>object</code> | HTML attributes from parent component |
+| [urlParams] | <code>object</code> | Parameters extracted from URL |
+
+<a name="Panoramax.utils.InitParameters+getParentInit"></a>
+
+### initParameters.getParentInit()
+Get core component initialization parameters.
+They must be passed as soon as possible.
+
+**Kind**: instance method of [<code>InitParameters</code>](#Panoramax.utils.InitParameters)  
+<a name="Panoramax.utils.InitParameters+getParentPostInit"></a>
+
+### initParameters.getParentPostInit()
+Get core component post-initialization parameters.
+They must be passed after first rendering or init.
+
+**Kind**: instance method of [<code>InitParameters</code>](#Panoramax.utils.InitParameters)  
+<a name="Panoramax.utils.InitParameters+getPSVInit"></a>
+
+### initParameters.getPSVInit()
+Get Photo Sphere Viewer initialization parameters.
+They must be passed as soon as possible.
+
+**Kind**: instance method of [<code>InitParameters</code>](#Panoramax.utils.InitParameters)  
+<a name="Panoramax.utils.InitParameters+getPSVPostInit"></a>
+
+### initParameters.getPSVPostInit()
+Get Photo Sphere Viewer post-initialization parameters.
+They must be passed after first rendering or init.
+
+**Kind**: instance method of [<code>InitParameters</code>](#Panoramax.utils.InitParameters)  
+<a name="Panoramax.utils.InitParameters+getMapInit"></a>
+
+### initParameters.getMapInit()
+Get MapLibre GL initialization parameters.
+They must be passed as soon as possible.
+
+**Kind**: instance method of [<code>InitParameters</code>](#Panoramax.utils.InitParameters)  
+<a name="Panoramax.utils.InitParameters+getMapPostInit"></a>
+
+### initParameters.getMapPostInit()
+Get MapLibre GL post-initialization parameters.
+They must be passed after first rendering or init.
+
+**Kind**: instance method of [<code>InitParameters</code>](#Panoramax.utils.InitParameters)  

package/docs/reference/utils/URLHandler.md

@@ -0,0 +1,102 @@
+<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()](#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() ⇒ <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  
+<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,73 @@
+# 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.
+- [Viewer](./reference/components/core/Viewer.md) : the classic photo and map viewer.
+
+## `components.layout`
+
+Layout helpers:
+
+- [CorneredGrid](./reference/components/layout/CorneredGrid.md) : corner-oriented layout over a background component.
+- [Mini](./reference/components/layout/Mini.md) : reduced and collapsable mini component.
+
+## `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/
+- [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.
+- [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.
+- [Player](./reference/components/ui/widgets/Player.md) : the previous/next/play/pause toolbar.
+- [Share](./reference/components/ui/widgets/Share.md) : a togglable share button & menu.
+- [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,64 @@
+# 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__ component, 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), if you want to get rid of it as well, you can with `map="false"` attribute:
+
+```html
+<pnx-viewer
+  endpoint="https://panoramax.openstreetmap.fr/"
+  widgets="false"
+  map="false"
+>
+  <p slot="top-right">My custom text</p>
+</pnx-viewer>
+```
+
+## 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,27 @@
+# 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 `style` 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"
+  style="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"
+  style='{
+    "sources": {
+      "protomaps": {
+          "type": "vector",
+          "url": "pmtiles://https://example.com/example.pmtiles",
+      }
+    }
+    ...
+  }'
+/>
+```

package/docs/tutorials/migrate_v4.md

@@ -0,0 +1,122 @@
+# 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");
+	```
+
+=== "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");
+	```
+
+## ⏯️ 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>` |
+
+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 have to 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));
+```
+
+## ⚙️ 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` |

package/docs/tutorials/synced_coverage.md

@@ -0,0 +1,42 @@
+# 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
+	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,66 @@ 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'
+        - Viewer: 'reference/components/core/Viewer.md'
+      - layout:
+        - CorneredGrid: 'reference/components/layout/CorneredGrid.md'
+        - Mini: 'reference/components/layout/Mini.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'
+          - Player: 'reference/components/ui/widgets/Player.md'
+          - Share: 'reference/components/ui/widgets/Share.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'
+        - 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'
+        - 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'