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

package/docs/reference/components/ui/MapMore.md

@@ -0,0 +1,233 @@
+<a name="Panoramax.components.ui.MapMore"></a>
+
+## Panoramax.components.ui.MapMore ⇐ [<code>Map</code>](Map.md/#Panoramax.components.ui.Map)
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: [<code>Map</code>](Map.md/#Panoramax.components.ui.Map)  
+**Emits**: [<code>background-changed</code>](Map.md/#Panoramax.components.ui.Map+event_background-changed), [<code>users-changed</code>](Map.md/#Panoramax.components.ui.Map+event_users-changed), [<code>sequence-hover</code>](Map.md/#Panoramax.components.ui.Map+event_sequence-hover), [<code>sequence-click</code>](Map.md/#Panoramax.components.ui.Map+event_sequence-click), [<code>picture-click</code>](Map.md/#Panoramax.components.ui.Map+event_picture-click), [<code>filters-changed</code>](#Panoramax.components.ui.MapMore+event_filters-changed)  
+
+* [.MapMore](#Panoramax.components.ui.MapMore) ⇐ [<code>Map</code>](Map.md/#Panoramax.components.ui.Map)
+    * [new MapMore(parent, container, [options])](#new_Panoramax.components.ui.MapMore_new)
+    * [.destroy()](Map.md/#Panoramax.components.ui.Map+destroy)
+    * [.waitForEnoughMapLoaded()](Map.md/#Panoramax.components.ui.Map+waitForEnoughMapLoaded) ⇒ <code>Promise</code>
+    * [.reloadVectorTiles()](Map.md/#Panoramax.components.ui.Map+reloadVectorTiles)
+    * [.hasTwoBackgrounds()](Map.md/#Panoramax.components.ui.Map+hasTwoBackgrounds) ⇒ <code>boolean</code>
+    * [.getBackground()](Map.md/#Panoramax.components.ui.Map+getBackground) ⇒ <code>string</code>
+    * [.setBackground(bg)](Map.md/#Panoramax.components.ui.Map+setBackground)
+    * [.getVisibleUsers()](Map.md/#Panoramax.components.ui.Map+getVisibleUsers) ⇒ <code>Array.&lt;string&gt;</code>
+    * [.setVisibleUsers(visibleIds)](Map.md/#Panoramax.components.ui.Map+setVisibleUsers)
+    * [.filterUserLayersContent(dataType, filter)](Map.md/#Panoramax.components.ui.Map+filterUserLayersContent)
+    * [.displayPictureMarker(lon, lat, heading, [skipCenter])](#Panoramax.components.ui.Map+displayPictureMarker)
+    * [.reloadLayersStyles()](Map.md/#Panoramax.components.ui.Map+reloadLayersStyles)
+    * ["filters-changed"](#Panoramax.components.ui.MapMore+event_filters-changed)
+    * ["background-changed"](Map.md/#Panoramax.components.ui.Map+event_background-changed)
+    * ["users-changed"](Map.md/#Panoramax.components.ui.Map+event_users-changed)
+    * ["sequence-hover"](Map.md/#Panoramax.components.ui.Map+event_sequence-hover)
+    * ["sequence-click"](Map.md/#Panoramax.components.ui.Map+event_sequence-click)
+    * ["picture-click"](Map.md/#Panoramax.components.ui.Map+event_picture-click)
+
+<a name="new_Panoramax.components.ui.MapMore_new"></a>
+
+### new MapMore(parent, container, [options])
+MapMore is a more complete version of [Map UI component](Map.md/#Panoramax.components.ui.Map).
+
+It offers advanced features like themes, filters and more.
+
+Note that all functions of [MapLibre GL JS class Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) are also available.
+
+⚠️ This class doesn't inherit from [EventTarget](https://developer.mozilla.org/fr/docs/Web/API/EventTarget), so it doesn't have `addEventListener` and `dispatchEvent` functions.
+It uses instead [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#on) and `fire` functions from MapLibre Map class.
+`fire` function doesn't take directly [`Event`](https://developer.mozilla.org/fr/docs/Web/API/Event) objects, but a string and object data.
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| parent | [<code>Basic</code>](../core/Basic.md/#Panoramax.components.core.Basic) |  | The parent view |
+| container | <code>Element</code> |  | The DOM element to create into |
+| [options] | <code>object</code> |  | The map options (any of [MapLibre GL settings](https://maplibre.org/maplibre-gl-js-docs/api/map/#map-parameters) or any supplementary option defined here) |
+| [options.raster] | <code>object</code> |  | The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition](https://maplibre.org/maplibre-style-spec/sources/#raster). |
+| [options.background] | <code>string</code> | <code>&quot;streets&quot;</code> | Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to streets. |
+| [options.theme] | <code>string</code> | <code>&quot;default&quot;</code> | The map theme (default, age, score, type) |
+
+**Example**  
+```js
+const map = new Panoramax.components.ui.MapMore(viewer, mapNode, {center: {lat: 48.7, lng: -1.7}});
+```
+<a name="Panoramax.components.ui.Map+destroy"></a>
+
+### mapMore.destroy()
+Destroy any form of life in this component
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+<a name="Panoramax.components.ui.Map+waitForEnoughMapLoaded"></a>
+
+### mapMore.waitForEnoughMapLoaded() ⇒ <code>Promise</code>
+Helper to know when enough map background and Panoramax tiles are loaded for a proper display.
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Returns**: <code>Promise</code> - Resolves when enough is loaded  
+<a name="Panoramax.components.ui.Map+reloadVectorTiles"></a>
+
+### mapMore.reloadVectorTiles()
+Force refresh of vector tiles data
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+<a name="Panoramax.components.ui.Map+hasTwoBackgrounds"></a>
+
+### mapMore.hasTwoBackgrounds() ⇒ <code>boolean</code>
+Check if map offers aerial imagery as well as streets rendering.
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Returns**: <code>boolean</code> - True if aerial imagery is available for display  
+<a name="Panoramax.components.ui.Map+getBackground"></a>
+
+### mapMore.getBackground() ⇒ <code>string</code>
+Get the currently selected map background
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Returns**: <code>string</code> - aerial or streets  
+<a name="Panoramax.components.ui.Map+setBackground"></a>
+
+### mapMore.setBackground(bg)
+Change the shown background in map.
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Throws**:
+
+- <code>Error</code> If not aerial imagery is available
+
+
+| Param | Type | Description |
+| --- | --- | --- |
+| bg | <code>string</code> | The new background to display (aerial or streets) |
+
+<a name="Panoramax.components.ui.Map+getVisibleUsers"></a>
+
+### mapMore.getVisibleUsers() ⇒ <code>Array.&lt;string&gt;</code>
+Get the currently visible users
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Returns**: <code>Array.&lt;string&gt;</code> - List of visible users  
+<a name="Panoramax.components.ui.Map+setVisibleUsers"></a>
+
+### mapMore.setVisibleUsers(visibleIds)
+Make given user layers visible on map, and hide all others (if any)
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| visibleIds | <code>string</code> \| <code>Array.&lt;string&gt;</code> | The user layers IDs to display |
+
+<a name="Panoramax.components.ui.Map+filterUserLayersContent"></a>
+
+### mapMore.filterUserLayersContent(dataType, filter)
+Filter the visible data content in all visible map layers
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| dataType | <code>string</code> | sequences or pictures |
+| filter | <code>object</code> | The MapLibre GL filter rule to apply |
+
+<a name="Panoramax.components.ui.Map+displayPictureMarker"></a>
+
+### mapMore.displayPictureMarker(lon, lat, heading, [skipCenter])
+Shows on map a picture position and heading.
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| lon | <code>number</code> |  | The longitude |
+| lat | <code>number</code> |  | The latitude |
+| heading | <code>number</code> |  | The heading |
+| [skipCenter] | <code>boolean</code> | <code>false</code> | Set to true to avoid map centering on marker |
+
+<a name="Panoramax.components.ui.Map+reloadLayersStyles"></a>
+
+### mapMore.reloadLayersStyles()
+Forces reload of pictures/sequences layer styles.
+This is useful after a map theme change.
+
+**Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+<a name="Panoramax.components.ui.MapMore+event_filters-changed"></a>
+
+### "filters-changed"
+Event for filters changes
+
+**Kind**: event emitted by [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| [minDate] | <code>string</code> | The minimum date in time range (ISO format) |
+| [maxDate] | <code>string</code> | The maximum date in time range (ISO format) |
+| [pic_type] | <code>string</code> | Camera type (equirectangular, flat, null/empty string for both) |
+| [camera] | <code>string</code> | Camera make and model |
+| [theme] | <code>string</code> | Map theme |
+| [qualityscore] | <code>Array.&lt;number&gt;</code> | QualityScore values, as a list of 1 to 5 grades |
+
+<a name="Panoramax.components.ui.Map+event_background-changed"></a>
+
+### "background-changed"
+Event for map background changes
+
+**Kind**: event emitted by [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| [background] | <code>string</code> | The new selected background (aerial, streets) |
+
+<a name="Panoramax.components.ui.Map+event_users-changed"></a>
+
+### "users-changed"
+Event for visible users changes
+
+**Kind**: event emitted by [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| [usersIds] | <code>Array.&lt;string&gt;</code> | The list of newly selected users |
+
+<a name="Panoramax.components.ui.Map+event_sequence-hover"></a>
+
+### "sequence-hover"
+Event when a sequence on map is hovered (not selected)
+
+**Kind**: event emitted by [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| seqId | <code>string</code> | The hovered sequence ID |
+
+<a name="Panoramax.components.ui.Map+event_sequence-click"></a>
+
+### "sequence-click"
+Event when a sequence on map is clicked
+
+**Kind**: event emitted by [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| seqId | <code>string</code> | The clicked sequence ID |
+| coordinates | <code>maplibregl.LngLat</code> | The coordinates of user click |
+
+<a name="Panoramax.components.ui.Map+event_picture-click"></a>
+
+### "picture-click"
+Event when a picture on map is clicked
+
+**Kind**: event emitted by [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| picId | <code>string</code> | The clicked picture ID |
+| seqId | <code>string</code> | The clicked picture's sequence ID |
+| feature | <code>object</code> | The GeoJSON feature of the picture |
+

package/docs/reference/components/ui/Photo.md

@@ -0,0 +1,369 @@
+<a name="Panoramax.components.ui.Photo"></a>
+
+## Panoramax.components.ui.Photo ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>  
+**Emits**: [<code>picture-loading</code>](#Panoramax.components.ui.Photo+event_picture-loading), [<code>picture-preview-started</code>](#Panoramax.components.ui.Photo+event_picture-preview-started), [<code>picture-preview-stopped</code>](#Panoramax.components.ui.Photo+event_picture-preview-stopped), [<code>view-rotated</code>](#Panoramax.components.ui.Photo+event_view-rotated), [<code>picture-loaded</code>](#Panoramax.components.ui.Photo+event_picture-loaded), [<code>picture-tiles-loaded</code>](#Panoramax.components.ui.Photo+event_picture-tiles-loaded), [<code>transition-duration-changed</code>](#Panoramax.components.ui.Photo+event_transition-duration-changed), [<code>sequence-playing</code>](#Panoramax.components.ui.Photo+event_sequence-playing), [<code>sequence-stopped</code>](#Panoramax.components.ui.Photo+event_sequence-stopped), [<code>pictures-navigation-changed</code>](#Panoramax.components.ui.Photo+event_pictures-navigation-changed)  
+
+* [.Photo](#Panoramax.components.ui.Photo) ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
+    * [new Photo(parent, container, [options])](#new_Panoramax.components.ui.Photo_new)
+    * [.getPictureMetadata()](#Panoramax.components.ui.Photo+getPictureMetadata) ⇒ <code>object</code>
+    * [.goToNextPicture()](#Panoramax.components.ui.Photo+goToNextPicture)
+    * [.goToPrevPicture()](#Panoramax.components.ui.Photo+goToPrevPicture)
+    * [.goToPosition(lat, lon)](#Panoramax.components.ui.Photo+goToPosition) ⇒ <code>Promise</code>
+    * [.getXY()](#Panoramax.components.ui.Photo+getXY) ⇒ <code>object</code>
+    * [.getXYZ()](#Panoramax.components.ui.Photo+getXYZ) ⇒ <code>object</code>
+    * [.getPictureOriginalHeading()](#Panoramax.components.ui.Photo+getPictureOriginalHeading) ⇒ <code>number</code>
+    * [.getPictureRelativeHeading()](#Panoramax.components.ui.Photo+getPictureRelativeHeading) ⇒ <code>number</code>
+    * [.clearPictureMetadataCache()](#Panoramax.components.ui.Photo+clearPictureMetadataCache)
+    * [.setXYZ(x, y, z)](#Panoramax.components.ui.Photo+setXYZ)
+    * [.setHigherContrast(enable)](#Panoramax.components.ui.Photo+setHigherContrast)
+    * [.getTransitionDuration()](#Panoramax.components.ui.Photo+getTransitionDuration) ⇒ <code>number</code>
+    * [.setTransitionDuration(value)](#Panoramax.components.ui.Photo+setTransitionDuration)
+    * [.showErrorOverlay(e, label, dissmisable)](#Panoramax.components.ui.Photo+showErrorOverlay)
+    * [.playSequence()](#Panoramax.components.ui.Photo+playSequence)
+    * [.stopSequence()](#Panoramax.components.ui.Photo+stopSequence)
+    * [.isSequencePlaying()](#Panoramax.components.ui.Photo+isSequencePlaying) ⇒ <code>boolean</code>
+    * [.toggleSequencePlaying()](#Panoramax.components.ui.Photo+toggleSequencePlaying)
+    * [.getPicturesNavigation()](#Panoramax.components.ui.Photo+getPicturesNavigation) ⇒ <code>string</code>
+    * [.setPicturesNavigation(pn)](#Panoramax.components.ui.Photo+setPicturesNavigation)
+    * [.forceRefresh()](#Panoramax.components.ui.Photo+forceRefresh)
+    * ["picture-loading"](#Panoramax.components.ui.Photo+event_picture-loading)
+    * ["picture-preview-started"](#Panoramax.components.ui.Photo+event_picture-preview-started)
+    * ["picture-preview-stopped"](#Panoramax.components.ui.Photo+event_picture-preview-stopped)
+    * ["view-rotated"](#Panoramax.components.ui.Photo+event_view-rotated)
+    * ["picture-loaded"](#Panoramax.components.ui.Photo+event_picture-loaded)
+    * ["picture-tiles-loaded"](#Panoramax.components.ui.Photo+event_picture-tiles-loaded)
+    * ["transition-duration-changed"](#Panoramax.components.ui.Photo+event_transition-duration-changed)
+    * ["sequence-playing"](#Panoramax.components.ui.Photo+event_sequence-playing)
+    * ["sequence-stopped"](#Panoramax.components.ui.Photo+event_sequence-stopped)
+    * ["pictures-navigation-changed"](#Panoramax.components.ui.Photo+event_pictures-navigation-changed)
+
+<a name="new_Panoramax.components.ui.Photo_new"></a>
+
+### new Photo(parent, container, [options])
+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](https://photo-sphere-viewer.js.org/api/classes/core.viewer) are available as well.
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| parent | <code>Panoramax.components.core.basic</code> |  | The parent view |
+| container | <code>Element</code> |  | The DOM element to create into |
+| [options] | <code>object</code> |  | The viewer options. Can be any of [Photo Sphere Viewer options](https://photo-sphere-viewer.js.org/guide/config.html#standard-options) |
+| [options.transitionDuration] | <code>number</code> |  | The number of milliseconds the transition animation should be. |
+| [options.position] | <code>Array.&lt;number&gt;</code> |  | Initial geographical coordinates (as [latitude, longitude]) to find picture nearby. Only used if no picture ID is set. |
+| [options.shouldGoFast] | <code>function</code> |  | Function returning a boolean to indicate if we may skip loading HD images. |
+| [options.picturesNavigation] | <code>string</code> | <code>&quot;any&quot;</code> | The allowed pictures navigation ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture) |
+
+**Example**  
+```js
+const psv = new Panoramax.components.ui.Photo(viewer, psvNode, {transitionDuration: 500})
+```
+<a name="Panoramax.components.ui.Photo+getPictureMetadata"></a>
+
+### photo.getPictureMetadata() ⇒ <code>object</code>
+Access currently shown picture metadata
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>object</code> - Picture metadata  
+<a name="Panoramax.components.ui.Photo+goToNextPicture"></a>
+
+### photo.goToNextPicture()
+Displays next picture in current sequence (if any)
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Throws**:
+
+- <code>Error</code> If no picture is selected, or no next picture available
+
+<a name="Panoramax.components.ui.Photo+goToPrevPicture"></a>
+
+### photo.goToPrevPicture()
+Displays previous picture in current sequence (if any)
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Throws**:
+
+- <code>Error</code> If no picture is selected, or no previous picture available
+
+<a name="Panoramax.components.ui.Photo+goToPosition"></a>
+
+### photo.goToPosition(lat, lon) ⇒ <code>Promise</code>
+Displays in viewer a picture near to given coordinates
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Fulfil**: <code>string</code> Picture ID if picture found  
+**Reject**: <code>Error</code> If no picture found  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| lat | <code>number</code> | Latitude (WGS84) |
+| lon | <code>number</code> | Longitude (WGS84) |
+
+<a name="Panoramax.components.ui.Photo+getXY"></a>
+
+### photo.getXY() ⇒ <code>object</code>
+Get 2D position of sphere currently shown to user
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>object</code> - 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) }  
+<a name="Panoramax.components.ui.Photo+getXYZ"></a>
+
+### photo.getXYZ() ⇒ <code>object</code>
+Get 3D position of sphere currently shown to user
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>object</code> - 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) }  
+<a name="Panoramax.components.ui.Photo+getPictureOriginalHeading"></a>
+
+### photo.getPictureOriginalHeading() ⇒ <code>number</code>
+Get capture orientation of current picture, based on its GPS.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>number</code> - Picture original heading in degrees (0 to 360°)  
+<a name="Panoramax.components.ui.Photo+getPictureRelativeHeading"></a>
+
+### photo.getPictureRelativeHeading() ⇒ <code>number</code>
+Computes the relative heading of currently selected picture.
+This gives the angle of capture compared to sequence path (vehicle movement).
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>number</code> - Relative heading in degrees (-180 to 180)  
+<a name="Panoramax.components.ui.Photo+clearPictureMetadataCache"></a>
+
+### photo.clearPictureMetadataCache()
+Clears the Photo Sphere Viewer metadata cache.
+It is useful when current picture or sequence has changed server-side after first load.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+setXYZ"></a>
+
+### photo.setXYZ(x, y, z)
+Change the shown position in picture
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| x | <code>number</code> | X position (in degrees) |
+| y | <code>number</code> | Y position (in degrees) |
+| z | <code>number</code> | Z position (0-100) |
+
+<a name="Panoramax.components.ui.Photo+setHigherContrast"></a>
+
+### photo.setHigherContrast(enable)
+Enable or disable higher contrast on picture
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| enable | <code>boolean</code> | True to enable higher contrast |
+
+<a name="Panoramax.components.ui.Photo+getTransitionDuration"></a>
+
+### photo.getTransitionDuration() ⇒ <code>number</code>
+Get the duration of stay on a picture during a sequence play.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>number</code> - The duration (in milliseconds)  
+<a name="Panoramax.components.ui.Photo+setTransitionDuration"></a>
+
+### photo.setTransitionDuration(value)
+Changes the duration of stay on a picture during a sequence play.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| value | <code>number</code> | The new duration (in milliseconds, between 100 and 3000) |
+
+<a name="Panoramax.components.ui.Photo+showErrorOverlay"></a>
+
+### photo.showErrorOverlay(e, label, dissmisable)
+Display an error message to user on screen
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| e | <code>object</code> | The initial error |
+| label | <code>str</code> | The main error label to display |
+| dissmisable | <code>boolean</code> | Is error dissmisable |
+
+<a name="Panoramax.components.ui.Photo+playSequence"></a>
+
+### photo.playSequence()
+Goes continuously to next picture in sequence as long as possible
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+stopSequence"></a>
+
+### photo.stopSequence()
+Stops playing current sequence
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+isSequencePlaying"></a>
+
+### photo.isSequencePlaying() ⇒ <code>boolean</code>
+Is there any sequence being played right now ?
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>boolean</code> - True if sequence is playing  
+<a name="Panoramax.components.ui.Photo+toggleSequencePlaying"></a>
+
+### photo.toggleSequencePlaying()
+Starts/stops the reading of pictures in a sequence
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+getPicturesNavigation"></a>
+
+### photo.getPicturesNavigation() ⇒ <code>string</code>
+Get current pictures navigation mode.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>string</code> - The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)  
+<a name="Panoramax.components.ui.Photo+setPicturesNavigation"></a>
+
+### photo.setPicturesNavigation(pn)
+Switch the allowed navigation between pictures.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| pn | <code>string</code> | The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture) |
+
+<a name="Panoramax.components.ui.Photo+forceRefresh"></a>
+
+### photo.forceRefresh()
+Force reload of texture and tiles.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+event_picture-loading"></a>
+
+### "picture-loading"
+Event for picture starting to load
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.picId | <code>string</code> | The picture unique identifier |
+| detail.lon | <code>number</code> | Longitude (WGS84) |
+| detail.lat | <code>number</code> | Latitude (WGS84) |
+| detail.x | <code>number</code> | New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West) |
+| detail.y | <code>number</code> | New y position (in degrees) |
+| detail.z | <code>number</code> | New z position (0-100) |
+| detail.first | <code>boolean</code> | True if first picture loaded |
+
+<a name="Panoramax.components.ui.Photo+event_picture-preview-started"></a>
+
+### "picture-preview-started"
+Event for picture preview
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.picId | <code>string</code> | The picture ID |
+| detail.coordinates | <code>Array.&lt;number&gt;</code> | [x,y] coordinates |
+| detail.direction | <code>number</code> | The theorical picture orientation |
+
+<a name="Panoramax.components.ui.Photo+event_picture-preview-stopped"></a>
+
+### "picture-preview-stopped"
+Event for end of picture preview
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.picId | <code>string</code> | The picture ID |
+
+<a name="Panoramax.components.ui.Photo+event_view-rotated"></a>
+
+### "view-rotated"
+Event for viewer rotation
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.x | <code>number</code> | New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West) |
+| detail.y | <code>number</code> | New y position (in degrees) |
+| detail.z | <code>number</code> | New Z position (between 0 and 100) |
+
+<a name="Panoramax.components.ui.Photo+event_picture-loaded"></a>
+
+### "picture-loaded"
+Event for picture load (low-resolution image is loaded)
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.picId | <code>string</code> | The picture unique identifier |
+| detail.lon | <code>number</code> | Longitude (WGS84) |
+| detail.lat | <code>number</code> | Latitude (WGS84) |
+| detail.x | <code>number</code> | New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West) |
+| detail.y | <code>number</code> | New y position (in degrees) |
+| detail.z | <code>number</code> | New z position (0-100) |
+| detail.first | <code>boolean</code> | True if first picture loaded |
+
+<a name="Panoramax.components.ui.Photo+event_picture-tiles-loaded"></a>
+
+### "picture-tiles-loaded"
+Event launched when all visible tiles of a picture are loaded
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.picId | <code>string</code> | The picture unique identifier |
+
+<a name="Panoramax.components.ui.Photo+event_transition-duration-changed"></a>
+
+### "transition-duration-changed"
+Event for transition duration change
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.duration | <code>string</code> | New duration (in milliseconds) |
+
+<a name="Panoramax.components.ui.Photo+event_sequence-playing"></a>
+
+### "sequence-playing"
+Event for sequence starting to play
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+event_sequence-stopped"></a>
+
+### "sequence-stopped"
+Event for sequence stopped playing
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+event_pictures-navigation-changed"></a>
+
+### "pictures-navigation-changed"
+Event for pictures navigation mode change
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.value | <code>string</code> | New mode (any, pic, seq) |
+

package/docs/reference/components/ui/Popup.md

@@ -0,0 +1,56 @@
+<a name="Panoramax.components.ui.Popup"></a>
+
+## Panoramax.components.ui.Popup ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Emits**: [<code>open</code>](#Panoramax.components.ui.Popup+event_open), [<code>close</code>](#Panoramax.components.ui.Popup+event_close)  
+**Element**: pnx-popup  
+
+* [.Popup](#Panoramax.components.ui.Popup) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new Popup()](#new_Panoramax.components.ui.Popup_new)
+    * [.properties](#Panoramax.components.ui.Popup+properties) : <code>Object</code>
+    * [.close()](#Panoramax.components.ui.Popup+close)
+    * ["open"](#Panoramax.components.ui.Popup+event_open)
+    * ["close"](#Panoramax.components.ui.Popup+event_close)
+
+<a name="new_Panoramax.components.ui.Popup_new"></a>
+
+### new Popup()
+Popup Element displays a full overlay container.
+
+**Example**  
+```html
+<pnx-popup @close=${() => alert("closed")}>
+   <h3>Popup content</h3>
+</pnx-popup>
+```
+<a name="Panoramax.components.ui.Popup+properties"></a>
+
+### popup.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>Popup</code>](#Panoramax.components.ui.Popup)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [visible] | <code>boolean</code> | <code>true</code> | Is the popup visible to user ? |
+
+<a name="Panoramax.components.ui.Popup+close"></a>
+
+### popup.close()
+Close popup
+
+**Kind**: instance method of [<code>Popup</code>](#Panoramax.components.ui.Popup)  
+<a name="Panoramax.components.ui.Popup+event_open"></a>
+
+### "open"
+Event for popup opening
+
+**Kind**: event emitted by [<code>Popup</code>](#Panoramax.components.ui.Popup)  
+<a name="Panoramax.components.ui.Popup+event_close"></a>
+
+### "close"
+Event for popup closing
+
+**Kind**: event emitted by [<code>Popup</code>](#Panoramax.components.ui.Popup)