PSV Markers Demo

by mistic100

HTML

<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.css">
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.css">
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.js"></script>
<div id="photosphere"></div>

<script type="text/template" id="lorem-content">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas.
    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
    egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et
    sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet,
    wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
    dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d54469.108394396746!2d6.9617553450295855!3d44.151844842645815!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12cdaf6678af879d%3A0xcabc15aee7b89386!2sParc%20national%20du%20Mercantour!5e0!3m2!1sfr!2sfr!4v1611498421096!5m2!1sfr!2sfr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote><p>Lorem ipsum dolor sit amet, consectetur...

CSS

html, body, #photosphere {
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var viewer = new PhotoSphereViewer.Viewer({
  panorama: 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg',
  container: 'photosphere',
  loadingImg: 'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  defaultLat: 0.3,
  touchmoveTwoFingers: true,
  mousewheelCtrlKey: true,

  plugins: [
    [PhotoSphereViewer.MarkersPlugin, {
      // list of markers
      markers: [{
          // image marker that opens the panel when clicked
          id: 'image',
          longitude: 0.32,
          latitude: 0.11,
          image: 'https://photo-sphere-viewer.js.org/assets/pin-blue.png',
          width: 32,
          height: 32,
          anchor: 'bottom center',
          tooltip: 'A image marker. <b>Click me!</b>',
          content: document.getElementById('lorem-content').innerHTML
        },
        {
          // image marker rendered in the 3D scene
          id        : 'imageLayer',
          imageLayer: 'https://photo-sphere-viewer.js.org/assets/tent.png',
          width     : 120,
          height    : 94,
          longitude : -0.45,
          latitude  : -0.1,
          tooltip   : 'Image embedded in the scene',
        },
        {
          // html marker with custom style
          id: 'text',
          longitude: 0,
          latitude: 0,
          html: 'HTML <b>marker</b> &hearts;',
          anchor: 'bottom right',
          scale: [0.5, 1.5],
          style: {
            maxWidth: '100px',
            color: 'white',
            fontSize: '20px',
            fontFamily: 'Helvetica, sans-serif',
            textAlign: 'center'
          },
          tooltip: {
            content: 'An HTML marker',
            position: 'right'
          }
        },
        {
          // polygon marker
          id: 'polygon',
          polylineRad: [
            [6.2208, 0.0906],
            [0.0443, 0.1028],
            [0.2322, 0.0849],
            [0.4531,...