MapillaryJS
MapillaryJS is a JavaScript & WebGL library that renders street level imagery from Mapillary.
Using MapillaryJS
To use MapillaryJS you must create an account and obtain a Client ID by registering an application. Then you can use MapillaryJS with a <script> tag.
<!DOCTYPE html>
<html>
<head>
<script src='https://unpkg.com/mapillary-js@2.21.0/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/mapillary-js@2.21.0/dist/mapillary.min.css' rel='stylesheet' />
</head>
<body>
<div id='mly' style='width: 640px; height: 480px;'></div>
<script>
var mly = new Mapillary.Viewer(
'mly',
'<your client id>',
'<your image key for initializing the viewer>'
);
</script>
</body>
</html>
Alternatively, you can npm install mapillary-js to use it with a module loader or bundler of your choice.
Refer to the Examples and Documentation sections below for more information.
Examples
Support
Viewer
- Fixed size
- Dynamic size
- Load immediately
- No cover
- Initialize with or without a key
- Determine if viewer is navigable
- Move to key
- Move in direction
- Move close to latitude and longitude
- Viewer options
- Subscribe to node changed
- Edges changed events
- Set filter
- Change filters
- Get center and zoom
- Set center and zoom
- LatLon, computedLatLon and originalLatLon explained
- Get bearing
- Side by side compare
Viewer and map
- MapillaryJS + ESRI JS API
- MapillaryJS + Google Maps
- MapillaryJS + HERE Maps
- MapillaryJS + Leaflet
- MapillaryJS + Leaflet ESRI
- MapillaryJS + Leaflet Tangram
- MapillaryJS + Mapbox GL JS
- MapillaryJS + OpenLayers
Components
Marker
- Configure marker style and behavior
- Add and drag markers
- Indicate hovered marker
- Sync viewer and map markers
- Add one million interactive markers
Mouse
Keyboard
Popup
Route
Slider
Tag
- Show point, polygon and rect tags
- Configure point, polygon and rect tags
- Create tags
- Listen to geometry changes
- Indicate hovered tag
Documentation
Migrating
Learn how to migrate between major MapillaryJS releases.
Contribute to MapillaryJS
Learn how to contribute.
Code of Conduct
Facebook has adopted the Contributor Covenant as its Code of Conduct, and we expect project participants to adhere to it. Please read the full text so that you can understand what actions will and will not be tolerated.
License
MapillaryJS is MIT licensed.