MapillaryJS

MapillaryJS is a JavaScript & WebGL library that renders street level photos from Mapillary.

Using MapillaryJS

To use MapillaryJS you must create an account and then obtain a Client ID. Then you can use MapillaryJS with a <script> tag.

<!DOCTYPE html>
<html>
<head>
    <script src='https://npmcdn.com/mapillary-js@1.5.0/dist/mapillary-js.min.js'></script>
    <link href='https://npmcdn.com/mapillary-js@1.5.0/dist/mapillary-js.min.css' rel='stylesheet' />
</head>

<body>
    <div id='mly' style='width: 640px; height: 480px;' />

    <script>
        var mly = new Mapillary.Viewer(
            'mly',
            '<your client id>',
            '<your photo id for initializing the viewer>'
        );
    </script>
</body>
</html>

Alternatively, you can npm install mapillary-js to use it with module loader or bundler of your choice.

Refer to the Examples and Documentation sections below for more information.

Examples

Simple MapillaryJS embedding
Storytelling with MapillaryJS
Slider displaying difference in two photos
MapillaryJS + Leaflet - Panorama - Perspective photo
MapillaryJS + Leaflet + Tangram - Panorama - Perspective photo
MapillaryJS + Mapbox GL JS - Panorama - Perspective photo
MapillaryJS + Esri Leaflet - Panorama - Perspective photo
MapillaryJS + Google Maps - Panorama

Documentation

API Reference

Changelog

Every release is described on the GitHub Releases page.

License

MIT License

Contributing to MapillaryJS

See CONTRIBUTING.md.