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. The Panoramax viewer is a web JS library which displays pictures and sequences from a Panoramax server, or any STAC API offering geolocated pictures.

Web viewer screenshots

Features

  • Move, zoom, drag pictures
  • Travel between pictures in sequences
  • Find pictures by location with a mini-map

You can try it at explore.panoramax.fr (stable version), or at viewer.geovisio.fr (develop version and all variations).

Install & load

Note

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

Many options are available for installing the viewer.

Panoramax viewer is available on NPM as @panoramax/web-viewer package, you can install it with:

npm install @panoramax/web-viewer

Then, you can load the viewer in your own code:

import * as Panoramax from '@panoramax/web-viewer';

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

Add the import map described here in your HTML.

Then, load the Panoramax module:

<script type="module" src="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@5.0.0/build/index.js"></script>

<!-- You may also use the lighter PhotoViewer version if you prefer -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@5.0.0/build/index_photoviewer.js"></script>

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

Add this bundle script import in your HTML:

<script src="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@5.0.0/build/bundle.cjs"></script>

<!-- You may also use the lighter PhotoViewer version if you prefer -->
<script src="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@5.0.0/build/bundle_photoviewer.cjs"></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

Once Panoramax library is available in your codebase, 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"
/>

If you'd like a photo viewer that looks like an iframe embed (with only a small legend widget), you may use this code:

<pnx-photo-viewer
  endpoint="https://api.panoramax.xyz/api"
  sequence="id-to-an-existing-sequence"
  picture="id-to-a-picture-in-this-sequence"
  widgets="false"
>
    <pnx-widget-legend light slot="bottom-right"></pnx-widget-legend>
</pnx-photo-viewer>

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.