@panoramax/web-viewer 4.4.0-develop-3839b5a4 → 4.4.0-develop-f91f6758

package/docs/reference.md

@@ -1,99 +0,0 @@
-# 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.
-
-- [LocationPrecisionDoc](./reference/components/menus/LocationPrecisionDoc.md) : details about location precision filter.
-- [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.
-- [MiniPictureLegend](./reference/components/menus/PictureLegend.md) : display date of a picture when it's shown reduced.
-- [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.
-- [SemanticsDoc](./reference/components/menus/SemanticsDoc.md) : short documentation on what area semantics.
-- [SemanticsDownload](./reference/components/menus/SemanticsDownload.md) : short documentation on where to download semantics data.
-- [SemanticsFilters](./reference/components/menus/SemanticsFilters.md) : list of semantics overlays to show/hide on map.
-- [SemanticsList](./reference/components/menus/SemanticsList.md) : selected picture list of semantics (tags and annotations).
-- [SemanticsMetadata](./reference/components/menus/SemanticsMetadata.md) : display full details about a picture semantics.
-- [ShareMenu](./reference/components/menus/ShareMenu.md) : links and iframe sharing.
-
-## `components.ui`
-
-Basic UI components:
-
-- [AnnotationsSwitch](./reference/components/ui/AnnotationsSwitch.md) : a switch button for showing/hiding picture annotations.
-- [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.
-- [GradeFilter](./reference/components/ui/GradeFilter.md) : a 5-star rating input selector.
-- [IconSwitch](./reference/components/ui/IconSwitch.md) : a switch button.
-- [LinkButton](./reference/components/ui/LinkButton.md) : a link button.
-- [ListGroup](./reference/components/ui/ListGroup.md) : a menu-like list of buttons and links.
-- [ListItem](./reference/components/ui/ListItem.md) : a Material Design-like list entry.
-- [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.
-- [SemanticsEditor](./reference/components/ui/SemanticsEditor.md) : input field for editing semantic tags of a picture/annotation.
-- [SemanticsTable](./reference/components/ui/SemanticsTable.md) : table for showing complete semantic tags of a picture/annotation.
-- [Switch](./reference/components/ui/Switch.md) : on/off switch button.
-- [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):
-
-- [CopyCoordinates](./reference/components/ui/widgets/CopyCoordinates.md) : a copy-to-clipboard button for coordinates, with many format options.
-- [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.
-- [LevelSelect](./reference/components/ui/widgets/LevelSelect.md) : level selector (only with MapLibre indoor= plugin).
-- [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.
-- [SemanticsFiltersButton](./reference/components/ui/widgets/SemanticsFiltersButton.md) : a togglable semantics overlays 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.
-- [MapStyleComposer](./reference/utils/MapStyleComposer.md) : the Map style helper for simpler layer management.
-- [PresetsManager](./reference/utils/PresetsManager.md) : the semantics attributes presets manager.
-- [SemanticsMapProtocol](./reference/utils/SemanticsMapProtocol.md) : MapLibre protocol for loading semantics overlays.
-- [URLHandler](./reference/utils/URLHandler.md) : the window URL manager (changes query part).

package/docs/shortcuts.md

@@ -1,11 +0,0 @@
-# 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

@@ -1,21 +0,0 @@
-# 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-options='{
-    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_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
-      ],
-      minzoom: 0,
-      maxzoom: 19,
-      attribution: "&copy; IGN",
-      tileSize: 256
-    }
-  }'
-></pnx-viewer>
-```

package/docs/tutorials/authentication.md

@@ -1,10 +0,0 @@
-# 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 `fetch-options` 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"
-	fetch-options='{ "credentials": "include" }'
-/>
-```

package/docs/tutorials/custom_widgets.md

@@ -1,59 +0,0 @@
-# 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/indoor_maps.md

@@ -1,50 +0,0 @@
-# Indoor mapping support
-
-For some use cases (touristic venues, emergency response, public transit...), it can be interesting to offer __Indoor mapping support__ in your viewer. Panoramax offers this through two complementary datasets:
-
-- __Panoramax Semantics__, with the `osm|level=n` tag. Add it on your selected pictures or sequences this tag through _Tags_ editor or `semantics` API.
-- __OpenStreetMap [Simple Indoor Tagging](https://wiki.openstreetmap.org/wiki/Simple_Indoor_Tagging)__, the tag model to map building indoors. We rely on [indoor=](https://indoorequal.org) stack for map display.
-
-![Screenshot of viewer with indoor map enabled on Rennes train station at level 2](../images/indoor_level.png)
-
-To offer indoor maps in Panoramax viewer, you have to:
-
-- Make sure __proper indoor mapping is available in OpenStreetMap__, check [indoor=](https://indoorequal.org/) map to see covered maps. If missing, you can contribute to OpenStreetMap, or get help from [community](https://www.openstreetmap.org/communities) or [professionals](https://fposm.fr/) to add your own building in OSM.
-- Enable [maplibre-gl-indoorequal](https://indoorequal.com/doc/maplibre-gl-indoorequal) plugin in your web page:
-
-```html
-<script src="https://unpkg.com/maplibre-gl-indoorequal@1.3.0/dist/maplibre-gl-indoorequal.umd.min.js"></script>
-<link href="https://unpkg.com/maplibre-gl-indoorequal@1.3.0/maplibre-gl-indoorequal.css" rel="stylesheet" />
-```
-
-- Set `indoor` parameters in your Panoramax Viewer, based on [maplibre-gl-indoorequal's constructor options](https://indoorequal.com/doc/maplibre-gl-indoorequal/api#parameters):
-
-```html
-<pnx-viewer
-  id="viewer"
-  map-options='{
-    indoor: {
-      apiKey: "GET YOURS @ https://indoorequal.com/",
-      heatmap: false
-    }
-  }'
-></pnx-viewer>
-```
-
-!!! note
-	You can rely on any _indoor=_ server by changing `url` parameter.
-
-Note that you can avoid systematic API calls to Indoor= and Panoramax semantics APIs by enabling indoor maps, but making if not visible by default:
-
-```html
-<pnx-viewer
-  id="viewer"
-  map-options='{
-    indoor: {
-      apiKey: "GET YOURS @ https://indoorequal.com/",
-      heatmap: false,
-	  visible: false
-    }
-  }'
-></pnx-viewer>
-```

package/docs/tutorials/map_style.md

@@ -1,83 +0,0 @@
-# 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 `map-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"
-  map-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"
-  map-style='{
-    "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"
-  map-style="https://my.tiles.provider/basic.json"
-  map-options='{
-    "attributionControl": { "customAttribution": "&copy; IGN" }
-  }'
-/>
-```
-
-## Aerial imagery
-
-If you'd like to offer aerial imagery along classic map style, check out [Adding aerial imagery](./aerial_imagery.md) documentation.
-
-## Complementary backgrounds
-
-If you'd like to have many more basemaps, it's possible using `map-options.basemaps` parameters. In there, you can add as many basemaps as wanted. You can defined them using either [MapLibre Style object](https://maplibre.org/maplibre-style-spec/) or an URL to a style JSON or direct TMS endpoint definition.
-
-Here's a full example of possible definitions:
-
-```html
-<pnx-viewer
-  id="viewer"
-  class="fullpage"
-  map-options='{
-    basemaps: {
-      "JSON Style URL": "https://tile-vect.openstreetmap.fr/styles/topo/style.json",
-      "TMS URL": "https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
-      "TMS URL with maxzoom": "https://a.tile.openstreetmap.fr/osmfr/{z:19}/{x}/{y}.png",
-      maplibrestyle: {
-        sources: {
-            "osmbzh": {
-                "type": "raster",
-                "tiles": ["https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png"],
-                "tileSize": 256,
-                "minzoom": 0,
-                "maxzoom": 19,
-                "attribution": "&copy; <a href=\"...\">Custom attribution</a>",
-            }
-        },
-        "layers": [
-            {
-                "id": "osmbzh",
-                "type": "raster",
-                "source": "osmbzh",
-                "metadata": {"name": "Custom title to display"}
-            }
-        ]
-      }
-    }
-  }'
-></pnx-viewer>
-```

package/docs/tutorials/migrate_v4.md

@@ -1,153 +0,0 @@
-# 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 `map-style` 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-options="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 split into 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/migrate_v5.md

@@ -1,103 +0,0 @@
-# Migrate from v4 to v5
-
-The version 5 of _Panoramax Web Viewer_ has a major rework of its map layers management. This requires you to change a few things compared to version 4.
-
-!!! 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).
-
-## 🗺️ MapStyleComposer
-
-The new [MapStyleComposer](../reference/utils/MapStyleComposer.md) helper allows a more comprehensive management of map layers. Its new features includes:
-
-- Ability to switch between more __basemaps__
-- Switch between many __Panoramax endpoints__ in the same map, preserving filters & themes during the switch
-- Inject custom __data layers__ on top of Panoramax layers (`dataOverlays`), or between basemaps and Panoramax layers (`dataUnderlays`)
-- More independent loading of layers, Panoramax endpoint can be loaded before/after basemaps for example
-
-This class replaces a lot of existing code from `Map, MapMore, API` classes. So, you have a few changes to implement.
-
-### 🪛 Web component parameters
-
-#### `metacatalog`
-
-On [Viewer](../reference/components/core/Viewer.md), pictures and sequences from our metacatalog ([explore.panoramax.fr](https://explore.panoramax.fr)) are shown by default. This behaviour can be changed by setting `metacatalog` to:
-
-- `metacatalog="false"` to only display your API data (previous behaviour)
-- `metacatalog="https://another-metacatalog.org"` to use another server than public metacatalog
-
-#### `users` ➡️ `endpoint-to-use` / `user`
-
-The `users` parameter has been removed from all core components. Instead, for __Viewer__, you can select by default which Panoramax _endpoint_ should be used. It's either your local API, metacatalog, or a single user from or another server. This is done using `endpoint-to-use` parameter:
-
-- `endpoint-to-use="default"` for your local API
-- `endpoint-to-use="metacatalog"` for metacatalog (if not set to `metacatalog="false"`)
-- `endpoint-to-use="890b6268-7716-4e34-ada9-69985e6c1657"` for any specific user UUID (from your local API)
-- `endpoint-to-use="metacatalog_890b6268-7716-4e34-ada9-69985e6c1657"` for any specific user UUID from metacatalog
-
-For __CoverageMap__, `users` parameter is replaced by `user`, and only can take a single user UUID at a time.
-
-### 👂 Events
-
-Various events have been changed in favor of _MapStyleComposer_ ones:
-
-| v4 class | v4 event type        | v5 class         | v5 event type       |
-|----------|----------------------|------------------|---------------------|
-| Map      | `background-changed` | MapStyleComposer | `basemap-changed`   |
-| Map      | `users-changed`      | MapStyleComposer | `panoramax-changed` |
-| MapMore  | `filters-changed`    | MapStyleComposer | `filters-changed`   |
-
-Also note that new events are available on MapStyleComposer for finer management:
-
-- `basemap-added`
-- `basemap-changed`
-- `dataunderlay-added`
-- `dataunderlay-changed`
-- `panoramax-added`
-- `panoramax-changed`
-- `theme-changed`
-- `filters-changed`
-- `dataoverlay-added`
-- `dataoverlay-changed`
-
-### ⚙️ Functions
-
-Several functions have been moved as well to _MapStyleComposer_:
-
-| v4 class | v4 function               | v5 class         | v5 function               | v5 property |
-|----------|---------------------------|------------------|---------------------------|-------------|
-| Map      | `hasTwoBackgrounds`       | MapStyleComposer | `hasManyBasemaps`         |             |
-| Map      | `getBackground`           | MapStyleComposer |                           | `basemap`   |
-| Map      | `setBackground`           | MapStyleComposer | `switchBasemap`           |             |
-| Map      | `getVisibleUsers`         | MapStyleComposer |                           | `panoramax` |
-| Map      | `onceLayerReady`          | MapStyleComposer | `waitFor`                 |             |
-| Map      | `setVisibleUsers`         | MapStyleComposer | `switchPanoramaxEndpoint` |             |
-| Map      | `filterUserLayersContent` | MapStyleComposer | `setPanoramaxFilters`     |             |
-| Map      | `reloadLayersStyles`      | MapStyleComposer | `updateMapStyle`          |             |
-| Map      | `setVisibleUsers`         | MapStyleComposer | `switchPanoramaxEndpoint` |             |
-| API      | `getMapStyle`             | MapStyleComposer | `getMapStyle`             |             |
-| API      | `getUserMapStyle`         | MapStyleComposer | `getMapStyle`             |             |
-
-## ⏯️ Viewer
-
-In order to make a smoother management of loading data from both local API and metacatalog, _Viewer_ now has two API managers in its properties: `api` (classic) and `apiMC` (metacatalog). In most of the cases, you may want to replace explicit calls to local API to call to function `getAPI` in order to get the right API based on map settings.
-
-=== "v5"
-
-	```js
-	// Get the currently selected API
-	let api = viewer.getAPI();
-
-	// For explicit use of local API
-	let apiLocal = viewer.api;
-
-	// For explicit use of metacatalog API
-	let apiMC = viewer.apiMC;
-	```
-
-=== "v4"
-
-	```js
-	// Only local API was available
-	let apiLocal = viewer.api;
-	```