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

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

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

:::

function render(props) {
  let viewer;
  function dispose() {
    if (viewer) {
      viewer.remove();
    }
  }
  const style = {height: '400px'};
  const imageId = '340458257702273';

  // Create bearing checkbox
  const checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  checkbox.style.pointerEvents = 'none';
  checkbox.checked = true;
  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 bearing checkbox clicks
  space.addEventListener('click', () => {
    checkbox.dispatchEvent(new MouseEvent('click', {bubbles: false}));
  });
  checkbox.addEventListener('change', (event) => {
    if (event.target.checked) {
      viewer.activateComponent('bearing');
    } else {
      viewer.deactivateComponent('bearing');
    }
  });

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

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

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.

function render(props) {
  let viewer;
  function dispose() {
    if (viewer) {
      viewer.remove();
    }
  }
  const style = {height: '400px'};
  const imageId = '4165984473444513';

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

    const pointerComponent = viewer.getComponent('pointer');
    pointerComponent.configure({
      dragPan: true,
      scrollZoom: false,
      touchZoom: false,
    });
  }

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

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.

:::

function render(props) {
  let viewer;
  function dispose() {
    if (viewer) {
      viewer.remove();
    }
  }
  const style = {height: '400px'};
  const imageId = '300943088210479';

  function init(opts) {
    const {accessToken, container} = opts;
    const viewerOptions = {
      accessToken,
      component: {popup: true},
      container,
    };
    viewer = new Viewer(viewerOptions);
    viewer.moveTo(imageId).catch(mapillaryErrorHandler);

    const popupComponent = viewer.getComponent('popup');

    // Parking sign
    const signText = document.createElement('span');
    signText.style.color = '#000';
    signText.textContent = 'parking sign';
    const sign = new Popup({offset: 10});

    sign.setDOMContent(signText);
    sign.setBasicPoint([0.546, 0.507]);

    viewer.on('image', (event) => {
      if (event.image.id === imageId) {
        popupComponent.add([sign]);
      } else {
        popupComponent.removeAll();
      }
    });
  }

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

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.

:::