Photo Sphere Viewer

https://photo-sphere-viewer.js.org
Admin
Photo Sphere Viewer is a JavaScript library that displays 360° panoramas and cubemaps with...
Tokens:137,068
Snippets:2,370
Trust Score:8.1
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Get plugin instance and use methods/events

Source: https://photo-sphere-viewer.js.org/plugins

Obtain the plugin instance with getPlugin to call methods and subscribe to events. Example shows adding a marker and listening to the 'select-marker' event.

```javascript
const markersPlugin = viewer.getPlugin(MarkersPlugin);

markersPlugin.addMarker(/* ... */);

markersPlugin.addEventListener('select-marker', () => {
    /* ... */
});
```

--------------------------------

### Basic EquirectangularVideoAdapter setup

Source: https://photo-sphere-viewer.js.org/guide/adapters/equirectangular-video.html

Basic setup for the equirectangular video adapter. Requires the VideoPlugin and the @photo-sphere-viewer/equirectangular-video-adapter package.

```javascript
import { EquirectangularVideoAdapter } from '@photo-sphere-viewer/equirectangular-video-adapter';

const viewer = new Viewer({
    adapter: EquirectangularVideoAdapter,
    panorama: {
        source: 'path/video.mp4',
    },
    plugins: [VideoPlugin],
});
```

--------------------------------

### VirtualTourPlugin.withConfig

Source: https://photo-sphere-viewer.js.org/plugins/virtual-tour.html

Initializes the VirtualTourPlugin with configuration for nodes, asynchronous node loading, and start node.

```APIDOC
## VirtualTourPlugin.withConfig

### Description
Initializes the VirtualTourPlugin with configuration for nodes, asynchronous node loading, and start node.

### Method
withConfig

### Parameters
#### Configuration Object
- **nodes** (array) - Optional - List of node definitions for client mode.
- **getNode** (function) - Optional - Asynchronous function to load a node by id.
- **startNodeId** (string) - Optional - Identifier of the initial node.

### Request Example
```js
import { VirtualTourPlugin } from '@photo-sphere-viewer/virtual-tour-plugin';

const viewer = new Viewer({
    plugins: [
        VirtualTourPlugin.withConfig({
            nodes: [...],
            // or
            getNode: async (id) => { ... },
            startNodeId: ...,
        }),
    ],
});
```

### Response
No direct response; the plugin is initialized.
```

--------------------------------

### Install @photo-sphere-viewer/core with npm or yarn

Source: https://photo-sphere-viewer.js.org/guide

Install the Photo Sphere Viewer core package using either npm or yarn. Choose the command that matches your package manager.

```bash
npm install @photo-sphere-viewer/core
```

```bash
yarn add @photo-sphere-viewer/core
```

--------------------------------

### start(moveMode?)

Source: https://photo-sphere-viewer.js.org/api/classes/GyroscopePlugin.GyroscopePlugin.html

Enables the gyroscope navigation if available.

```APIDOC
## Method: start(moveMode?)

### Description
Enables the gyroscope navigation if available.

### Parameters
- **moveMode** ("smooth" | "fast") - Optional - The movement mode. Default is "smooth".

### Returns
- **Promise<void>** - A promise that resolves when the gyroscope is enabled.
```

--------------------------------

### Layers configuration example

Source: https://photo-sphere-viewer.js.org/plugins/plan.html

Example of configuring multiple base layers for the map. Each layer object can use `urlTemplate` for standard raster tiles or `layer` for custom Leaflet layers, along with `name` and `attribution`.

```javascript
layers: [
    {
        name: 'OpenStreetMap',
        urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
        attribution: '&copy; OpenStreetMap',
    },
    {
        name: 'OpenTopoMap',
        layer: new L.TileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
            subdomains: ['a', 'b', 'c'],
            maxZoom: 17,
        }),
        attribution: '&copy; OpenTopoMap',
    },
]
```

--------------------------------

### VideoPlugin multi resolution setup

Source: https://photo-sphere-viewer.js.org/plugins/video.html

Setup for offering multiple video resolutions using the ResolutionPlugin. Requires the SettingsPlugin and the VideoPlugin. The default resolution is set to 'FHD'.

```javascript
const viewer = new Viewer({
    adapter: EquirectangularVideoAdapter,
    plugins: [
        VideoPlugin,
        SettingsPlugin,
        [ResolutionPlugin, {
            defaultResolution: 'FHD',
            resolutions: [
                {
                    id: 'UHD',
                    label: 'Ultra high',
                    panorama: { source: 'path/video-uhd.mp4' },
                },
                {
                    id: 'FHD',
                    label: 'High',
                    panorama: { source: 'path/video-fhd.mp4' },
                },
                {
                    id: 'HD',
                    label: 'Standard',
                    panorama: { source: 'path/video-hd.mp4' },
                },
            ],
        }],
    ],
});
```

--------------------------------

### setHotspots method example

Source: https://photo-sphere-viewer.js.org/plugins/plan.html

Changes the hotspots on the map. The example passes an array of hotspot objects with id, coordinates, and either tooltip or image properties.

```javascript
mapPlugin.setHotspots([
    { id: '1', coordinates: [6.79077, 44.58041], tooltip: 'Hotspot one' },
    { id: '2', coordinates: [6.79077, 44.58041], image: 'blue-dot.png' },
]);
```

--------------------------------

### Minimal configuration with PlanPlugin

Source: https://photo-sphere-viewer.js.org/plugins/plan.html

Shows the minimal setup for the PlanPlugin, requiring the `coordinates` option (longitude, latitude). Import the plugin from '@photo-sphere-viewer/plan-plugin' and add it to the viewer's plugins array.

```javascript
import { PlanPlugin } from '@photo-sphere-viewer/plan-plugin';

const viewer = new Viewer({
    plugins: [
        PlanPlugin.withConfig({
            coordinates: [6.79077, 44.58041],
        }),
    ],
});
```

--------------------------------

### setImage method example

Source: https://photo-sphere-viewer.js.org/plugins/map.html

Changes the image of the map. The example passes a new image URL and an optional center position.

```javascript
mapPlugin.setImage('map2.jpg', { x: 500, y: 500 });
```

--------------------------------

### start() / stop() / toggle()

Source: https://photo-sphere-viewer.js.org/plugins/autorotate.html

Controls the automatic rotation. start() begins the rotation, stop() ends it, and toggle() switches between the two states.

```APIDOC
## start() / stop() / toggle()

### Description
Controls the automatic rotation. start() begins the rotation, stop() ends it, and toggle() switches between the two states.

### Methods
- **start()** - Starts the automatic rotation.
- **stop()** - Stops the automatic rotation.
- **toggle()** - Toggles the automatic rotation on or off.

### Parameters
None.

### Response
No return value.
```

--------------------------------

### gotoLink method example

Source: https://photo-sphere-viewer.js.org/plugins/virtual-tour.html

Moves the view to face a specific link. Default speed is 8rpm, set it to 0 for an immediate rotation.

```javascript
virtualTourPlugin.gotoLink('2', '4rpm')
  .then(() => /* animation complete */);
```

--------------------------------

### setHotspots method example

Source: https://photo-sphere-viewer.js.org/plugins/map.html

Changes the hotspots on the map. The example shows an array of hotspot objects with properties like id, yaw, distance, tooltip, x, y, and image.

```javascript
mapPlugin.setHotspots([
    { id: '1', yaw: '0deg', distance: 120, tooltip: 'Hotspot one' },
    { id: '2', x: 150, y: 310, image: 'blue-dot.png' },
]);
```

--------------------------------

### VideoPlugin basic usage

Source: https://photo-sphere-viewer.js.org/plugins/video.html

Basic setup for the VideoPlugin. Requires loading one of the video adapters (equirectangular or cubemap) and the plugin adds play/pause, volume, time indicator, progressbar, and central play button.

```javascript
import { VideoPlugin } from '@photo-sphere-viewer/video-plugin';

const viewer = new Viewer({
    adapter: EquirectangularVideoAdapter,
    panorama: {
        source: 'path/video.mp4',
    },
    plugins: [
        VideoPlugin,
    ],
});
```

--------------------------------

### Manual link position example

Source: https://photo-sphere-viewer.js.org/plugins/virtual-tour.html

Shows a node definition with a link using texture coordinates (textureX/textureY) to position the link on the panorama, similar to marker placement.

```javascript
const node = {
    id: 'node-1',
    panorama: '001.jpg',
    links: [
        {
            nodeId: 'node-2',
            position: { textureX: 1500, textureY: 780 },
        },
    ],
};
```

--------------------------------

### init

Source: https://photo-sphere-viewer.js.org/api/classes/Core.DualFisheyeAdapter.html

Initializes the adapter.

```APIDOC
## init

### Description
Initializes the adapter.

### Method
init

### Signature
init(): void

### Returns
void
```

--------------------------------

### setCenter method example

Source: https://photo-sphere-viewer.js.org/plugins/map.html

Changes the position of the panorama on the map. The example passes a center coordinate.

```javascript
mapPlugin.setCenter({ x: 500, y: 500 });
```

--------------------------------

### init

Source: https://photo-sphere-viewer.js.org/api/classes/Core.AbstractPlugin.html

Initializes the plugin.

```APIDOC
## init

### Description
Initializes the plugin.

### Method
init

### Signature
init(): void

### Returns
void
```

--------------------------------

### setCoordinates method example

Source: https://photo-sphere-viewer.js.org/plugins/plan.html

Changes the position of the panorama on the map. The example sets coordinates to [6.79077, 44.58041].

```javascript
mapPlugin.setCoordinates([6.79077, 44.58041]);
```

--------------------------------

### enterFullscreen(): void

Source: https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html

Enters the fullscreen mode.

```APIDOC
## enterFullscreen(): void

### Description
Enters the fullscreen mode.

### Method
enterFullscreen

### Returns
void
```

--------------------------------

### Import and configure OverlaysPlugin with overlays

Source: https://photo-sphere-viewer.js.org/plugins/overlays.html

Shows how to import the OverlaysPlugin and add it to the Viewer with a configuration that includes an overlay. The overlay is defined with an id and a path to an image.

```javascript
import { OverlaysPlugin } from '@photo-sphere-viewer/overlays-plugin';

const viewer = new Viewer({
    plugins: [
        OverlaysPlugin.withConfig({
            overlays: [
                {
                    id: 'overlay',
                    path: 'path/to/overlay.png',
                },
            ],
        }),
    ],
});
```

--------------------------------

### Import and configure VirtualTourPlugin

Source: https://photo-sphere-viewer.js.org/plugins/virtual-tour.html

Shows how to import the VirtualTourPlugin and add it to the viewer's plugins array with configuration options. The configuration can include either a static 'nodes' array or an async 'getNode' function, along with 'startNodeId'.

```javascript
import { VirtualTourPlugin } from '@photo-sphere-viewer/virtual-tour-plugin';

const viewer = new Viewer({
    plugins: [
        VirtualTourPlugin.withConfig({
            nodes: [...],
            // or
            getNode: async (id) => { ... },
            startNodeId: ...,
        }),
    ],
});
```

--------------------------------

### constructor

Source: https://photo-sphere-viewer.js.org/api/classes/DualFisheyeAdapter.DualFisheyeVideoAdapter.html

Creates a new DualFisheyeVideoAdapter instance.

```APIDOC
## constructor

### Description
Creates a new DualFisheyeVideoAdapter instance.

### Method
constructor

### Signature
new DualFisheyeVideoAdapter(viewer: Viewer, config: AbstractVideoAdapterConfig): DualFisheyeVideoAdapter

### Parameters
- **viewer** (Viewer) - Required - The viewer instance.
- **config** (AbstractVideoAdapterConfig) - Required - Configuration for the adapter.

### Returns
DualFisheyeVideoAdapter
```

--------------------------------

### showSettings()

Source: https://photo-sphere-viewer.js.org/api/classes/SettingsPlugin.SettingsPlugin.html

Shows the settings menu.

```APIDOC
## Method: showSettings

### Description
Shows the settings menu.

### Signature
`showSettings(): void`

### Returns
- **void**
```

--------------------------------

### Import and configure GalleryPlugin with items

Source: https://photo-sphere-viewer.js.org/plugins/gallery.html

Shows how to import the GalleryPlugin and add it to the viewer with a list of items, each specifying an id, name, panorama, and thumbnail.

```javascript
import { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';

const viewer = new Viewer({
    plugins: [
        GalleryPlugin.withConfig({
            items: [
                {
                    id: 'pano-1',
                    name: 'Panorama 1',
                    panorama: 'path/to/pano-1.jpg',
                    thumbnail: 'path/to/pano-1-thumb.jpg',
                },
                {
                    id: 'pano-2',
                    name: 'Panorama 2',
                    panorama: 'path/to/pano-2.jpg',
                    thumbnail: 'path/to/pano-2-thumb.jpg',
                },
            ],
        }),
    ],
});
```

--------------------------------

### startKeyboardControl

Source: https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html

Enables the keyboard controls.

```APIDOC
## startKeyboardControl

### Description
Enables the keyboard controls.

### Method
startKeyboardControl

### Returns
void
```

--------------------------------

### roll

Source: https://photo-sphere-viewer.js.org/api/classes/Core.utils.Dynamic.html

Starts infinite movement of the dynamic variable.

```APIDOC
## roll

### Description
Starts infinite movement of the dynamic variable.

### Method
roll

### Signature
roll(invert?: boolean, speedMult?: number): void

### Parameters
- **invert** (boolean) - Optional - Whether to invert direction, default is false.
- **speedMult** (number) - Optional - Speed multiplier, default is 1.

### Returns
- **void**
```

--------------------------------

### get current

Source: https://photo-sphere-viewer.js.org/api/classes/Core.utils.MultiDynamic.html

Retrieves the current values of all managed dynamics.

```APIDOC
## Accessor

### get current(): Record<keyof T, number>

#### Returns
- Record<keyof T, number> - The current values of each dynamic.
```

--------------------------------

### withConfig

Source: https://photo-sphere-viewer.js.org/api/classes/Core.DualFisheyeAdapter.html

Static method to create an adapter constructor with a given configuration.

```APIDOC
## withConfig

### Description
Static method to create an adapter constructor with a given configuration.

### Method
withConfig

### Signature
static withConfig(config: DualFisheyeAdapterConfig): [AdapterConstructor, any]

### Parameters
- **config** (DualFisheyeAdapterConfig) - Required - The configuration for the adapter.

### Returns
[AdapterConstructor, any]
```

--------------------------------

### get isVertical(): boolean

Source: https://photo-sphere-viewer.js.org/api/classes/Core.utils.Slider.html

Returns whether the slider is vertical.

```APIDOC
## get isVertical(): boolean

### Description
Returns whether the slider is vertical.

### Returns
- **boolean** - True if the slider is vertical, false otherwise.
```

--------------------------------

### get isHorizontal(): boolean

Source: https://photo-sphere-viewer.js.org/api/classes/Core.utils.Slider.html

Returns whether the slider is horizontal.

```APIDOC
## get isHorizontal(): boolean

### Description
Returns whether the slider is horizontal.

### Returns
- **boolean** - True if the slider is horizontal, false otherwise.
```

--------------------------------

### Create and control an Animation instance

Source: https://photo-sphere-viewer.js.org/api/classes/Core.utils.Animation.html

Demonstrates initializing an animation with property interpolation, handling the completion promise, and manually cancelling the animation.

```javascript
const anim = new Animation({  
    properties: {  
        width: {start: 100, end: 200}  
    },  
    duration: 5000,  
    onTick: (properties) => element.style.width = `${properties.width}px`;  
});  
  
anim.then((completed) => ...);  
  
anim.cancel();
```

--------------------------------

### current

Source: https://photo-sphere-viewer.js.org/api/classes/Core.utils.Dynamic.html

Gets or sets the current value of the dynamic variable.

```APIDOC
## current

### Description
Gets or sets the current value of the dynamic variable.

### Accessor
- **get current(): number** - Returns the current value.
- **set current(current: number): void** - Sets the current value.

### Parameters (setter)
- **current** (number) - Required - The new current value.

### Returns (getter)
- **number** - The current value.
```

--------------------------------

### constructor

Source: https://photo-sphere-viewer.js.org/api/classes/Core.utils.Dynamic.html

Creates a new Dynamic instance with a callback function and configuration.

```APIDOC
## constructor

### Description
Creates a new Dynamic instance.

### Method
constructor

### Signature
new Dynamic(fn: (val: number) => void, config: { defaultValue: number; max: number; min: number; wrap: boolean }): Dynamic

### Parameters
- **fn** (function) - Required - Callback function that receives the current value.
- **config** (object) - Required - Configuration object with properties:
  - **defaultValue** (number) - Required - Initial value.
  - **max** (number) - Required - Maximum value.
  - **min** (number) - Required - Minimum value.
  - **wrap** (boolean) - Required - Whether to wrap around.

### Returns
- **Dynamic** - The new Dynamic instance.
```

--------------------------------

### setTexture(group, textureData, transition)

Source: https://photo-sphere-viewer.js.org/api/classes/CubemapTilesAdapter.CubemapTilesAdapter.html

Applies the base texture and starts the loading of tiles.

```APIDOC
## setTexture(group, textureData, transition)

### Description
Applies the base texture and starts the loading of tiles.

### Method
setTexture

### Signature
`setTexture(group: Group, textureData: CubemapTilesTextureData, transition: boolean): void`

### Parameters
- **group** (Group) - The mesh group.
- **textureData** (CubemapTilesTextureData) - The texture data to apply.
- **transition** (boolean) - Whether to use a transition.

### Returns
- **void** - No return value.
```

--------------------------------

### Cache Methods

Source: https://photo-sphere-viewer.js.org/api/variables/Core.Cache.html

Methods for managing the cache: add, get, init, purge, and remove.

```APIDOC
## Cache.add(url, key, data)

### Description
Adds an item to the cache.

### Method
add

### Parameters
- **url** (string) - Required - The URL associated with the item.
- **key** (string) - Required - The key under which the item is stored.
- **data** (HTMLImageElement | Blob) - Required - The data to cache.

### Returns
void

```

```APIDOC
## Cache.get(url, key)

### Description
Retrieves an item from the cache.

### Method
get

### Parameters
- **url** (string) - Required - The URL associated with the item.
- **key** (string) - Required - The key under which the item is stored.

### Returns
HTMLImageElement | Blob

```

```APIDOC
## Cache.init()

### Description
Initializes the cache.

### Method
init

### Parameters
None

### Returns
void

```

```APIDOC
## Cache.purge()

### Description
Purges the cache.

### Method
purge

### Parameters
None

### Returns
void

```

```APIDOC
## Cache.remove(url, key)

### Description
Removes an item from the cache.

### Method
remove

### Parameters
- **url** (string) - Required - The URL associated with the item.
- **key** (string) - Required - The key under which the item is stored.

### Returns
void

```

--------------------------------

### constructor

Source: https://photo-sphere-viewer.js.org/api/classes/VirtualTourPlugin.VirtualTourPlugin.html

Creates a new VirtualTourPlugin instance with the given viewer and configuration.

```APIDOC
## constructor

### Description
Creates a new VirtualTourPlugin instance.

### Method
constructor

### Parameters
- **viewer** (Viewer) - Required - The viewer instance.
- **config** (VirtualTourPluginConfig) - Required - The plugin configuration.

### Returns
VirtualTourPlugin
```

--------------------------------

### withConfig

Source: https://photo-sphere-viewer.js.org/api/classes/MarkersPlugin.MarkersPlugin.html

Applies the given configuration.

```APIDOC
## withConfig(config: MarkersPluginConfig): void

### Description
Applies the given configuration.

### Parameters
- **config** (MarkersPluginConfig) - Required - The configuration object.
```

--------------------------------

### node-changed event example

Source: https://photo-sphere-viewer.js.org/plugins/virtual-tour.html

Triggered when the current node is changed. The data object contains fromNode and other data.

```javascript
virtualTourPlugin.addEventListener('node-changed', ({ node, data }) => {
    console.log(`Current node is ${node.id}`);
    if (data.fromNode) {
        // other data are available
        console.log(`Previous node was ${data.fromNode.id}`);
    }
});
```

--------------------------------

### open

Source: https://photo-sphere-viewer.js.org/api/classes/MapPlugin.MapPlugin.html

Opens the minimap.

```APIDOC
## open

### Description
Opens the minimap.

### Method
open

### Signature
open(): void
```

--------------------------------

### Cache configuration

Source: https://photo-sphere-viewer.js.org/guide/config.html

Get the cache instance from @photo-sphere-viewer/core and configure it. The cache is global and shared across viewers.

```javascript
import { Cache } from '@photo-sphere-viewer/core';

Cache.enabled = false;
Cache.ttl = 300;
Cache.maxItems = 3;
```

--------------------------------

### getClosest(el: HTMLElement, selector: string): HTMLElement

Source: https://photo-sphere-viewer.js.org/api/functions/Core.utils.getClosest.html

Gets the closest parent matching the selector (can be the element itself).

```APIDOC
## getClosest(el: HTMLElement, selector: string): HTMLElement

### Description
Gets the closest parent matching the selector (can be the element itself).

### Parameters
- **el** (HTMLElement) - Required - The element to start searching from.
- **selector** (string) - Required - The CSS selector to match against ancestors.

### Returns
- **HTMLElement** - The closest matching ancestor element, or the element itself if it matches.
```

--------------------------------

### Import Cubemap adapter from CDN

Source: https://photo-sphere-viewer.js.org/guide/adapters

Shows how to import the CubemapAdapter from a CDN using an import map and a module script. The adapter can be passed directly to the Viewer or configured with withConfig.

```html
<script type="importmap">
    {
        "imports": {
            // imports of PSV core and three
            "@photo-sphere-viewer/cubemap-adapter": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/cubemap-adapter/index.module.js"
        }
    }
</script>

<script type="module">
    import { Viewer } from '@photo-sphere-viewer/core';
    import { CubemapAdapter } from '@photo-sphere-viewer/cubemap-adapter';

    new Viewer({
        adapter: CubemapAdapter,
        // OR
        adapter: CubemapAdapter.withConfig({
            // optional adapter config
        }),
        panorama: // specific to the adapter,
    });
</script>
```

--------------------------------

### play-pause(playing)

Source: https://photo-sphere-viewer.js.org/plugins/video.html

Triggered when the video starts playing or is paused. The event provides a boolean indicating the playing state.

```APIDOC
## play-pause(playing)

### Description
Triggered when the video starts playing or is paused.

### Event
play-pause

### Parameters
- **playing** (boolean) - Required - Whether the video is playing.

### Example
```js
viewer.on('play-pause', (e, playing) => {
    console.log('Playing:', playing);
});
```
```

--------------------------------

### preventDefault()

Source: https://photo-sphere-viewer.js.org/api/classes/Core.events.KeypressEvent.html

Tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

```APIDOC
## preventDefault()

### Description
Tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

### Method
preventDefault

### Signature
preventDefault(): void

### Parameters
None

### Returns
void

### Reference
MDN Reference
```

--------------------------------

### constructor

Source: https://photo-sphere-viewer.js.org/api/classes/CubemapTilesAdapter.CubemapTilesAdapter.html

Creates a new CubemapTilesAdapter instance with the given viewer and configuration options.

```APIDOC
## constructor

### Description
Creates a new CubemapTilesAdapter instance.

### Method
constructor

### Signature
new CubemapTilesAdapter(viewer: Viewer, config: { antialias?: boolean; baseBlur?: boolean; showErrorTile?: boolean }): CubemapTilesAdapter

### Parameters
- **viewer** (Viewer) - Required - The viewer instance.
- **config** (object) - Required - Configuration options.
  - **antialias** (boolean) - Optional - Applies antialiasing to high resolution tiles. Default: `true`.
  - **baseBlur** (boolean) - Optional - Applies a blur effect to the low resolution panorama. Default: `true`.
  - **showErrorTile** (boolean) - Optional - Shows a warning sign on tiles that cannot be loaded. Default: `true`.

### Returns
CubemapTilesAdapter
```

--------------------------------

### new SettingsPlugin(viewer, config)

Source: https://photo-sphere-viewer.js.org/api/classes/SettingsPlugin.SettingsPlugin.html

Creates a new SettingsPlugin instance with the given viewer and configuration.

```APIDOC
## Constructor

### new SettingsPlugin(viewer: Viewer, config: SettingsPluginConfig): SettingsPlugin

#### Parameters
- **viewer** (Viewer) - Required - The viewer instance.
- **config** (SettingsPluginConfig) - Required - The plugin configuration.

#### Returns
- **SettingsPlugin** - The new plugin instance.
```

--------------------------------

### Get plugin by identifier

Source: https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html

Retrieves a plugin instance using its string identifier. Returns the plugin instance if it exists.

```typescript
viewer.getPlugin('markers')
```

--------------------------------

### Initialize Viewer with CubemapAdapter

Source: https://photo-sphere-viewer.js.org/guide/adapters/cubemap.html

Initializes a Photo Sphere Viewer with the CubemapAdapter, providing the six face images as an object. Requires the @photo-sphere-viewer/cubemap-adapter package.

```javascript
import {  CubemapAdapter } from '@photo-sphere-viewer/cubemap-adapter';

const viewer = new Viewer({
    adapter: CubemapAdapter,
    panorama: {
        left: 'path/to/left.jpg',
        front: 'path/to/front.jpg',
        right: 'path/to/right.jpg',
        back: 'path/to/back.jpg',
        top: 'path/to/top.jpg',
        bottom: 'path/to/bottom.jpg',
    },
});
```

--------------------------------

### updateNode method example

Source: https://photo-sphere-viewer.js.org/plugins/virtual-tour.html

Updates a single node. If it is the current node, the viewer will be updated accordingly. All attributes are optional but id.

```javascript
virtualTourPlugin.updateNode({
    id: 'node-1',
    caption: 'New caption',
    links: [...newLinks],
});
```

--------------------------------

### select-hotspot event listener example

Source: https://photo-sphere-viewer.js.org/plugins/map.html

Listens for the 'select-hotspot' event, triggered when the user clicks on a hotspot. The callback receives an object with the hotspotId.

```javascript
mapPlugin.addEventListener('select-hotspot', ({ hotspotId }) => {
    console.log(`Clicked on hotspot ${hotspotId}`);
});
```

--------------------------------

### show

Source: https://photo-sphere-viewer.js.org/api/interfaces/Core.Overlay.html

Displays an overlay on the viewer. Accepts a configuration string or an OverlayConfig object.

```APIDOC
## show

### Description
Displays an overlay on the viewer. Accepts a configuration string or an OverlayConfig object.

### Method
show

### Signature
`show(config: string | OverlayConfig): void`

### Parameters
- `config` (string | OverlayConfig) - Required - The overlay configuration or content.

### Returns
void
```

--------------------------------

### show()

Source: https://photo-sphere-viewer.js.org/api/classes/GalleryPlugin.GalleryPlugin.html

Shows the gallery.

```APIDOC
## show()

### Description
Shows the gallery.

### Method
show

### Signature
`show(): void`

### Parameters
None

### Returns
void
```

--------------------------------

### Custom storage type

Source: https://photo-sphere-viewer.js.org/plugins/settings.html

Type definition for the custom storage option. The storage must provide get and set methods for persisting settings.

```typescript
{
  get(settingId: string): boolean | string | Promise<boolean | string>;
  set(settingId: string, value: boolean | string);
}
```

--------------------------------

### getPosition(el: HTMLElement): Point

Source: https://photo-sphere-viewer.js.org/api/functions/Core.utils.getPosition.html

Gets the position of an element in the viewport without reflow. It gives the same result as getBoundingClientRect() as long as there are no CSS transforms.

```APIDOC
## getPosition(el: HTMLElement): Point

### Description
Gets the position of an element in the viewport without reflow. It gives the same result as getBoundingClientRect() as long as there are no CSS transforms.

### Parameters
- **el** (HTMLElement) - Required - The element whose position is to be retrieved.

### Returns
- **Point** - The position of the element in the viewport.
```

--------------------------------

### constructor

Source: https://photo-sphere-viewer.js.org/api/classes/Core.AbstractPlugin.html

Creates a new AbstractPlugin instance with the given viewer.

```APIDOC
## constructor

### Description
Creates a new AbstractPlugin instance.

### Method
constructor

### Signature
new AbstractPlugin<TEvents extends TypedEvent<AbstractPlugin<never>> = never>(viewer: Viewer): AbstractPlugin<TEvents>

### Parameters
- **viewer** (Viewer) - Required - The viewer instance.

### Returns
AbstractPlugin<TEvents>
```

--------------------------------

### Old on/off event usage

Source: https://photo-sphere-viewer.js.org/guide/migration.html

Example of the old event API using on() and off() with the 'position-updated' event. In v5, these methods are replaced by native event listeners.

```js
viewer.on('position-updated', (e, position) => {
    console.log(position.longitude);
});

viewer.off('position-updated');
```

--------------------------------

### viewer.createTooltip(config)

Source: https://photo-sphere-viewer.js.org/guide/components/tooltip.html

Creates a tooltip over the viewer with the given configuration.

```APIDOC
## viewer.createTooltip(config)

### Description
Creates a tooltip over the viewer with the given configuration.

### Method
createTooltip

### Parameters
- **content** (string) - Required - HTML content of the tooltip.
- **top** (number) - Required - Pixel coordinate relative to the top-left corner of the viewer.
- **left** (number) - Required - Pixel coordinate relative to the top-left corner of the viewer.
- **position** (string) - Optional - Tooltip position toward its arrow tip. Accepted values are combinations of `top`, `center`, `bottom` and `left`, `center`, `right`. Default: `top center`.
- **className** (string) - Optional - Additional CSS class added to the tooltip.
- **data** (any) - Optional - User data associated to the tooltip (useful for events).

### Returns
A tooltip instance with methods `move()`, `update()`, and `hide()`.

### Notes
The content is rendered as HTML. If your content may include untrusted input it should be sanitized before being passed to `content`.
```

--------------------------------

### Import and configure AutorotatePlugin

Source: https://photo-sphere-viewer.js.org/plugins/autorotate.html

Standard usage of the AutorotatePlugin: import it from the package and add it to the Viewer plugins array with configuration. The example sets autorotatePitch to '5deg'.

```javascript
import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';

const viewer = new Viewer({
    plugins: [
        AutorotatePlugin.withConfig({
            autorotatePitch: '5deg',
        }),
    ],
});
```

--------------------------------

### Create a viewer with CDN import

Source: https://photo-sphere-viewer.js.org/guide

Import Photo Sphere Viewer from a CDN using an import map and a module script. The viewer container must have a defined size, and the panorama must be an equirectangular projection.

```html
<head>
    <!-- for optimal display on high DPI devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
</head>

<!-- the viewer container must have a defined size -->
<div id="viewer" style="width: 100vw; height: 100vh;"></div>

<script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
            "@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.module.js"
        }
    }
</script>

<script type="module">
    import { Viewer } from '@photo-sphere-viewer/core';

    const viewer = new Viewer({
        container: document.querySelector('#viewer'),
        panorama: 'path/to/panorama.jpg',
    });
</script>
```

--------------------------------

### constructor

Source: https://photo-sphere-viewer.js.org/api/classes/Core.DualFisheyeAdapter.html

Creates a new DualFisheyeAdapter instance with the given viewer and optional configuration.

```APIDOC
## constructor

### Description
Creates a new DualFisheyeAdapter instance.

### Method
constructor

### Signature
new DualFisheyeAdapter(viewer: Viewer, config?: DualFisheyeAdapterConfig): DualFisheyeAdapter

### Parameters
- **viewer** (Viewer) - Required - The viewer instance.
- **config** (DualFisheyeAdapterConfig) - Optional - Configuration for the adapter.

### Returns
DualFisheyeAdapter
```

--------------------------------

### Get plugin by class with TypeScript support

Source: https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html

Retrieves a plugin instance using its class constructor, providing type safety. Returns the plugin instance if it exists.

```typescript
viewer.getPlugin<MarkersPlugin>(MarkersPlugin)
```
Tokens:
Raw