Skip to content

Web viewer documentation

Welcome to Panoramax Web Viewer documentation ! It will help you through all phases of setup, run and develop on Panoramax JS pictures viewer.

Web viewer screenshots

Note

If at some point you're lost or need help, you can contact us through issues or by email.

Install

Many options are available for installing the viewer.

Panoramax viewer is available on NPM as @panoramax/web-viewer package.

npm install @panoramax/web-viewer

If you want the latest version (corresponding to the develop git branch), you can use the develop NPM dist-tag:

npm install @panoramax/web-viewer@develop

You can rely on various providers offering hosted NPM packages, for example JSDelivr.

<!-- You may use another version than 4.0.0, just change the release in URL -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@4.0.0/build/index.css" />
<script src="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@4.0.0/build/index.js"></script>

You can install and use Panoramax web client based on code provided in this repository.

This library relies on any recent Node.js version, which should be installed on your computer. Then, you can build the library using these commands:

git clone https://gitlab.com/panoramax/clients/web-viewer.git
cd web-viewer/
npm install
npm build

Basic usage

First, you need to import Panoramax code:

Make sure to have both JS and CSS code available in your HTML head part:

<!-- Change the actual path depending of where you installed the library -->
<link rel="stylesheet" type="text/css" href="web-viewer/build/index.css" />
<script src="web-viewer/build/index.js"></script>

Make sure to import both JS and CSS in your code:

import Panoramax from '@panoramax/web-viewer';
import '@panoramax/web-viewer/build/index.css';

Once ready, you can create for example a viewer. We use web components to do so, you can create it in HTML or in other web components:

<pnx-viewer
  endpoint="https://api.panoramax.xyz/api"
/>

Many options are available to configure it finely.

You may also add some CSS to make sure your component has proper dimensions:

pnx-viewer {
    width: 300px;
    height: 250px;
}

Beyond classic viewer, other widgets are available and can be tested online.

Coverage map

A simple map for showing Panoramax data availability.

<pnx-coverage-map
  endpoint="https://api.panoramax.xyz/api"
/>

Many options are available as well.

Photo Viewer

A photo-only viewer, showing one picture at a time, and offering navigation through sequence and nearby pictures.

<pnx-photo-viewer
  endpoint="https://api.panoramax.xyz/api"
  sequence="id-to-an-existing-sequence"
  picture="id-to-a-picture-in-this-sequence"
/>

Many options are available as well.

Editor

A map and photo viewer, focused on a single sequence, for previewing edits made to it.

<pnx-editor
  endpoint="https://panoramax.openstreetmap.fr/api"
  sequence="id-to-an-existing-sequence"
  picture="id-to-a-picture-in-this-sequence"
/>

Many options are available as well.