Working with Components
MapillaryJS comes with a specific set of interaction and visualization components. Each component exposes methods that you can use to programatically change their bahavior and they also fire events. You can also customize the behavior of each component at initialization time.
You will learn
- How to activate and deactivate components
- How to configure component behavior
- How to visualize data using component APIs
Activation and Deactivation#
You can activate and deactivate all MapillaryJS components at any time by passing the component names to the Viewer.activateComponent or Viewer.deactivateComponent methods.
tip
Try activating and deactivating another component by specifying its component name in the live editor.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Configuration#
In the Viewer initialization guide we learnt how to configure components at Viewer creation time. These configurations can be changed at any later point in time too. We can retrieve any component through the Viewer.getComponent method and call the Component.configure method with a configuration object specifying the properties we want to change.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Component API#
Some components also have their own component specific APIs. Let us take a look at the PopupComponent which can be used to add arbitrary HTML content to the Viewer anchored to basic image coordinates. We can create a Popup, define its appearance, add it when the user navigates to a specific image, and remove it when the user navigates away from the related image.
tip
Try setting the basic point of the sign to another value and see how it moves in the spherical panorama.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Recap#
Now you know how to use the Viewer and its components to:
- Activate or deactivate components after initialization
- Change the behavior of specific components
- Visualize spatial or semantic data and information using the component APIs
info
You can view the complete code showing the functionality and APIs of a number of components in the component examples section.