### GalleryPlugin Configuration Example

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/gallery.md

This snippet shows a basic configuration for the GalleryPlugin within a demo setup. It specifies the package to use and indicates that styling is included.

```yaml
title: PSV Gallery Demo
packages:
    - name: gallery-plugin
      style: true
```

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

### Display Overlay at Startup

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/guide/components/overlay.md

This example demonstrates how to display an overlay when the viewer initializes. It requires a configuration object for the overlay.

```yaml
title: PSV Overlay Demo
```

```javascript
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/plugins/overlay.js";

const psv = new Viewer({
  container: "psv-container",
  panorama: "./berlin-alexanderplatz.jpg",
  overlay: {
    title: "Berlin Alexanderplatz",
    text: "A famous square in Berlin.",
    image: "./img/logo.svg",
    // id: 'startup-overlay'
  },
});

// To hide it later:
// psv.overlay.hide('startup-overlay');

```

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

### Initialize Viewer with MediaStream and Configured Adapter

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/guide/adapters/equirectangular-video.md

Example of initializing the viewer with a MediaStream as the video source and configuring the adapter with autoplay and muted options.

```javascript
const stream = await navigator.mediaDevices.getUserMedia({ video: true });

const viewer = new Viewer({
    container: 'photosphere',
    adapter: EquirectangularVideoAdapter.withConfig({
        autoplay: true,
        muted: true,
    }),
    panorama: {
        source: stream,
    },
});
```

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

### Initialize PhotoSphereViewer

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/cypress/pages/core/base.html

Import necessary modules and initialize the PhotoSphereViewer with a panorama. This is the basic setup for displaying a 360-degree image.

```javascript
{ "imports": { "three": "/node_modules/three/build/three.module.js", "@photo-sphere-viewer/core": "/dist/core/index.module.js" } } import { Viewer, DEFAULTS } from '@photo-sphere-viewer/core'; const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/'; const viewer = new Viewer({ container: 'photosphere', panorama: baseUrl + 'sphere-small.jpg', }); window.viewer = viewer;
```

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

### Initialize Viewer with Equirectangular Video Adapter

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/guide/adapters/equirectangular-video.md

Basic setup for the viewer using the EquirectangularVideoAdapter. Requires the VideoPlugin.

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

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

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

### Basic Viewer Initialization

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/demos/basic/0-config.md

Initialize the viewer with a container ID and a panorama image. This is the most basic setup.

```yaml
autoload: true
title: PSV Basic Demo
```

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

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

new Viewer({
    container: 'viewer',
    panorama: baseUrl + 'sphere.jpg',
});
```

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

### Initialize PhotoSphereViewer with CompassPlugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/cypress/pages/plugins/compass.html

Demonstrates the basic setup for PhotoSphereViewer, including importing necessary modules and enabling the CompassPlugin and MarkersPlugin. Ensure all required modules are correctly imported.

```javascript
import { Viewer } from '@photo-sphere-viewer/core';
import { CompassPlugin } from '@photo-sphere-viewer/compass-plugin';
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

const viewer = new Viewer({
  container: 'photosphere',
  panorama: baseUrl + 'sphere-small.jpg',
  plugins: [
    CompassPlugin,
    MarkersPlugin,
  ],
});

window.viewer = viewer;
```

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

### Initialize OverlaysPlugin with Configuration

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/overlays.md

Demonstrates how to import and configure the OverlaysPlugin when initializing the Photo Sphere Viewer. This snippet shows the basic setup for adding a single overlay.

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

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

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

### Initialize PhotoSphereViewer with Gallery Plugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/cypress/pages/plugins/gallery.html

Demonstrates the basic setup for PhotoSphereViewer, including importing necessary modules and initializing the viewer with the GalleryPlugin. The plugin is configured with a list of panorama items.

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

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const items = [
  {
    id: 'sphere',
    panorama: baseUrl + 'sphere-small.jpg',
    options: {
      caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
      transition: false,
    },
  },
  {
    id: 'test-sphere',
    panorama: baseUrl + 'sphere-test.jpg',
    name: 'Test sphere',
    options: {
      transition: false,
    },
  },
  {
    id: 1,
    panorama: baseUrl + 'tour/key-biscayne-1.jpg',
    thumbnail: baseUrl + 'tour/key-biscayne-1-thumb.jpg',
    name: 'One',
    options: {
      caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
      transition: false,
    },
  },
  {
    id: 2,
    panorama: baseUrl + 'tour/key-biscayne-2.jpg',
    thumbnail: baseUrl + 'tour/key-biscayne-2-thumb.jpg',
    name: 'Two',
    options: {
      caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
      transition: false,
    },
  },
  {
    id: 3,
    panorama: baseUrl + 'tour/key-biscayne-3.jpg',
    thumbnail: baseUrl + 'tour/key-biscayne-3-thumb.jpg',
    name: 'Three',
    options: {
      caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
      transition: false,
    },
  },
  {
    id: 4,
    panorama: baseUrl + 'tour/key-biscayne-4.jpg',
    thumbnail: baseUrl + 'tour/key-biscayne-4-thumb.jpg',
    name: 'Four',
    options: {
      caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
      transition: false,
    },
  },
  {
    id: 5,
    panorama: baseUrl + 'tour/key-biscayne-5.jpg',
    thumbnail: baseUrl + 'tour/key-biscayne-5-thumb.jpg',
    name: 'Five',
    options: {
      caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
      transition: false,
    },
  },
  {
    id: 6,
    panorama: baseUrl + 'tour/key-biscayne-6.jpg',
    thumbnail: baseUrl + 'tour/key-biscayne-6-thumb.jpg',
    name: 'Six',
    options: {
      caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
      transition: false,
    },
  },
  {
    id: 7,
    panorama: baseUrl + 'tour/key-biscayne-7.jpg',
    thumbnail: baseUrl + 'tour/key-biscayne-7-thumb.jpg',
    name: 'Seven',
    options: {
      caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
      transition: false,
    },
  },
];

const urlParams = new URLSearchParams(window.location.search);
const viewer = new Viewer({
  container: 'photosphere',
  panorama: items[0].panorama,
  caption: items[0].options.caption,
  plugins: [
    GalleryPlugin.withConfig({
      items: items,
      visibleOnLoad: urlParams.get('visibleOnLoad') !== 'false',
      hideOnClick: false,
    }),
  ],
});

window.viewer = viewer;
```

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

### Initialize PhotoSphereViewer with Virtual Tour Plugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/examples/plugin-virtual-tour.html

Initializes the PhotoSphereViewer with the VirtualTourPlugin enabled. This setup requires the container element and the plugin instance.

```javascript
const viewer = new Viewer({
  container: 'phot
```

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

### Install and Import Markers Plugin with NPM

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/index.md

Install the Markers plugin using NPM and import it with a build tool. Ensure the plugin's CSS is also imported.

```javascript
import { Viewer } from '@photo-sphere-viewer/core';
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';

const viewer = new Viewer({
    plugins: [
        MarkersPlugin,
    ],
});
```

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

### Initialize Viewer with Cubemap and Markers

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/examples/plugin-markers-cubemap.html

Sets up the PhotoSphereViewer with a cubemap panorama and configures the MarkersPlugin with several example markers. This includes image markers, a spherical polygon, and a texture-coordinate-based polygon.

```javascript
import { Viewer } from '@photo-sphere-viewer/core';
import { CubemapAdapter } from '@photo-sphere-viewer/cubemap-adapter';
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

const viewer = new Viewer({
  container: 'photosphere',
  adapter: CubemapAdapter,
  panorama: {
    left: baseUrl + 'cubemap/px.jpg',
    front: baseUrl + 'cubemap/nz.jpg',
    right: baseUrl + 'cubemap/nx.jpg',
    back: baseUrl + 'cubemap/pz.jpg',
    top: baseUrl + 'cubemap/py.jpg',
    bottom: baseUrl + 'cubemap/ny.jpg',
  },
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  loadingImg: baseUrl + 'loader.gif',
  navbar: [
    'markers',
    'markersList',
    {
      content: '💬',
      title: 'Show all tooltips',
      className: 'custom-button',
      onClick: () => {
        markers.toggleAllTooltips();
      },
    },
    'caption',
    'fullscreen',
  ],
  plugins: [
    MarkersPlugin.withConfig({
      markers: (() => {
        const a = [];
        for (let i = 0; i < Math.PI * 2; i += Math.PI / 4) {
          for (let j = -Math.PI / 2 + Math.PI / 4; j < Math.PI / 2; j += Math.PI / 4) {
            a.push({
              id: '#' + a.length,
              tooltip: '#' + a.length,
              position: { yaw: i, pitch: j },
              image: baseUrl + 'pictos/pin-red.png',
              size: { width: 32, height: 32 },
              anchor: 'bottom center',
              data: {
                deletable: true,
              },
            });
          }
        }

        a.push({
          id: 'polygon',
          svgStyle: {
            fill: 'rgba(255, 0, 111, 0.26)',
          },
          polygon: [
            [6.2208, 0.0906],
            [0.0443, 0.1028],
            [0.2322, 0.0849],
            [0.4531, 0.0387],
            [0.5022, -0.0056],
            [0.4587, -0.0396],
            [0.252, -0.0453],
            [0.0434, -0.0575],
            [6.1302, -0.0623],
            [6.0094, -0.0169],
            [6.0471, 0.032],
            [6.2208, 0.0906],
          ],
          tooltip: {
            content: 'This is a mountain',
            position: 'right bottom',
          },
        });

        a.push({
          id: 'polygonPixels',
          polygonPixels: [
            [
              { textureFace: 'front', textureX: 200, textureY: 200 },
              { textureFace: 'left', textureX: 1300, textureY: 200 },
              { textureFace: 'top', textureX: 1300, textureY: 200 },
            ],
            [
              { textureFace: 'top', textureX: 1500, textureY: 115 },
              { textureFace: 'left', textureX: 1500, textureY: 115 },
              { textureFace: 'front', textureX: 115, textureY: 0 },
            ],
          ],
          style: {
            fill: 'gold',
            opacity: 0.5,
          },
        });

        return a;
      })(),
    }),
  ],
});

const markers = viewer.getPlugin(MarkersPlugin);

window.viewer = viewer;
```

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

### Initialize Viewer with NPM and Build Tool

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/guide/index.md

Import the Viewer from the installed package and initialize it. Remember to include the core CSS file separately using your preferred build tool's method.

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

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

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

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

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

### Initialize Viewer with Resolution Plugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/cypress/pages/plugins/resolution.html

Configure the Viewer with the ResolutionPlugin, specifying options like showing a badge, default resolution, and available resolutions. This setup allows dynamic resolution switching.

```javascript
import { Viewer } from '@photo-sphere-viewer/core';
import { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';
import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const urlParams = new URLSearchParams(window.location.search);

const viewer = new Viewer({
  container: 'photosphere',
  panorama: urlParams.get('withPanorama') ? baseUrl + 'sphere-small.jpg' : null,
  plugins: [
    SettingsPlugin,
    ResolutionPlugin.withConfig({
      showBadge: urlParams.get('showBadge') !== 'false',
      defaultResolution: urlParams.get('resolution'),
      resolutions: [
        { id: 'SD', label: 'Small', panorama: baseUrl + 'sphere-small.jpg' },
        { id: 'HD', label: 'Normal', panorama: baseUrl + 'sphere-small.jpg?hd' },
      ],
    }),
  ],
});

window.viewer = viewer;
```

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

### Initialize Viewer with Overlays Plugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/examples/plugin-overlays.html

Initializes the PhotoSphereViewer with the OverlaysPlugin configured for cubemap adapters and predefined overlays. This setup is useful for displaying initial overlay elements upon viewer load.

```javascript
import { Viewer } from '@photo-sphere-viewer/core';
import { CubemapAdapter } from '@photo-sphere-viewer/cubemap-adapter';
import { OverlaysPlugin } from '@photo-sphere-viewer/overlays-plugin';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

const viewer = new Viewer({
  container: 'photosphere',
  panorama: baseUrl + 'sphere.jpg',
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  loadingImg: baseUrl + 'loader.gif',
  plugins: [
    OverlaysPlugin.withConfig({
      cubemapAdapter: CubemapAdapter,
      overlays: [
        {
          id: 'xray',
          path: baseUrl + 'sphere-overlay.png',
          opacity: .8,
          zIndex: 1,
        },
      ],
    }),
  ],
  navbar: [
    {
      className: 'custom-button',
      content: 'Sphere overlay',
      onClick: () => {
        overlays.clearOverlays();
        setSphereOverlay(baseUrl + 'sphere-overlay.png');
      },
    },
    {
      className: 'custom-button',
      content: 'Partial overlay',
      onClick: () => {
        overlays.clearOverlays();
        overlays.addOverlay({
          id: 'paper',
          path: baseUrl + 'sphere-paper-overlay.png',
          opacity: 0.8,
          panoData: {
            fullWidth: 3000,
            croppedX: 1250,
            croppedY: 500,
          },
        });
      },
    },
    {
      className: 'custom-button',
      content: 'Cubemap overlay',
      onClick: () => {
        overlays.clearOverlays();
        setCubemapOverlay({
          left: baseUrl + 'cubemap-overlay/px.png',
          front: baseUrl + 'cubemap-overlay/nz.png',
          right: baseUrl + 'cubemap-overlay/nx.png',
          back: baseUrl + 'cubemap-overlay/pz.png',
          top: baseUrl + 'cubemap-overlay/py.png',
          bottom: baseUrl + 'cubemap-overlay/ny.png',
        });
      },
    },
  ],
});

const overlays = viewer.getPlugin('overlays');

overlays.addEventListener('overlay-click', ({ overlayId }) => {
  console.log(`click overlay ${overlayId}`);
});

function setSphereOverlay(path) {
  viewer.textureLoader.loadImage(path).then((image) => {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    ctx.globalCompositeOperation = 'source-in';
    ctx.fillStyle = randomColor({ luminosity: 'bright' });
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    overlays.addOverlay({
      id: 'xray',
      path: canvas.toDataURL(),
      zIndex: 1,
    });
  });
}

function setCubemapOverlay(path) {
  Promise.all(
    Object.entries(path).map(([name, url]) => {
      return viewer.textureLoader.loadImage(url).then((image) => {
        const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0);
        ctx.globalCompositeOperation = 'source-in';
        ctx.fillStyle = randomColor({ luminosity: 'bright' });
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        return [name, canvas.toDataURL()];
      });
    })
  ).then((images) => {
    overlays.addOverlay({
      id: 'xray',
      path: images.reduce((out, [name, url]) => ({ ...out, [name]: url }), {}),
      zIndex: 1,
    });
  });
}

window.viewer = viewer;
```

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

### Basic Photo Sphere Viewer Demo

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/guide/index.md

A simple example demonstrating how to initialize the viewer with a panorama image and a caption. The panorama must be an equirectangular projection.

```yaml
autoload: true
title: PSV Basic Demo
```

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

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

new Viewer({
    container: 'viewer',
    panorama: baseUrl + 'sphere.jpg',
    caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
});
```

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

### Initialize Viewer with Cubemap Tiles Adapter

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/guide/adapters/cubemap-tiles.md

Import and use the CubemapTilesAdapter to initialize the Photo Sphere Viewer with tiled cubemap panorama configuration. This example shows how to specify tile dimensions, base URL for low-resolution images, and a custom tile URL function.

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

const viewer = new Viewer({
    adapter: CubemapTilesAdapter,
    panorama: {
        faceSize: 6000,
        nbTiles: 8,
        baseUrl: {
            left: 'left_low.jpg',
            front: 'front_low.jpg',
            right: 'right_low.jpg',
            back: 'back_low.jpg',
            top: 'top_low.jpg',
            bottom: 'bottom_low.jpg',
        },
        tileUrl: (face, col, row) => {
            return `${face}_${col}_${row}.jpg`;
        },
    },
});
```

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

### Configure Virtual Tour Plugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/examples/plugin-virtual-tour.html

Configure the Virtual Tour plugin with various options for GPS mode, 3D rendering, start node, preloading, custom link tooltips, arrow styles, and map integration. This setup is useful for creating interactive virtual tours with defined nodes and navigation.

```javascript
new PhotoSphereViewer({
  container: 'viewer',
  loadingImg: baseUrl + 'loader.gif',
  defaultYaw: '100deg',
  plugins: [
    MarkersPlugin,
    GalleryPlugin.withConfig({
      // visibleOnLoad: true,
      // hideOnClick: false,
    }),
    MapPlugin.withConfig({
      static: true,
      maxZoom: 150,
    }),
    PlanPlugin.withConfig({
      position: 'bottom right',
      defaultZoom: 18,
    }),
    VirtualTourPlugin.withConfig({
      positionMode: 'gps',
      renderMode: '3d',
      startNodeId: nodes[1].id,
      preload: true,
      // showLinkTooltip: false,
      transitionOptions: {
        // showLoader: false,
        // speed: '10rpm',
        // effect: 'black',
        // rotation: false,
      },
      getLinkTooltip(content, link, node) {
        return `${content}<pre>Node #${node.id}</pre>`;
      },
      arrowStyle: {
        // image: 'https://www.svgrepo.com/show/181247/upload-arrows.svg',
        // size: { width: 80, height: 80 },
        // style: { cursor: 'help' },
      },
      // client mode dataMode: 'client',
      nodes: nodes,
      map: {
        imageUrl: baseUrl + 'tour/key-biscayne-map.jpg',
        size: { width: 1600, height: 1200 },
        extent: [-80.158123, 25.66805, -80.153824, 25.665308],
        // recenter: false,
      },
      // server mode (mock)
      // dataMode: 'server',
      // getNode: (nodeId) => {
      // console.log('GET node ' + nodeId);
      // return new Promise((resolve) => {
      // setTimeout(() => resolve({
      // ...nodesById[nodeId],
      // links: nodesById[nodeId].links.map((link) => ({
      // ...link,
      // gps: nodesById[link.nodeId].gps,
      // })),
      // }), 200)
      // });
      // },
    }),
  ],
});
```

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

### Configure Plugins During Initialization

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/index.md

Provide plugins to the viewer's configuration. Use `withConfig` for plugins that accept configuration options.

```javascript
const viewer = new Viewer({
    plugins: [
        PluginA,
        PluginB.withConfig({
            option1: 'foo',
            option2: 'bar',
        }),
    ],
});
```

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

### setNodes

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/virtual-tour.md

Changes the nodes in the virtual tour and optionally sets the starting node.

```APIDOC
## setNodes(nodes, [startNodeId])

### Description
Changes the nodes and display the first one (or the one designated by `startNodeId`).

### Method
`setNodes(nodes, [startNodeId])`

### Parameters
#### Path Parameters
- **nodes** (array) - Required - An array of node objects to set for the tour.
- **startNodeId** (string) - Optional - The ID of the node to display first.
```

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

### Initialize PhotoSphereViewer with Settings Plugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/cypress/pages/plugins/settings.html

Demonstrates how to initialize PhotoSphereViewer and include the SettingsPlugin. The persist option can be controlled via URL parameters.

```javascript
import { Viewer } from '@photo-sphere-viewer/core';
import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const urlParams = new URLSearchParams(window.location.search);

const viewer = new Viewer({
  container: 'photosphere',
  panorama: baseUrl + 'sphere-small.jpg',
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  loadingImg: baseUrl + 'loader.gif',
  plugins: [
    SettingsPlugin.withConfig({
      persist: urlParams.get('persist') === 'true',
    }),
  ],
});

window.viewer = viewer;
```

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

### Initialize Viewer with Stereo Plugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/public/demos/plugin-stereo.html

Import necessary modules and initialize the PhotoSphereViewer with the StereoPlugin and GyroscopePlugin. Ensure all required CDN links are included in your HTML.

```javascript
import { Viewer } from '@photo-sphere-viewer/core';
import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';
import { StereoPlugin } from '@photo-sphere-viewer/stereo-plugin';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

new Viewer({
  container: 'viewer',
  panorama: baseUrl + 'sphere.jpg',
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  loadingImg: baseUrl + 'loader.gif',
  plugins: [
    GyroscopePlugin,
    StereoPlugin,
  ],
});
```

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

### PSV Notification Demo Implementation

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/guide/components/notification.md

JavaScript code for the notification demo. This example consistently displays new notifications.

```javascript
import "./notification.scss";

import { utils } from "@photo-sphere-viewer/core";

const { $, EVENTS } = utils;

export default function (viewer) {
  let notification = null;
  let notificationId = null;

  const showNotification = (message, timeout) => {
    if (!notification) {
      notification = $(
        `<div class="psv-notification">
          <button class="psv-notification-close">&times;</button>
          <div class="psv-notification-content"></div>
        </div>`
      );
      viewer.container.appendChild(notification.getElement());

      notification.find(".psv-notification-close").on("click", () => {
        hideNotification();
      });
    }

    notification.find(".psv-notification-content").html(message);
    notification.show();

    if (timeout) {
      setTimeout(() => {
        hideNotification();
      }, timeout);
    }
  };

  const hideNotification = () => {
    if (notification) {
      notification.hide();
    }
  };

  viewer.on(EVENTS.READY, () => {
    showNotification(
      "Welcome to the Photo Sphere Viewer demo!",
      5000
    );
  });

  viewer.on("click", () => {
    showNotification("You clicked the viewer.");
  });

  return {
    show: showNotification,
    hide: hideNotification,
  };
}
```

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

### Standard Autorotation Setup

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/autorotate.md

Configure the plugin for standard automatic rotation. The `autorotatePitch` option sets the vertical angle for rotation.

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

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

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

### Minimal PlanPlugin Configuration

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/plan.md

This snippet shows the basic setup for the PlanPlugin, requiring only the 'coordinates' property for the panorama's GPS location.

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

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

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

### PSV Intro Animation Demo Configuration

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/demos/advanced/animation.md

Configuration for the Photo Sphere Viewer intro animation demo, including autoload and required packages.

```yaml
autoload: true
title: PSV Intro Animation Demo
packages:
    - name: autorotate-plugin
```

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

### Initialize Viewer and Configure Transitions with lil-gui

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/examples/misc-transition.html

Sets up the PhotoSphereViewer with initial panorama and configures transition options using lil-gui. The `defaultTransition` option is dynamically updated based on GUI controls.

```javascript
import { GUI } from 'lil-gui';
import { Viewer, DEFAULTS } from '@photo-sphere-viewer/core';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const panos = [
  {
    url: baseUrl + 'sphere.jpg',
    caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  },
  {
    url: baseUrl + 'sphere-test.jpg',
    caption: 'Test sphere',
  },
];

const viewer = new Viewer({
  container: 'photosphere',
  panorama: panos[0].url,
  caption: panos[0].caption,
  loadingImg: baseUrl + 'loader.gif',
});

let i = 0;

const config = {
  enabled: true,
  speed_mode: 'duration',
  speed_duration: 1.5,
  speed_speed: 3,
  rotation: true,
  effect: 'fade',

  run() {
    i = 1 - i;
    viewer.setPanorama(panos[i].url, {
      caption: panos[i].caption,
      position: {
        yaw: (((Math.random() - 0.5) * 3) / 2) * Math.PI,
        pitch: (((Math.random() - 0.5) * 3) / 4) * Math.PI,
      },
      zoom: Math.random() * 60 + 20,
    });
  },
};

const gui = new GUI({ title: 'Transition Options' });

gui.add(config, 'enabled');
gui.add(config, 'rotation');
gui.add(config, 'effect', ['fade', 'black', 'white']);

const speed = gui.addFolder('Speed/Duration');
speed.add(config, 'speed_mode', ['duration', 'speed']).name('Mode');
speed.add(config, 'speed_duration', 0.5, 10, 0.5).name('Duration (s)');
speed.add(config, 'speed_speed', 0.5, 10, 0.5).name('Speed (rpm)');

gui.add(config, 'run').name('Run');

gui.onChange(() => {
  viewer.setOption('defaultTransition', !config.enabled ? null : {
    rotation: config.rotation,
    effect: config.effect,
    speed: config.speed_mode === 'duration' ? config.speed_duration * 1000 : config.speed_speed + 'rpm',
  });
});

window.viewer = viewer;
```

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

### Keypoint Autorotation Setup

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/autorotate.md

Configure the plugin to rotate through a series of defined keypoints. Each keypoint can specify a position, a pause duration, and a tooltip.

```javascript
const viewer = new Viewer({
    plugins: [
        AutorotatePlugin.withConfig({
            keypoints: [
                'existing-marker-id',

                { yaw: Math.PI / 2, pitch: 0 },

                {
                    position: { yaw: Math.PI, pitch: Math.PI / 6 },
                    pause: 5000,
                    tooltip: 'This is interesting',
                },

                {
                    markerId: 'another-marker', // will use the marker tooltip if any
                    pause: 2500,
                },
            ],
        }),
    ],
});
```

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

### Install Photo Sphere Viewer with npm/yarn

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/guide/index.md

Use npm or yarn to add the Photo Sphere Viewer core package to your project dependencies.

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

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

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

### Visible Range Plugin Demo using PanoData

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/visible-range.md

This example utilizes the actual dimensions of a cropped panorama to automatically define the visible ranges.

```javascript
import { Viewer } from '@photo-sphere-viewer';
import { VisibleRangePlugin } from '@photo-sphere-viewer/visible-range-plugin';

const viewer = new Viewer({
  container: 'viewer-container',
  panorama: {
    width: 4000,
    height: 2000,
    croppedWidth: 3000,
    croppedHeight: 1500,
    boxWidth: 4000,
    basePosition: {
      x: -1500,
      y: 0,
      z: 0
    },
    panoramaPosition: {
      x: 0,
      y: 0,
      z: -2000
    },
    panoData: {
      fullWidth: 4000,
      fullHeight: 2000,
      croppedWidth: 3000,
      croppedHeight: 1500,
      croppedX: 500,
      croppedY: 250,
      enabled: true
    }
  },
  plugins: [
    VisibleRangePlugin.withConfig({
      usePanoData: true
    })
  ]
});

viewer.addEventListener(ViewerEvent.LOAD_SUCCESS, () => {
  viewer.getPlugin(VisibleRangePlugin).setRangesFromPanoData();
});
```

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

### Initialize Viewer with Cubemap and Overlays

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/examples/plugin-overlays-cubemap.html

Use this configuration to set up a PhotoSphereViewer instance with a cubemap panorama and an overlay using the OverlaysPlugin. Ensure all necessary adapters and plugins are imported.

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

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

const viewer = new Viewer({
  container: 'photosphere',
  adapter: CubemapAdapter,
  panorama: {
    left: baseUrl + 'cubemap/px.jpg',
    front: baseUrl + 'cubemap/nz.jpg',
    right: baseUrl + 'cubemap/nx.jpg',
    back: baseUrl + 'cubemap/pz.jpg',
    top: baseUrl + 'cubemap/py.jpg',
    bottom: baseUrl + 'cubemap/ny.jpg',
  },
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  loadingImg: baseUrl + 'loader.gif',
  plugins: [
    OverlaysPlugin.withConfig({
      overlays: [
        {
          id: 'xray',
          path: {
            left: baseUrl + 'cubemap-overlay/px.png',
            front: baseUrl + 'cubemap-overlay/nz.png',
            right: baseUrl + 'cubemap-overlay/nx.png',
            back: baseUrl + 'cubemap-overlay/pz.png',
            top: baseUrl + 'cubemap-overlay/py.png',
            bottom: baseUrl + 'cubemap-overlay/ny.png',
          },
          opacity: .8,
          zIndex: 1,
        },
      ],
    }),
  ],
});

window.viewer = viewer;
```

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

### Custom Storage Configuration

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/settings.md

Define a custom storage object with 'get' and 'set' methods to manage setting persistence beyond the default LocalStorage.

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

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

### Initialize Compass Plugin with Hotspots

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/compass.md

Demonstrates how to import and configure the CompassPlugin with initial hotspots when creating a new Viewer instance. Ensure the plugin is included in the `plugins` array.

```javascript
import { CompassPlugin } from '@photo-sphere-viewer/compass-plugin';

const viewer = new Viewer({
    plugins: [
        CompassPlugin.withConfig({
            hotspots: [
                { yaw: '45deg' }, 
                { yaw: '60deg', color: 'red' },
            ],
        }),
    ],
});
```

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

### Visible Range Plugin Demo with Custom Range

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/visible-range.md

This example demonstrates locking the visible range between -90° and 90° horizontally and -60° and 60° vertically.

```javascript
import { Viewer } from '@photo-sphere-viewer';
import { VisibleRangePlugin } from '@photo-sphere-viewer/visible-range-plugin';

const viewer = new Viewer({
  container: 'viewer-container',
  panorama: 'https://photo-sphere-viewer.js.org/assets/equirectangular.jpg',
  plugins: [
    VisibleRangePlugin.withConfig({
      horizontalRange: [-Math.PI / 2, Math.PI / 2],
      verticalRange: [-Math.PI / 3, Math.PI / 3],
    }),
  ],
});
```

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

### Initialize Virtual Tour Plugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/virtual-tour.md

Import and configure the VirtualTourPlugin when initializing the Photo Sphere Viewer. Use `withConfig` to provide nodes either directly or via a `getNode` function for asynchronous loading, and specify the `startNodeId`.

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

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

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

### Initialize Viewer with VideoPlugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/video.md

Load the VideoPlugin and a video adapter when initializing the Viewer. Ensure the video adapter is correctly specified.

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

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

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

### Initialize PhotoSphereViewer with GyroscopePlugin

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/public/demos/plugin-gyroscope.html

Import necessary modules and initialize the Viewer with the GyroscopePlugin enabled. Ensure the plugin is included in the `plugins` array during Viewer instantiation.

```javascript
import { Viewer } from '@photo-sphere-viewer/core';
import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

new Viewer({
  container: 'viewer',
  panorama: baseUrl + 'sphere.jpg',
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  loadingImg: baseUrl + 'loader.gif',
  plugins: [
    GyroscopePlugin,
  ],
});
```

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

### GalleryPlugin JavaScript Demo

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/gallery.md

This is the main JavaScript code for the gallery demo, likely containing the viewer initialization and plugin setup. It's referenced from the demo configuration.

```javascript
import { Viewer } from '@photo-sphere-viewer';
import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';
import { ThumbnailsPlugin } from '@photo-sphere-viewer/thumbnails-plugin';
import { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';

const psv = new Viewer({
    container: 'psv-container',
    panorama: 'https://photo-sphere-viewer.js.org/assets/photosphere-1.jpg',
    plugins: [
        GyroscopePlugin,
        ThumbnailsPlugin,
        [GalleryPlugin, {
            items: [
                { id: 'pano-1', name: 'Paris', thumbnail: 'https://photo-sphere-viewer.js.org/assets/thumb-1.jpg', panorama: 'https://photo-sphere-viewer.js.org/assets/photosphere-1.jpg' },
                { id: 'pano-2', name: 'Rome', thumbnail: 'https://photo-sphere-viewer.js.org/assets/thumb-2.jpg', panorama: 'https://photo-sphere-viewer.js.org/assets/photosphere-2.jpg' },
                { id: 'pano-3', name: 'New York', thumbnail: 'https://photo-sphere-viewer.js.org/assets/thumb-3.jpg', panorama: 'https://photo-sphere-viewer.js.org/assets/photosphere-3.jpg' },
                { id: 'pano-4', name: 'Tokyo', thumbnail: 'https://photo-sphere-viewer.js.org/assets/thumb-4.jpg', panorama: 'https://photo-sphere-viewer.js.org/assets/photosphere-4.jpg' },
            ],
            visibleOnLoad: true,
            navigationArrows: true,
        }],
    ],
});
```

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

### Access Virtual Tour and Markers Plugins

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/examples/plugin-virtual-tour.html

Get instances of the Virtual Tour and Markers plugins after the viewer has been initialized. This allows for programmatic control and event subscription.

```javascript
const virtualTour = viewer.getPlugin(VirtualTourPlugin);
const markers = viewer.getPlugin(MarkersPlugin);
```

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

### Add an Options Setting

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/settings.md

Register a new options setting. Provide 'options' to list available choices, 'current' to get the active choice, and 'apply' to change it.

```javascript
let currentOption = 'A';

settings.addSetting({
    id: 'custom-options-setting',
    label: 'Options setting',
    type: 'options',
    options: () => [
        { id: 'A', label: 'Option A' },
        { id: 'B', label: 'Option B' },
    ],
    current: () => currentOption,
    apply: (option) => (currentOption = option),
});
```

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

### Initialize PhotoSphereViewer with Custom Navbar

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/cypress/pages/core/navbar.html

Demonstrates how to initialize the PhotoSphereViewer with a custom navbar configuration, including built-in controls and custom-defined buttons.

```javascript
import { Viewer, DEFAULTS } from '@photo-sphere-viewer/core';
import { CustomNavbarButton } from '/scripts/CustomNavbarButton.js';
customElements.define('custom-navbar-button', CustomNavbarButton);
const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const viewer = new Viewer({
  container: 'photosphere',
  panorama: baseUrl + 'sphere-small.jpg',
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  description: document.querySelector('#description').innerHTML,
  lang: {
    myButton: 'Click me',
  },
  navbar: [
    'zoom',
    'move',
    'download',
    {
      title: 'myButton',
      className: 'custom-button',
      content: '<svg viewBox="0 0 10 10"><circle cx=5 cy=5 r=5 fill=black/></svg>',
      onClick(viewer) {
        alert('Custom button clicked');
      }
    },
    {
      title: 'Other button',
      className: 'custom-button',
      content: '<svg viewBox="0 0 10 10"><rect x=0 y=0 width=10 height=10 fill=black/></svg',
      collapsable: false,
      onClick(viewer) {
        alert('Custom button 2 clicked');
      }
    },
    'caption',
    'fullscreen',
  ],
});
window.viewer = viewer;
```

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

### Initialize GalleryPlugin with Items

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/gallery.md

Demonstrates how to import and initialize the GalleryPlugin with a list of panorama items. Each item requires an ID, panorama path, and optionally a name 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',
                },
            ],
        }),
    ],
});
```

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

### Initialize Viewer with DualFisheyeAdapter

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/examples/adapter-dualfisheye.html

Use this snippet to set up PhotoSphereViewer for dual fisheye images. Ensure the DualFisheyeAdapter is imported and passed to the adapter option. The panorama, caption, and loading image are specified.

```javascript
import { Viewer, DualFisheyeAdapter } from '@photo-sphere-viewer/core';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

const viewer = new Viewer({
  container: 'photosphere',
  adapter: DualFisheyeAdapter,
  panorama: baseUrl + 'dualfisheye.jpg',
  caption: 'Kotka archipelago, Finland <b>&copy; Jonna Luostari</b>',
  sphereCorrection: {
    tilt: 0.1
  },
  loadingImg: baseUrl + 'loader.gif',
});

window.viewer = viewer;
```

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

### Define Polygon Marker with Pixel Coordinates

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/markers.md

Use `polygonPixels` to define a polygon marker using pixel coordinates on the panorama image. This example shows a simple polygon.

```javascript
{
    id: 'marker-1',
    polygonPixels: [[100, 200], [150, 300], [300, 200]],
}
```

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

### Generate Equirectangular Tiles with ImageMagick

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/guide/adapters/equirectangular-tiles.md

Command to split a large panorama image into smaller tiles using ImageMagick. This example crops a 12000x6000 image into 750x750 tiles.

```bash
magick.exe panorama.jpg \
  -crop 750x750 -quality 95 \
  -set filename:tile "%[fx:page.x/750]_%[fx:page.y/750]" \
  -set filename:orig %t \
  %[filename:orig]_%[filename:tile].jpg
```

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

### Initialize Viewer with Cubemap Video Adapter

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/guide/adapters/cubemap-video.md

Instantiate the viewer with the CubemapVideoAdapter. Ensure the VideoPlugin is also included. The panorama source is specified as a video file path.

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

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

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

### Enable Stereo and Gyroscope Plugins

Source: https://github.com/mistic100/photo-sphere-viewer/blob/main/docs/plugins/stereo.md

Import and enable both the GyroscopePlugin and StereoPlugin when initializing the Photo Sphere Viewer. This setup is necessary for the stereo view functionality to work on mobile devices.

```javascript
import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';
import { StereoPlugin } from '@photo-sphere-viewer/stereo-plugin';

const viewer = new Viewer({
    plugins: [
        GyroscopePlugin, 
        StereoPlugin,
    ],
});
```