Examples
Support#
| Example | Description |
|---|---|
| Check Support | Verify that the browser supports MapillaryJS |
Viewer#
Core Functionality#
| Example | Description |
|---|---|
| Initialization | Initialize the viewer in different ways and check if it is navigable |
| Options | Configure appearance and behavior through viewer and component options |
| Methods | Configure appearance and behavior with methods after initial load |
| Events | Add event listeners and handle viewer events |
| Filtering | Apply filters to decide what images are shown and can be navigated to |
| Viewpoint | Control the viewer's point and field of view |
Map Synchronization#
| Example | Description |
|---|---|
| Viewer to Map | Update a Mapbox map from viewer position and field of view |
| Map to Viewer | Navigate the viewer based on Mapbox map interaction |
Component#
Input#
| Example | Description |
|---|---|
| Pointer | Activate and deactivate pan and zoom pointer handlers |
| Keyboard | Activate and deactivate play, navigation, and zoom keyboard handlers |
Spatial#
| Example | Description |
|---|---|
| Point Cloud | Visualize point clouds, undistorted camera frames, and use earth controls |
Tag#
| Example | Description |
|---|---|
| Display | Display and configure point, polygon and rectangle image tags |
| Create | Create spot, outline, and extreme point tags from user input |
| Interact | Listen to tag events and use the tag component methods |
Popup#
| Example | Description |
|---|---|
| Display | Display regular, floating and custom, fixed HTML popups |
| Connect Tags | Connect popups to point and rectangle tags |
Marker#
| Example | Description |
|---|---|
| Display | Display markers with different appearance and behavior |
| Map Synchronization | Create and edit markers in the viewer and a Mapbox map and keep them synchronized |
| Million | Add one million interactive markers to the spatial index without affecting performance |
Extension#
| Example | MapillaryJS API | Description |
|---|---|---|
| Procedural Provider | Data Provider | Serve procedurally generated data |
| WebGL Renderer | Render | Use WebGL to render a cube |
| Three.js Renderer | Render | Use Three.js to render a cube |
| Animation | Render | Make a rotating cube animation |
| Graphics Developer | Render | Apply transforms to align your Three.js objects to the coordinate system of MapillaryJS |
| Editor | Render | Use transform controls to translate, rotate, and scale a box |
| Map Synchronization | Render | Translate and rotate a cube in a Mapbox map and reflect the changes in the viewer |
| Fly Controls | Camera Control | Attach fly controls leveraging Three.js |