virtual tour: map support

docs/.vuepress/plugins/code-demo/CodeDemo.vue

@@ -54,7 +54,7 @@ export default {
     name: 'CodeDemo',
     components: { ServiceButton },
     props: {
-        autoload: { type: Boolean, default: false },
+        autoload: { type: String, default: 'false' },
         title: { type: String, default: '' },
         version: { type: String, default: '' },
         rawHtml: { type: String, default: '' },
@@ -69,7 +69,7 @@ export default {
         };
     },
     created() {
-        this.show = this.autoload;
+        this.show = this.autoload === 'true';
     },
     computed: {
         html() {

docs/plugins/autorotate.md

@@ -92,6 +92,7 @@ const viewer = new PhotoSphereViewer.Viewer({
 
     plugins: [
         [PhotoSphereViewer.AutorotatePlugin, {
+            autostartDelay: 1000,
             autorotatePitch: '5deg',
         }],
     ],

docs/plugins/compass.md

@@ -152,7 +152,7 @@ Small dots visible on the compass. Each spot consists of a position (either `yaw
 ::: tip
 [Markers](./markers.md) can be displayed on the compass by defining their `compass` data, which can be `true` or a specific color.
 
-```js
+```js{6,12}
 markers: [
     {
         id: 'marker-1',

docs/plugins/map.md

@@ -241,6 +241,23 @@ Minimum zoom level of the map.
 
 Small dots visible on the map. See bellow.
 
+#### `lang`
+
+-   type: `object`
+-   default:
+
+```js
+lang: {
+    map: 'Map',
+    mapMaximize: 'Maximize',
+    mapMinimize: 'Minimize',
+    mapReset: 'Reset',
+}
+```
+
+_Note: this option is not part of the plugin but is merged with the main [`lang`](../guide/config.md#lang) object._
+
+
 ### Hotspots
 
 #### `id`
@@ -265,7 +282,7 @@ Allow to override the default `spotColor`, `spotImage` and `spotSize`.
 
 The marker tooltip is reused if defined. The viewer will be moved to face the marker if clicked on the map.
 
-```js
+```js{7,15}
 markers: [
     {
         id: 'marker-1',

docs/plugins/markers.md

@@ -242,9 +242,11 @@ markersPlugin.addEventListener('select-marker', ({ marker, doubleClick, rightCli
 You can try markers live in [the playground](../playground.md).
 :::
 
-## Markers definition
+## Markers
 
-One of these options is required.
+### Definition
+
+One, and only one, of these options is required for each marker.
 
 | Name             | Type                                     | Description                                                                             |
 | ---------------- | ---------------------------------------- | --------------------------------------------------------------------------------------- |
@@ -257,7 +259,7 @@ One of these options is required.
 | `ellipse`        | `integer[2]`<br>`{cx:int,cy:int}`        | Radiuses of the ellipse.                                                                |
 | `path`           | `string`                                 | Definition of the path (0,0 will be placed at the defined `position`).                  |
 | `polygon`        | `double[2][]`<br>`string[2][]`           | Array of points defining the polygon in spherical coordinates.                          |
-| `polygonPixels`  | `integer[2][]`                           | Same as above in pixel coordinates on the panorama image.                               |
+| `polygonPixels`  | `integer[2][]`                           | Same as `polygon` but in pixel coordinates on the panorama image.                       |
 | `polyline`       | `double[2][]`<br>`string[2][]`           | Same as `polygon` but generates a polyline.                                             |
 | `polylinePixels` | `integer[2][]`                           | Same as `polygonPixels` but generates a polyline.                                       |
 
@@ -287,7 +289,7 @@ Both allows to display an image but the difference is in the rendering technique
 And `image` marker is rendered flat above the viewer but and `imageLayer` is rendered inside the panorama itself, this allows for more natural movements and scaling.
 :::
 
-## Markers options
+### Options
 
 #### `id` (required)
 

docs/plugins/resolution.md

@@ -100,8 +100,7 @@ const viewer = new PhotoSphereViewer.Viewer({
 -   type: `object[]`
 -   updatable: no, use `setResolutions()` method
 
-List of available resolutions. Each resolution consist of an object with the properties `id`, `label` and `panorama`.
-Cubemaps are supported.
+List of available resolutions. Each resolution consists of an object with the properties `id`, `label` and `panorama`.
 
 #### `defaultResolution`
 

docs/plugins/video.md

@@ -169,7 +169,7 @@ lang: {
 
 _Note: this option is not part of the plugin but is merged with the main [`lang`](../guide/config.md#lang) object._
 
-## Multi resolution
+### Multi resolution
 
 You can offer multiple resolutions of your video with the [ResolutionPlugin](./resolution.md).
 

docs/plugins/virtual-tour.md

@@ -65,7 +65,7 @@ The nodes can be provided all at once or asynchronously as the user navigates.
 :::: tabs
 
 ::: tab Client mode
-In client mode you must provide all `nodes` all at once, you can also change all the nodes with the `setNodes` method.
+In client mode you must provide all the `nodes` at once, you can also change the nodes with the `setNodes` method.
 
 ```js
 const nodes = [
@@ -77,7 +77,7 @@ const nodes = [
 :::
 
 ::: tab Server mode
-In server mode you provide the `getNode callbacks function which returns a Promise to load the data of a node.
+In server mode you provide the `getNode` function which returns a Promise to load the data of a node.
 
 ```js
 getNode = async (nodeId) => {
@@ -91,7 +91,7 @@ getNode = async (nodeId) => {
 ::::
 
 ::: tip
-If the [Gallery plugin](./gallery.md) is loaded, it will be configured with the list of nodes (client mode only).
+The [Gallery plugin](./gallery.md), [Map plugin](./map.md) and [Compass plugin](./compass.md) plugins can be easily integrated with the virtual tour.
 :::
 
 ## Example
@@ -218,7 +218,9 @@ virtualTour.setNodes([
 
 :::
 
-## Nodes options
+## Nodes
+
+### Configuration
 
 #### `id` (required)
 
@@ -234,7 +236,7 @@ Refer to the main [config page](../guide/config.md#panorama-required).
 
 -   type: `array`
 
-Definition of the links of this node. See bellow.
+Definition of the links of this node. [See bellow](#links).
 
 #### `gps` (required in GPS mode)
 
@@ -282,7 +284,11 @@ Refer to the main [config page](../guide/config.md#panodata).
 
 Refer to the main [config page](../guide/config.md#spherecorrection).
 
-## Links options
+#### `map` (client mode only)
+
+Configuration of the hotspot when using the MapPlugin. [See bellow](#map-plugin).
+
+### Links
 
 #### `nodeId` (required)
 
@@ -302,7 +308,7 @@ Position of the link in **spherical coordinates** (radians/degrees) or **texture
 
 Overrides the GPS coordinates of the target node.
 
-#### `name`
+#### `name` (recommended in server mode)
 
 -   type: `string`
 
@@ -394,11 +400,15 @@ Duration of the transition between nodes.
 #### `linksOnCompass`
 
 -   type: `boolean`
--   default: `true` if markers render mode
+-   default: `true`
 -   updatable: no
 
 If the [Compass plugin](./compass.md) is enabled, displays the links on the compass.
 
+#### `map` (client mode only)
+
+Configuration when using the MapPlugin. [See bellow](#map-plugin).
+
 #### `markerStyle` (markers mode only)
 
 -   type: `object`
@@ -424,7 +434,7 @@ Default value is:
 ::: tip
 If you want to use another marker type like `image` you must define `html: null` to remove the default value.
 
-```js
+```js{2}
 markerStyle: {
   html : null,
   image: 'path/to/image.png',
@@ -469,6 +479,62 @@ Vertical offset in radians applied to the markers to compensate for the viewer p
 
 Vertical position of the arrows.
 
+### Map plugin <Badge text="5.1.1"/>
+
+Using the [Map plugin](./map.md) allows to show the position of each node on a map. It requires some additional configuration, especially when working with GPS coordinates.
+
+:::: tabs
+
+::: tab Configure the map manually
+
+This configuration is required if `positionMode=manual`. You can also choose to use it if `positionMode=gps`.
+
+To define the position of the node on the map you have to configure its `map` property with `x` and `y`. You can also configure other things like `color`, `image` and `size`. Please refer to the [Hotspots section](map.md#hotspots-2) of the Map plugin.
+
+```js{7}
+plugins: [
+    [VirtualTourPlugin, {
+        nodes: [
+            {
+                id: 'node-1', 
+                panorama: '001.jpg',
+                map: { x: 500, y: 815, color: 'red' },
+            },
+        ],
+    }],
+],
+```
+
+:::
+
+::: tab Configure the map with GPS
+
+This configuration can only be used if `positionMode=gps`.
+
+You have to provide additional metadata about the map for the automatic positionning to work : its `size` in pixels and its `extent` (GPS bounds).
+
+```js{5-6}
+plugins: [
+    [VirtualTourPlugin, {
+        map: {
+            imageUrl: 'map.jpg',
+            size: { width: 1600, height: 1200 },
+            extent: [-80.158123, 25.668050, -80.153824, 25.665308],
+        },
+    }],
+],
+```
+
+Each node can still have a `map` property to override  `color`, `image` and `size`.
+
+:::
+
+::::
+
+::: warning Map image
+The map image must be configured with `map.imageUrl` inside the VirtualTour plugin configuration. The `imageUrl` in the Map plugin is ignored.
+:::
+
 ## Methods
 
 #### `setNodes(nodes, [startNodeId])` (client mode only)