Embed a Mapillary View

As Mapillary is starting to grow in popularity, we got a number of requests to be able to embed the Mapillary view into other web pages. So, we built it! This is how it goes - for details, see the developer page:

  • import the Mapillary Javascript lib
  • have a <div id='mapillary'>l tag somewhere on your site where you want the widget
  • initialize the Mapillary Javascript after the site is loaded fully.

The code is quite simple:

    <!-- pull in the script -->
    <script src="//dga406zepc8gy.cloudfront.net/javascripts/mapillary.js" type="text/javascript"></script>

    <!-- This is where the widget will appear-->
    <div id='mapillary'></div>

    <!-- Initialize the Widget with a start image and a width-->
    <script>
      (function() {
        Mapillary.init('mapillary', {image: 'RdGqCZOGpRTzFII4i7swYg', width: 320});
      })();
    </script>

With this, you can now start at any image you find on Mapillary. Of course, we want to add more things to it, like the ability to give a longitude/latitude to start with, but it's a start. Please let us know how you like it. As always, comment below, and report issues.

Looking forward to seeing Mapillary on a website near you!

Tags for this post:
comments powered by Disqus