Skip to main content

Controlling the Viewer

In the initialization guide we configured the Viewer with options at creation time. In this guide we will control the viewer's behavior and appearance after initialization through the Viewer's API methods.

You will learn
  • How to activate and deactivate the cover component
  • How to configure the Viewer after initialization
  • How to filter the street imagery map

Using the Cover#

The MapillaryJS cover is a special component that can be activated and deactivated at any time. When the cover is active, MapillaryJS, does not perform any operations at all. After initialization we use the Viewer.activateCover and Viewer.deactivateCover methods to show or hide the cover.

tip

Try tapping the cover activation checkbox to see how it affects the Viewer.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
note

In the live example we do not sync the checkbox when tapping the MapillaryJS cover image. Calling Viewer.deactivateCover when the cover is already deactivated has no effect.

Behavior and Appearance#

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Filtering#

Filters are used for specifying which images are part of the MapillaryJS navigation. We can specify filters to ensure that for example spherical images, images captured after a certain date, or images belonging to a specific sequence are the only ones shown. The filter is set through the Viewer.setFilter method and is applied globally. The filter can be cleared by setting it to an empty array.

tip

Try filtering on another camera type or key, and using another comparison operator.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
info

You can view more thorough code using the Viewer APIs in the Methods and Filtering examples. You can also see how to control the Viewer's point and field of view in the Viewpoint example.

Recap#

Now you know how to use the Viewer's APIs to:

  • Activate or deactivate the cover component
  • Change the behavior of MapillaryJS
  • Filter the images that are shown and are part of the navigation