Markers in MarkersPlugin cause node markers from VirtualTourPlugin to disappear

[mikepianka]

Sorry for all the questions lately! Is there an official example of a virtual tour using manual positionMode and markers renderMode? I am trying to set up a small example and while I can see my node on the compass, I cannot see it in the scene.

It is defined like this:

        [
          VirtualTourPlugin,
          {
            dataMode: "client",
            positionMode: "manual",
            renderMode: "markers",
            startNodeId: "node-1",
            nodes: [
              {
                id: "node-1",
                panorama: "./assets/pano.jpg",
                name: "One",
                links: [
                  {
                    nodeId: "node-2",
                    latitude: 0,
                    longitude: 0,
                    markerStyle: {
                      html: null, // needed for other marker styles
                      id: "temppp",
                      square: 30,
                      latitude: "0deg",
                      longitude: "0deg",
                      svgStyle: {
                        fill: "rgba(200, 0, 0, 0.2)",
                        stroke: "rgba(200, 0, 50, 0.8)",
                        strokeWidth: "2px",
                      },
                    },
                  },
                ],
              },
              {
                id: "node-2",
                panorama: "./assets/pano_2.jpg",
                name: "Two",
                links: [
                  { nodeId: "node-1", latitude: "0deg", longitude: "0deg" },
                ],
              },
            ],
          },
        ],

[mistic100]

Looks like a long lasting bug in the markers plugin : square should be transformed to rect as there is not squares in SVG. Use rect: [30, 30] instead until it is fixed.

---

You should remove id, longitude, latitude from the marker style definition, just for the sake of cleanliness.
Reference : https://github.com/mistic100/Photo-Sphere-Viewer/blob/dev/src/plugins/virtual-tour/index.js#L590-L598

[mikepianka]

Thanks, but after those changes I still don't see the square.

Code:

        [
          VirtualTourPlugin,
          {
            dataMode: "client",
            positionMode: "manual",
            renderMode: "markers",
            startNodeId: "node-1",
            nodes: [
              {
                id: "node-1",
                panorama: "./assets/pano.jpg",
                name: "One",
                links: [
                  {
                    nodeId: "node-2",
                    latitude: 0,
                    longitude: 0,
                    markerStyle: {
                      html: null, // needed for other marker styles
                      rect: [30, 30],
                      svgStyle: {
                        fill: "rgba(200, 0, 0, 0.2)",
                        stroke: "rgba(200, 0, 50, 0.8)",
                        strokeWidth: "2px",
                      },
                    },
                  },
                ],
              },
              {
                id: "node-2",
                panorama: "./assets/pano_2.jpg",
                name: "Two",
                links: [
                  { nodeId: "node-1", latitude: "0deg", longitude: "0deg" },
                ],
              },
            ],
          },
        ],

[mistic100]

Well post a repro on jsfiddle. I just tested it on the example file, it works for me.

[mikepianka]

I actually just noticed that the red pin that should be on the lighthouse is missing in the virtual tour example in the docs. If you hover the cursor in that spot the tooltip displays but the marker is not visible. Same problem?

[mistic100]

No that's just because the URL was wrong, I fixed the demo.

[mikepianka]

OK I figured out the problem. If you have markers defined in the marker plugin, they will cause any node markers from the virtual tour to not be shown. If this is not possible an error should be thrown. I think it would be a good idea to leave it possible though so that a reoccurring general marker could be shown as an overlay on all virtual tour images.

First example of virtual tour in manual mode with markers working fine: https://jsfiddle.net/3vjhrnpy

Second example where adding a circle marker causes the virtual tour markers to disappear: https://jsfiddle.net/3vjhrnpy/1/

[mistic100]

That's a tricky problem because :

• the markers plugin calls setMarkers on init, which clear all markers
• the virtual tour plugin calls clearMarkers when changing node (and then setMarkers if the node has additional markers)

I think this behavior makes sense if we consider each node independant in term of configuration.

What you can do is configure the same markers on each node.

[mistic100]

I will add a warning and clear the config if this case happens

No default markers can be configured on Markers plugin when using VirtualTour plugin. Consider defining markers on each tour node.

[github-actions]

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