<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>mapillary-js preview</title>
    <link rel="stylesheet" href="../node_modules/mapillary-js/dist/mapillary-js.css" />
  </head>
  <body>
    <div id="mly"></div>
    <script src="../node_modules/mapillary-js/dist/mapillary-js.min.js"></script>
    <script>
      // Our JavaScript lands here
    </script>
  </body>
</html>

mapillary-js requires a HTML element to initialize into, in our case it's a div with id mly. Next step is to initialize the viewer.

Since we'll be using Mapillary API, it's a requirement to obtain an API key. One can get it after signing up to Mapillary, and then going to Settings/Integrations and registering a new application (we don't need to select any scope permissions, since we only want read access to the data). We are interested in the Client ID's value.
The viewer has to start somewhere, so we need to find a photoId that interests us. Each photo in on mapillary.com has a photo ID assigned to it. You can either copy the part from the url after /im/ or select Photo details and copy the photoId from there. In our case, a photoId to this beautiful photo will do: Xo3DR9FUdP3nh0jHZhgeig.

Since we've gathered all the required data, in our <script>..</script> tag we need to initialize the viewer. We do so by constructing an new Mapillary.Viewer and setting required parameters.

var mly = new Mapillary
  .Viewer('mly', // container id
          'cjJ1SUtVOEMtdy11b21JM0tyYTZIQTo2ZmVjNTQ3YWQ0OWI2Yjgx', // your Client ID
          {
            key: 'Xo3DR9FUdP3nh0jHZhgeig',  // photoId at which the viewer initializes
            uis: ['simple', 'simplenav'] // UIs upon which the viewer will depend on
          })

Changelog

Every release is described on the GitHub Releases page.

License

MIT License