Can't find the right way to manage the Plugins Methods

[Elius94]

import "./styles.css";
import {
  ReactPhotoSphereViewer,
  MarkersPlugin
} from "react-photo-sphere-viewer";
import React from "react";

function App() {
  //const photoSphereRef = React.createRef();
  const [markersManager, setMarkerManager] = React.useState();
  const pSRef = React.useCallback((node) => {
    const markersPlugs = node?.getPlugin(MarkersPlugin);
    setMarkerManager(markersPlugs);
  }, []);

  React.useEffect(() => {
    if (markersManager) {
      console.log(markersManager);
    }
  }, [markersManager]);

  const plugins = [
    [
      MarkersPlugin,
      {
        // list of markers
        markers: [
          {
            // image marker that opens the panel when clicked
            id: "image",
            longitude: 0.33,
            latitude: 0.1,
            image: "pin-blue.png",
            width: 32,
            height: 32,
            anchor: "bottom center",
            tooltip: "Mountain peak. <b>Click me!</b>"
          },
          {
            // image marker rendered in the 3D scene
            id: "imageLayer",
            imageLayer: "drone.png",
            width: 220,
            height: 220,
            longitude: 13.5,
            latitude: -0.1,
            tooltip: "Image embedded in the scene"
          }
        ]
      }
    ]
  ];

  const handleClick = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <ReactPhotoSphereViewer
        ref={pSRef}
        src="Test_Pano.jpg"
        height={"100vh"}
        width={"100%"}
        littlePlanet={false}
        onClick={handleClick}
        plugins={plugins}
      ></ReactPhotoSphereViewer>
    </div>
  );
}

export default App;

It's currently difficult to manage the marker plugins methods.

[Elius94]

https://codesandbox.io/s/sandbox-react-photo-sphere-viewer-by-elius94-j064sm?file=/src/App.js

[aziez]

how to implmenets on Next.js,,,

I Tray but have an error Cannot use import statement outside a module

[Elius94]

how to implmenets on Next.js,,,

I Tray but have an error Cannot use import statement outside a module

Hi! Can you show me your implementation?

[Elius94]

import "./styles.css";
import {
  ReactPhotoSphereViewer,
  MarkersPlugin
} from "react-photo-sphere-viewer";
import React from "react";

function App() {
  const pSRef = React.createRef();

  const handleReady = (instance) => {
    const markersPlugs = instance.getPlugin(MarkersPlugin);
    if (!markersPlugs) return;
    console.log(markersPlugs);
    markersPlugs.addMarker({
      id: "imageLayer2",
      imageLayer: "drone.png",
      size: { width: 220, height: 220 },
      position: { yaw: "130.5deg", pitch: "-0.1deg" },
      tooltip: "Image embedded in the scene"
    });
    markersPlugs.addEventListener("select-marker", () => {
      console.log("asd");
    });
  };

  const plugins = [
    [
      MarkersPlugin,
      {
        // list of markers
        markers: [
          {
            // image marker that opens the panel when clicked
            id: "image",
            position: { yaw: "0.33deg", pitch: "0.1deg" },
            image: "pin-blue.png",
            anchor: "bottom center",
            size: { width: 32, height: 32 },
            tooltip: "Mountain peak. <b>Click me!</b>"
          },
          {
            // image marker rendered in the 3D scene
            id: "imageLayer",
            imageLayer: "drone.png",
            size: { width: 220, height: 220 },
            position: { yaw: "13.5deg", pitch: "-0.1deg" },
            tooltip: "Image embedded in the scene"
          }
        ]
      }
    ]
  ];

  const handleClick = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <ReactPhotoSphereViewer
        ref={pSRef}
        src="Test_Pano.jpg"
        height={"100vh"}
        width={"100%"}
        littlePlanet={false}
        onClick={handleClick}
        onReady={handleReady}
        plugins={plugins}
      ></ReactPhotoSphereViewer>
    </div>
  );
}

export default App;