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. Then you can use MapillaryJS with a <script> tag.
<!DOCTYPE html>
<html>
<head>
<script src='https://unpkg.com/[email protected]/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/[email protected]/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
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
Changelog
Every release is described on the GitHub Releases page.
License
MIT License
Contributing to MapillaryJS
See CONTRIBUTING.md.
Migrating from MapillaryJS 1 to 2
See MIGRATING.md.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent