Skip to content

Viewer

Panoramax.components.core.Viewer ⇐ PhotoViewer

Kind: static class of Panoramax.components.core
Extends: PhotoViewer
Emits: select, ready, broken, 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 Loader The loader screen
api API The API manager (local instance)
apiMC API The API manager for metacatalog
map MapMore The MapLibre GL map itself
mapStyleComposer MapStyleComposer The map style helper
psv Photo The Photo Sphere Viewer component itself
grid CorneredGrid The grid layout manager
mini Mini The reduced/collapsed map/photo component
popup Popup The popup container
urlHandler URLHandler The URL query parameters manager
presetsManager PresetsManager The semantics presets manager

new Viewer()

Viewer is the main component of Panoramax JS library, showing pictures and map.

This component has a CorneredGrid layout, you can use directly any slot element to pass custom widgets.

If you need a viewer without map, checkout Photo Viewer component.

Make sure to set width/height through CSS for proper display.

Example

<!-- Basic example (embeds metacatalog) -->
<pnx-viewer
  endpoint="https://panoramax.openstreetmap.fr/"
  style="width: 300px; height: 250px"
/>

<!-- Basic example (without metacatalog) -->
<pnx-viewer
  endpoint="https://panoramax.openstreetmap.fr/"
  metacatalog="false"
  style="width: 300px; height: 250px"
/>

<!-- With slotted widgets -->
<pnx-viewer
  endpoint="https://panoramax.openstreetmap.fr/"
  style="width: 300px; height: 250px"
>
  <p slot="top-right">My custom text</p>
  <p slot="editors"><a href="https://my.own.tool/">Edit in my own tool</a></p>
</pnx-viewer>

<!-- With only your custom widgets -->
<pnx-viewer
  endpoint="https://panoramax.openstreetmap.fr/"
  style="width: 300px; height: 250px"
  widgets="false"
>
  <p slot="top-right">My custom text</p>
</pnx-viewer>

<!-- With map options -->
<pnx-viewer
  endpoint="https://panoramax.openstreetmap.fr/"
  style="width: 300px; height: 250px"
  map-options="{'maxZoom': 15, 'background': 'aerial', 'raster': '...'}"
/>

viewer.properties : Object

Component properties. All of Basic properties are available as well.

Kind: instance property of Viewer
Mixes: properties
Overrides: properties
Properties

Name Type Default Description
endpoint string URL to API to use (must be a STAC API)
[map-options] object An object with any map option available in Map or MapMore class.
Example: map-options="{'background': 'aerial', 'theme': 'age'}"
[psv-options] object Any option to pass to Photo component as an object.
Example: psv-options="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"
[url-parameters] string true Should the component add and update URL query parameters to save viewer state ?
[keyboard-shortcuts] string true Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts.
[focus] string "pic" The component showing up as main component (pic, map)
[geocoder] string "nominatim" The geocoder engine to use (nominatim, ban, or URL to a standard GeocodeJSON-compliant API)
[widgets] string true Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
[picture] string The picture ID to display
[sequence] string The sequence ID of the picture displayed
[fetch-options] object Set custom options for fetch calls made against API (same syntax as fetch options parameter)
[map-style] string | object The map's MapLibre style. This can be an a JSON object conforming to the schema described in the MapLibre Style Specification, or a URL string pointing to one. Defaults to OSM vector tiles.
[lang] string To override language used for labels. Defaults to using user's preferred languages.
[skip-tags-menu-opening] string false Should the "Tags" menu automatically open when you toggle Annotations switch ? Set true to avoid auto-opening.
[share-base-url] string Override the default base URL (current page) for the Share widget. Useful to lead to a public page when viewer is used in a closed tool.
[metacatalog] string The URL to access Panoramax federated catalog. Defaults to "https://explore.panoramax.fr". Set to "false" to not display pictures from federated catalog on map.
[endpoint-to-use] string Selects the default Panoramax endpoint to use. Either "default" (specific endpoint), "metacatalog" (if defined), any user UUID (available on default endpoint), or user UUID prefixed with "metacatalog_" for a metacatalog user.

viewer.onceReady() ⇒ Promise

Waits for Viewer to be completely ready (map & PSV loaded, first picture also if one is wanted)

Kind: instance method of Viewer
Overrides: onceReady
Returns: Promise - When viewer is ready

viewer.onceAllAPIsReady() ⇒ Promise

Waits for all APIs setup. This is useful for two-APIs setup.

Kind: instance method of Viewer
Fulfil: null When two APIs are ready.
Reject: string Error message

viewer.onceMapReady() ⇒ Promise

Waiting for map to be available.

Kind: instance method of Viewer
Returns: Promise - When map is ready to use

viewer.hasTwoAPIs() ⇒ boolean

Is the viewer using both metacatalog and local API ?

Kind: instance method of Viewer
Returns: boolean - True if using two APIs

viewer.getAPI() ⇒ API

Returns the API manager, from current Panoramax endpoint.

Kind: instance method of Viewer
Returns: API - The API manager

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 Viewer
Overrides: moveCenter

viewer.isMapWide() ⇒ boolean

Is the map shown as main element instead of viewer (wide map mode) ?

Kind: instance method of Viewer
Returns: boolean - True if map is wider than viewer

viewer.oncePSVReady() ⇒ Promise

Waiting for Photo Sphere Viewer to be available.

Kind: instance method of Viewer
Returns: Promise - When PSV is ready to use

viewer.onceFirstPicLoaded() ⇒ Promise

Waits for first picture to display on PSV.

Kind: instance method of Viewer
Fulfil: undefined When picture is shown

viewer.setPopup(visible, [content])

Change full-page popup visibility and content

Kind: instance method of Viewer

Param Type Default Description
visible boolean True to make it appear
[content] string | Array.<Element> null The new popup content

viewer.moveLeft()

Moves the view of main component slightly to the left.

Kind: instance method of Viewer

viewer.moveRight()

Moves the view of main component slightly to the right.

Kind: instance method of Viewer

viewer.moveUp()

Moves the view of main component slightly to the top.

Kind: instance method of Viewer

viewer.moveDown()

Moves the view of main component slightly to the bottom.

Kind: instance method of Viewer

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:.

me.addEventListener("psv:picture-loading", doSomething);

Kind: instance method of Viewer

Param Type Description
type string The event type to listen for
listener function The event handler
[options] object Any original addEventListener available options

viewer.onceAPIReady() ⇒ Promise

Waits for initial API setup.

Kind: instance method of Viewer
Fulfil: null When API is ready.
Reject: string Error message

viewer.getClassName() ⇒ string

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 Viewer
Returns: string - The class name (for example "Basic")

viewer.select([seqId], [picId], [force])

Change the currently picture and/or sequence. Calling the method without parameters unselects.

Kind: instance method of Viewer

Param Type Default Description
[seqId] string null The sequence UUID
[picId] string null The picture UUID
[force] boolean false Force select even if already selected

viewer.isWidthSmall() ⇒ boolean

Is the view running in a small container (small embed or smartphone)

Kind: instance method of Viewer
Returns: boolean - True if container is small

viewer.isWidthMedium() ⇒ boolean

Is the view running in a medium container (576-768px)

Kind: instance method of Viewer
Returns: boolean - True if container is medium

viewer.isHeightSmall() ⇒ boolean

Is the view running in a small-height container (small embed or smartphone)

Kind: instance method of Viewer
Returns: boolean - True if container height is small

viewer.getSubComponentsNames() ⇒ Array.<string>

List names of sub-components (like loader, api, map, psv) available in this component.

Kind: instance method of Viewer
Returns: Array.<string> - Sub-components names.

"focus-changed"

Event for focus change (either map or picture is shown wide)

Kind: event emitted by Viewer
Properties

Name Type Description
detail.focus string Component now focused on (map, pic)

Event for overlaying menu opening

Kind: event emitted by Viewer
Properties

Name Type Description
detail.menu Element The opened menu

"select"

Event for sequence/picture selection

Kind: event emitted by Viewer
Properties

Name Type Description
detail.seqId string The selected sequence ID
detail.picId string The selected picture ID (or null if not a precise picture clicked)
[detail.prevSeqId] string The previously selected sequence ID (or null if none)
[detail.prevPicId] string The previously selected picture ID (or null if none)

"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. 

// Watch API-readiness
viewer.addEventListener("api:ready", ...); // From parent
viewer.api.addEventListener("ready", ...); // Or on sub-component

Kind: event emitted by Viewer

"broken"

Event for viewer failing to initially load.

To follow more precisely loading failures, you can also watch for sub-components broken events. 

// Watch API breaks
viewer.addEventListener("api:broken", ...); // From parent
viewer.api.addEventListener("broken", ...); // Or on sub-component

Kind: event emitted by Viewer
Properties

Name Type Description
detail.error string The user-friendly error message to display