User Interactions

Camera manipulation

Please note that this behavior has changed since version 5.2.0. Make sure to read the documentation for the version you are using.

By default the User can interact with the map by moving the camera:

• Using the mouse:
  • Left click: pan
  • Right click: rotate
  • Mousewheel: zoom
• Using the touch:
  • one finger: pan
  • two fingers:
    • pinch / spread: zoom
    • rotate: rotate around z axis (ground to sky); affect Azimuth angle
    • drag vertically: change camera altitude; affect Polar angle

Note: in order to prevent touch flickering, when starting drag vertically we disable rotate & zoom (like Google Map does).

Events

Click / Double click

The MouseManager dispatch both MOUSE_EVENTS.click and MOUSE_EVENTS.dblClick events.

You can register to them by doing:

adsumWebMap.mouseManager.addEventListener(
  MOUSE_EVENTS.click,
  ({type, intersects}) => {
    // Do something
  }
)

adsumWebMap.mouseManager.addEventListener(
  MOUSE_EVENTS.dblClick,
  ({type, intersects}) => {
    // Do something
  }
)

The intersects property is an Array representing all intersections with the 3D scene ordered by distance to them.

For example if you want to get the first object clicked you can do:

adsumWebMap.mouseManager.addEventListener(
  MOUSE_EVENTS.click,
  ({type, intersects}) => {
    const { object, distance } = intersects.length === 0 ? { object: null, distance: null } : intersects[0];
  }
)

Intersects retruns the full list, you are free to manage it as you want. For example you can ignore all click on a LabelObject and in that case take the next intersect.