website·Indexed 30 days ago
https://mapillary.github.io/mapillary-js/A JavaScript library for rendering and interacting with street-level imagery. The documentation covers core concepts, API references for the Viewer and components, extension guides for WebGL and Three.js custom renderers, and migration guides for versions v2.x, v3.x, and v4.x.
ViewerMouseEvent interface is used for mouse-related viewer events (such as click, dblclick, mousemove, etc.). It extends ViewerEvent and provides spatial data about where the event occurred, including geographic coordinates, pixel positions, and image-relative coordinates.// Set up an event listener on the viewer
viewer.on('click', function(e) {
// e is a ViewerMouseEvent
console.log('A click event has occurred at ' + e.lngLat);
});IDataProvider interface is a specification for implementers to model data provider behavior. It extends EventEmitter and is typically implemented by classes that extend DataProviderBase. It provides a standardized way to fetch image buffers, tiles, and cluster data.bearing event is fired when the viewing direction changes. The event object contains a bearing property. For more detailed camera pose data, use viewer.getPointOfView() to access the PointOfView object, which includes bearing and tilt properties.const viewer = new Viewer({accessToken, container});
// Listen to bearing changes directly via event property
viewer.on('bearing', (event) => {
console.log(`'${event.type}' - bearing: ${event.bearing}`);
});
// Listen to POV changes and use getPointOfView()
viewer.on('pov', async () => {
const pov = await viewer.getPointOfView();
console.log(`Bearing: ${pov.bearing}, Tilt: ${pov.tilt}`);
});BearingComponent is a UI component used to display the current bearing and field of view. It can be retrieved from the Viewer instance using the component name bearing.var viewer = new Viewer({ ... });
var bearingComponent = viewer.getComponent("bearing");
bearingComponent.configure({ size: ComponentSize.Small });ComponentHoverEvent interface is used to handle hover events within mapillary-js components. It extends the ComponentEvent interface and provides specific details about the element or object being hovered over in an image.component.Tag is an abstract class that extends EventEmitter. It serves as the base class for specific tag implementations, including ExtremePointTag, OutlineTag, and SpotTag.TouchZoomHandler allows users to zoom the viewer image by pinching on a touchscreen. It is typically accessed via the pointer component of the viewer.var pointerComponent = viewer.getComponent("pointer");
// Access the touchZoom handler
pointerComponent.touchZoom.enable();
pointerComponent.touchZoom.disable();The KeySequenceNavigationHandler provides keyboard shortcuts to navigate through an image sequence. The supported key commands are:
ALT + Up Arrow: Navigate to the next image in the sequence.ALT + Down Arrow: Navigate to the previous image in the sequence.var keyboardComponent = viewer.getComponent("keyboard");
// Access the handler via keyboardComponent.keySequenceNavigationKeyZoomHandler allows users to zoom in and out of the viewer using the + (zoom in) and - (zoom out) keys. It is accessed via the keyboard component of the viewer.var keyboardComponent = viewer.getComponent("keyboard");
// Enable or disable the zoom handler
keyboardComponent.keyZoom.enable();
keyboardComponent.keyZoom.disable();
// Check if zooming is currently enabled
var isEnabled = keyboardComponent.keyZoom.isEnabled;DragPanHandler allows users to pan the viewer image by clicking and dragging the cursor. It is typically accessed via the pointer component of the viewer.var pointerComponent = viewer.getComponent("pointer");
// Access the dragPan handler
var dragPan = pointerComponent.dragPan;