mapillary-js/doc/docs/main/control.md

id	title
control	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.

:::info 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.

:::

function render(props) {
  let viewer;
  function dispose() {
    if (viewer) {
      viewer.remove();
    }
  }

  const style = {height: '400px'};
  const imageId = '205776974704285';

  // Create cover checkbox
  const checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  checkbox.style.pointerEvents = 'none';
  const space = document.createElement('div');
  space.classList.add('button-space');
  space.appendChild(checkbox);
  const toolbar = document.createElement('div');
  toolbar.classList.add('example-editor-toolbar');
  toolbar.style.zIndex = 100;
  toolbar.style.top = '16px';
  toolbar.style.left = '16px';
  toolbar.appendChild(space);

  // Listen to cover checkbox clicks
  space.addEventListener('click', () => {
    checkbox.dispatchEvent(new MouseEvent('click', {bubbles: false}));
  });
  checkbox.addEventListener('change', (event) => {
    if (event.target.checked) {
      viewer.activateCover();
    } else {
      viewer.deactivateCover();
    }
  });

  function init(opts) {
    const {accessToken, container} = opts;
    const options = {accessToken, container};
    viewer = new Viewer(options);
    viewer.moveTo(imageId).catch(mapillaryErrorHandler);
    container.appendChild(toolbar);
  }

  return (
    <div>
      <ViewerComponent init={init} dispose={dispose} style={style} />
    </div>
  );
}

:::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

function render(props) {
  let viewer;
  function dispose() {
    if (viewer) {
      viewer.remove();
    }
  }

  const style = {height: '400px'};
  const imageId = '821390568809272';

  function init(opts) {
    const {accessToken, container} = opts;
    const options = {accessToken, container};
    viewer = new Viewer(options);
    viewer.moveTo(imageId).catch(mapillaryErrorHandler);

    viewer.setTransitionMode(TransitionMode.Instantaneous);
    viewer.setRenderMode(RenderMode.Letterbox);
  }

  return (
    <div>
      <ViewerComponent init={init} dispose={dispose} style={style} />
    </div>
  );
}

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.

:::

function render(props) {
  let viewer;
  function dispose() {
    if (viewer) {
      viewer.remove();
    }
  }

  const style = {height: '400px'};
  const imageId = '821390568809272';

  function init(opts) {
    const {accessToken, container} = opts;
    const options = {accessToken, container};
    viewer = new Viewer(options);
    viewer.moveTo(imageId).catch(mapillaryErrorHandler);

    viewer.setFilter(['==', 'cameraType', 'fisheye']);
  }

  return (
    <div>
      <ViewerComponent init={init} dispose={dispose} style={style} />
    </div>
  );
}

:::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