Marker with virtual tour

[aplonogax]

Hi,

I'm using PSV version 4.7.0, in a small angular project. I use both Marker and VirtualTour plugin because I'd like to have both the navigation functionality and a list of markers for every node, but I have no clue on how to make it work.
I've tried to define a node with a "markers" property, populated with new object, something like

markers: [{
        id: '11',
        type: 'imageLayer',
        visible: true,
        config: {
          id: '11',
          longitude: 60,
          latitude: 60,
          imageLayer: './assets/images/pin-red.png',
          width: 32,
          height: 32,
        },
        is3d: () => { return false },
        isNormal: () => { return true },
        isPoly: () => { return false },
        isPolyPx: () => { return false },
        isPolyRad: () => { return false },
        isPolygon: () => { return false },
        isPolyline: () => { return false },
        isSvg: () => { return false }
      }],
...

I also tried to first create a Marker with the addMarker function from the Marker plugin, but I always get the same error:

ERROR Error: Uncaught (in promise): PSVError: missing marker content, either image, imageLayer, html, polygonPx, polygonRad, polylinePx, polylineRad, square, rect, circle, ellipse, path
PSVError: missing marker content, either image, imageLayer, html, polygonPx, polygonRad, polylinePx, polylineRad, square, rect, circle, ellipse, path
    at Function.getType (markers.js:1130:1)

I've looked in the official documentation but I found nothing. Is probably something I'm doing wrong but I have no clue on what can be. Also, in the documentation it says: The plugin allows to define nodes which contains a panorama and one or more links to other nodes. The links are represented with a 3D arrow (default) or using the Markers plugin. and also on this I found no clue on how to use marker plugin to represent links.

Any help will be really appreceated
Thank
Tommaso

[mistic100]

Hello

Markers are configured with MarkerProperties objects not with the Marker object which is internal.

Look at the exemple source https://photo-sphere-viewer.js.org/plugins/plugin-markers.html#example

[aplonogax]

Hi,

Thanks for the replay, the example you provided me works with no problem.

The issue I'm facing is by adding a list of markers to a node of a VirtualPlugin. I'm not entirely sure if this is a matter of angular, typescript or PSV, and so I'm tryng every things that pop in my mind :)

If you could provide me a working example of a viewer with 2 node, and some markers on each nodes I will try to understand what I'm doing wrong.

Thanks
Tommaso

[mistic100]

The problem is a mistake in the type definition

Photo-Sphere-Viewer/types/plugins/virtual-tour/index.d.ts

Line 18 in cae8c85

markers?: Marker[];

I will fix it

In the meantime, use a MarkerProperties object (not a Marker) and break the type check with as any or // @ts-ignore

[github-actions]

This feature/bug fix has been released in version 4.7.1.