PDBe Molstar Superposition Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>PDBe Molstar - Basic</title>

    <!-- Molstar CSS & JS -->
    <link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-1.1.0.css">
    <script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-1.1.0.js"></script>
    <style>
      #myViewer{
        float:left;
        width:300px;
        height: 300px;
        position:relative;
      }
    </style>
  </head>

  <body>

    <h4>PDBe Mol* JS Plugin Demo</h4>

    <!-- Molstar container -->
    <div id="myViewer"></div>
      
    <script>

      //Create plugin instance
      var viewerInstance = new PDBeMolstarPlugin();
  
      //Set options (Checkout available options list in the documentation)
      var options = {
        moleculeId: 'PRO_0000449623',
        superposition: true,
        superpositionParams: {
          matrixAccession: 'P0DTD1'
        },
        hideControls: true
      }
      
      //Get element from HTML/Template to place the viewer 
      var viewerContainer = document.getElementById('myViewer');
  
      //Call render method to display the 3D view
      viewerInstance.render(viewerContainer, options);
      
    </script>
  </body>

</html>