Skip to main content

Examples

Support#

ExampleDescription
Check SupportVerify that the browser supports MapillaryJS

Viewer#

Core Functionality#

ExampleDescription
InitializationInitialize the viewer in different ways and check if it is navigable
OptionsConfigure appearance and behavior through viewer and component options
MethodsConfigure appearance and behavior with methods after initial load
EventsAdd event listeners and handle viewer events
FilteringApply filters to decide what images are shown and can be navigated to
ViewpointControl the viewer's point and field of view

Map Synchronization#

ExampleDescription
Viewer to MapUpdate a Mapbox map from viewer position and field of view
Map to ViewerNavigate the viewer based on Mapbox map interaction

Component#

Input#

ExampleDescription
PointerActivate and deactivate pan and zoom pointer handlers
KeyboardActivate and deactivate play, navigation, and zoom keyboard handlers

Spatial#

ExampleDescription
Point CloudVisualize point clouds, undistorted camera frames, and use earth controls

Tag#

ExampleDescription
DisplayDisplay and configure point, polygon and rectangle image tags
CreateCreate spot, outline, and extreme point tags from user input
InteractListen to tag events and use the tag component methods

Popup#

ExampleDescription
DisplayDisplay regular, floating and custom, fixed HTML popups
Connect TagsConnect popups to point and rectangle tags

Marker#

ExampleDescription
DisplayDisplay markers with different appearance and behavior
Map SynchronizationCreate and edit markers in the viewer and a Mapbox map and keep them synchronized
MillionAdd one million interactive markers to the spatial index without affecting performance

Extension#

ExampleMapillaryJS APIDescription
Procedural ProviderData ProviderServe procedurally generated data
WebGL RendererRenderUse WebGL to render a cube
Three.js RendererRenderUse Three.js to render a cube
AnimationRenderMake a rotating cube animation
Graphics DeveloperRenderApply transforms to align your Three.js objects to the coordinate system of MapillaryJS
EditorRenderUse transform controls to translate, rotate, and scale a box
Map SynchronizationRenderTranslate and rotate a cube in a Mapbox map and reflect the changes in the viewer
Fly ControlsCamera ControlAttach fly controls leveraging Three.js