@panoramax/web-viewer

<a name="Panoramax.components.core.Viewer"></a> ## Panoramax.components.core.Viewer ⇐ [<code>PhotoViewer</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer) **Kind**: static class of <code>Panoramax.components.core</code> **Extends**: [<code>PhotoViewer</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer) **Emits**: [<code>select</code>](Basic.md/#Panoramax.components.core.Basic+event_select), [<code>ready</code>](Basic.md/#Panoramax.components.core.Basic+event_ready), [<code>broken</code>](Basic.md/#Panoramax.components.core.Basic+event_broken), [<code>focus-changed</code>](#Panoramax.components.core.Viewer+event_focus-changed) **Element**: pnx-viewer **Slot**: `top-left` The top-left corner **Slot**: `top` The top middle corner **Slot**: `top-right` The top-right corner **Slot**: `bottom-left` The bottom-left corner **Slot**: `bottom` The bottom middle corner **Slot**: `bottom-right` The bottom-right corner **Slot**: `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM). **Properties** | Name | Type | Description | | --- | --- | --- | | loader | [<code>Loader</code>](../ui/Loader.md/#Panoramax.components.ui.Loader) | The loader screen | | api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager | | map | [<code>MapMore</code>](../ui/MapMore.md/#Panoramax.components.ui.MapMore) | The MapLibre GL map itself | | psv | [<code>Photo</code>](../ui/Photo.md/#Panoramax.components.ui.Photo) | The Photo Sphere Viewer component itself | | grid | [<code>CorneredGrid</code>](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) | The grid layout manager | | mini | [<code>Mini</code>](../layout/Mini.md/#Panoramax.components.layout.Mini) | The reduced/collapsed map/photo component | | popup | [<code>Popup</code>](../ui/Popup.md/#Panoramax.components.ui.Popup) | The popup container | | urlHandler | [<code>URLHandler</code>](../../utils/URLHandler.md/#Panoramax.utils.URLHandler) | The URL query parameters manager | | presetsManager | [<code>PresetsManager</code>](../../utils/PresetsManager.md/#Panoramax.utils.PresetsManager) | The semantics presets manager | * [.Viewer](#Panoramax.components.core.Viewer) ⇐ [<code>PhotoViewer</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer) * [new Viewer()](#new_Panoramax.components.core.Viewer_new) * [.properties](#Panoramax.components.core.Viewer+properties) : <code>Object</code> * [.onceReady()](#Panoramax.components.core.Viewer+onceReady) ⇒ <code>Promise</code> * [.onceMapReady()](#Panoramax.components.core.Viewer+onceMapReady) ⇒ <code>Promise</code> * [.moveCenter()](#Panoramax.components.core.Viewer+moveCenter) * [.isMapWide()](#Panoramax.components.core.Viewer+isMapWide) ⇒ <code>boolean</code> * [.oncePSVReady()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+oncePSVReady) ⇒ <code>Promise</code> * [.onceFirstPicLoaded()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+onceFirstPicLoaded) ⇒ <code>Promise</code> * [.setPopup(visible, [content])](#Panoramax.components.core.PhotoViewer+setPopup) * [.moveLeft()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveLeft) * [.moveRight()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveRight) * [.moveUp()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveUp) * [.moveDown()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveDown) * [.addEventListener(type, listener, [options])](#Panoramax.components.core.PhotoViewer+addEventListener) * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code> * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code> * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select) * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code> * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code> * [.getSubComponentsNames()](Basic.md/#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ <code>Array.<string></code> * ["focus-changed"](#Panoramax.components.core.Viewer+event_focus-changed) * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened) * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select) * ["ready"](Basic.md/#Panoramax.components.core.Basic+event_ready) * ["broken"](Basic.md/#Panoramax.components.core.Basic+event_broken) <a name="new_Panoramax.components.core.Viewer_new"></a> ### new Viewer() Viewer is the main component of Panoramax JS library, showing pictures and map. This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets. If you need a viewer without map, checkout [Photo Viewer component](PhotoViewer.md/#Panoramax.components.core.PhotoViewer). Make sure to set width/height through CSS for proper display. **Example** ```html  <pnx-viewer endpoint="https://panoramax.openstreetmap.fr/" style="width: 300px; height: 250px" />  <pnx-viewer endpoint="https://panoramax.openstreetmap.fr/" style="width: 300px; height: 250px" > My custom text <a href="https://my.own.tool/">Edit in my own tool</a> </pnx-viewer>  <pnx-viewer endpoint="https://panoramax.openstreetmap.fr/" style="width: 300px; height: 250px" widgets="false" > My custom text </pnx-viewer>  <pnx-viewer endpoint="https://panoramax.openstreetmap.fr/" style="width: 300px; height: 250px" map-options="{'maxZoom': 15, 'background': 'aerial', 'raster': '...'}" /> ``` <a name="Panoramax.components.core.Viewer+properties"></a> ### viewer.properties : <code>Object</code> Component properties. All of [Basic properties](Basic.md/#Panoramax.components.core.Basic+properties) are available as well. **Kind**: instance property of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Mixes**: [<code>properties</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+properties) **Overrides**: [<code>properties</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+properties) **Properties** | Name | Type | Default | Description | | --- | --- | --- | --- | | endpoint | <code>string</code> | | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) | | [map-options] | <code>object</code> | | An object with [any map option available in Map or MapMore class](../ui/MapMore.md/#Panoramax.components.ui.MapMore). Example: `map-options="{'background': 'aerial', 'theme': 'age'}"` | | [psv-options] | <code>object</code> | | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object. Example: `psv-options="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"` | | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? | | [keyboard-shortcuts] | <code>string</code> | <code>true</code> | Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts. | | [focus] | <code>string</code> | <code>"pic"</code> | The component showing up as main component (pic, map) | | [geocoder] | <code>string</code> | <code>"nominatim"</code> | The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API) | | [widgets] | <code>string</code> | <code>true</code> | Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like. | | [picture] | <code>string</code> | | The picture ID to display | | [sequence] | <code>string</code> | | The sequence ID of the picture displayed | | [fetch-options] | <code>object</code> | | Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters)) | | [users] | <code>Array.<string></code> | <code>[geovisio]</code> | List of users IDs to use for map display (defaults to general map, identified as "geovisio") | | [map-style] | <code>string</code> \| <code>object</code> | | The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. | | [lang] | <code>string</code> | | To override language used for labels. Defaults to using user's preferred languages. | <a name="Panoramax.components.core.Viewer+onceReady"></a> ### viewer.onceReady() ⇒ <code>Promise</code> Waits for Viewer to be completely ready (map & PSV loaded, first picture also if one is wanted) **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Overrides**: [<code>onceReady</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+onceReady) **Returns**: <code>Promise</code> - When viewer is ready <a name="Panoramax.components.core.Viewer+onceMapReady"></a> ### viewer.onceMapReady() ⇒ <code>Promise</code> Waiting for map to be available. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Returns**: <code>Promise</code> - When map is ready to use <a name="Panoramax.components.core.Viewer+moveCenter"></a> ### viewer.moveCenter() Move the view of main component to its center. For map, center view on selected picture. For picture, center view on image center. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Overrides**: [<code>moveCenter</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveCenter) <a name="Panoramax.components.core.Viewer+isMapWide"></a> ### viewer.isMapWide() ⇒ <code>boolean</code> Is the map shown as main element instead of viewer (wide map mode) ? **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Returns**: <code>boolean</code> - True if map is wider than viewer <a name="Panoramax.components.core.PhotoViewer+oncePSVReady"></a> ### viewer.oncePSVReady() ⇒ <code>Promise</code> Waiting for Photo Sphere Viewer to be available. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Returns**: <code>Promise</code> - When PSV is ready to use <a name="Panoramax.components.core.PhotoViewer+onceFirstPicLoaded"></a> ### viewer.onceFirstPicLoaded() ⇒ <code>Promise</code> Waits for first picture to display on PSV. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Fulfil**: <code>undefined</code> When picture is shown <a name="Panoramax.components.core.PhotoViewer+setPopup"></a> ### viewer.setPopup(visible, [content]) Change full-page popup visibility and content **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) | Param | Type | Default | Description | | --- | --- | --- | --- | | visible | <code>boolean</code> | | True to make it appear | | [content] | <code>string</code> \| <code>Array.<Element></code> | <code>null</code> | The new popup content | <a name="Panoramax.components.core.PhotoViewer+moveLeft"></a> ### viewer.moveLeft() Moves the view of main component slightly to the left. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) <a name="Panoramax.components.core.PhotoViewer+moveRight"></a> ### viewer.moveRight() Moves the view of main component slightly to the right. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) <a name="Panoramax.components.core.PhotoViewer+moveUp"></a> ### viewer.moveUp() Moves the view of main component slightly to the top. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) <a name="Panoramax.components.core.PhotoViewer+moveDown"></a> ### viewer.moveDown() Moves the view of main component slightly to the bottom. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) <a name="Panoramax.components.core.PhotoViewer+addEventListener"></a> ### viewer.addEventListener(type, listener, [options]) Listen to events from this components or one of its sub-components. For example, you can listen to `psv` events using prefix `psv:`. ```js me.addEventListener("psv:picture-loading", doSomething); ``` **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) | Param | Type | Description | | --- | --- | --- | | type | <code>string</code> | The event type to listen for | | listener | <code>function</code> | The event handler | | [options] | <code>object</code> | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) | <a name="Panoramax.components.core.Basic+onceAPIReady"></a> ### viewer.onceAPIReady() ⇒ <code>Promise</code> Waits for initial API setup. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Fulfil**: <code>null</code> When API is ready. **Reject**: <code>string</code> Error message <a name="Panoramax.components.core.Basic+getClassName"></a> ### viewer.getClassName() ⇒ <code>string</code> This allows to retrieve an always correct class name. This is crap, but avoids issues with Webpack & so on. Each inheriting class must override this method. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Returns**: <code>string</code> - The class name (for example "Basic") <a name="Panoramax.components.core.Basic+select"></a> ### viewer.select([seqId], [picId], [force]) Change the currently picture and/or sequence. Calling the method without parameters unselects. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) | Param | Type | Default | Description | | --- | --- | --- | --- | | [seqId] | <code>string</code> | <code>null</code> | The sequence UUID | | [picId] | <code>string</code> | <code>null</code> | The picture UUID | | [force] | <code>boolean</code> | <code>false</code> | Force select even if already selected | <a name="Panoramax.components.core.Basic+isWidthSmall"></a> ### viewer.isWidthSmall() ⇒ <code>boolean</code> Is the view running in a small container (small embed or smartphone) **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Returns**: <code>boolean</code> - True if container is small <a name="Panoramax.components.core.Basic+isHeightSmall"></a> ### viewer.isHeightSmall() ⇒ <code>boolean</code> Is the view running in a small-height container (small embed or smartphone) **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Returns**: <code>boolean</code> - True if container height is small <a name="Panoramax.components.core.Basic+getSubComponentsNames"></a> ### viewer.getSubComponentsNames() ⇒ <code>Array.<string></code> List names of sub-components (like loader, api, map, psv) available in this component. **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Returns**: <code>Array.<string></code> - Sub-components names. <a name="Panoramax.components.core.Viewer+event_focus-changed"></a> ### "focus-changed" Event for focus change (either map or picture is shown wide) **Kind**: event emitted by [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.focus | <code>string</code> | Component now focused on (map, pic) | <a name="Panoramax.components.core.Basic+event_menu-opened"></a> ### "menu-opened" Event for overlaying menu opening **Kind**: event emitted by [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.menu | <code>Element</code> | The opened menu | <a name="Panoramax.components.core.Basic+event_select"></a> ### "select" Event for sequence/picture selection **Kind**: event emitted by [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.seqId | <code>string</code> | The selected sequence ID | | detail.picId | <code>string</code> | The selected picture ID (or null if not a precise picture clicked) | | [detail.prevSeqId] | <code>string</code> | The previously selected sequence ID (or null if none) | | [detail.prevPicId] | <code>string</code> | The previously selected picture ID (or null if none) | <a name="Panoramax.components.core.Basic+event_ready"></a> ### "ready" Event when component is ready to use. This happens when loader screen disappear, with picture and map loaded. To follow more precisely loading steps, you can also watch for sub-components `ready` events. ```js // Watch API-readiness viewer.addEventListener("api:ready", ...); // From parent viewer.api.addEventListener("ready", ...); // Or on sub-component ``` **Kind**: event emitted by [<code>Viewer</code>](#Panoramax.components.core.Viewer) <a name="Panoramax.components.core.Basic+event_broken"></a> ### "broken" Event for viewer failing to initially load. To follow more precisely loading failures, you can also watch for sub-components `broken` events. ```js // Watch API breaks viewer.addEventListener("api:broken", ...); // From parent viewer.api.addEventListener("broken", ...); // Or on sub-component ``` **Kind**: event emitted by [<code>Viewer</code>](#Panoramax.components.core.Viewer) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.error | <code>string</code> | The user-friendly error message to display |