Options
All
  • Public
  • Public/Protected
  • All
Menu

This map control provides basic map-related building blocks to interact with the map. It also provides a default way of handling user input. Currently we support basic mouse interaction and touch input interaction.

Mouse interaction:

  • Left mouse button + move = Panning the map.
  • Right mouse button + move = Orbits the camera around the focus point.
  • Middle mouse button + move = Rotating the view. Up down movement changes the pitch. Left/right movement changes the yaw.
  • Mouse wheel = Zooms up and down by one zoom level, zooms on target.

Touch interaction:

  • One finger = Panning the map.
  • Two fingers = Scale, rotate and panning the map.
  • Three fingers = Orbiting the map. Up down movements influences the current orbit altitude. Left/right changes the azimuth.

Hierarchy

Index

Constructors

constructor

Properties

Readonly camera

camera: Camera

Three.js camera that this controller affects.

Readonly domElement

domElement: HTMLCanvasElement

Map's HTML DOM element.

doubleTapTime

doubleTapTime: number = 0.3

Double click uses the OS delay through the double click event. Tapping is implemented locally here in MapControls with this duration setting the maximum delay to define a double tap. The value is in seconds. 300ms is picked as the default value as jQuery does.

enabled

enabled: boolean = true

Set to true to enable input handling through this map control, false to disable input handling. Even when disabling input handling, you can manually use the public functions to change the view to the current map.

inertiaEnabled

inertiaEnabled: boolean = true

Set to true to enable an inertia dampening on zooming and panning. false cancels inertia.

Readonly mapView

mapView: MapView

MapView this controller modifies.

maxZoomLevel

maxZoomLevel: number = 20

Determines the maximum zoom level we can zoom to.

minCameraHeight

minCameraHeight: number = 3

Determines the minimum camera height in meter.

minZoomLevel

minZoomLevel: number = 0

Determines the minimum zoom level we can zoom to.

northResetAnimationDuration

northResetAnimationDuration: number = 1.5

Duration of the animation to reset the camera to looking north, in seconds. Independent of inertia.

orbitingMouseDeltaFactor

orbitingMouseDeltaFactor: number = 0.1 * THREE.MathUtils.DEG2RAD

This factor will be applied to the delta of the current mouse pointer position and the last mouse pointer position: The result then will be used as an offset to orbit the camera. Default value is 0.1.

orbitingTouchDeltaFactor

orbitingTouchDeltaFactor: number = 0.1 * THREE.MathUtils.DEG2RAD

This factor will be applied to the delta of the current touch pointer position and the last touch pointer position: The result then will be used as an offset to orbit the camera. Default value is 0.1.

panEnabled

panEnabled: boolean = true

Set to true to enable panning through these controls, false otherwise.

panInertiaDampingDuration

panInertiaDampingDuration: number = 1

Inertia damping duration for the panning, in seconds.

rotateEnabled

rotateEnabled: boolean = true

Set to true to enable rotation through this map control, false to disable rotation.

rotationMouseDeltaFactor

rotationMouseDeltaFactor: number = 0.1

This factor will be applied to the delta of the current mouse pointer position and the last mouse pointer position: The result then will be used as an offset for the rotation then. Default value is 0.1.

tiltAngle

tiltAngle: number = Math.PI / 4

Camera tilt to the target when tilting from the toggleTilt public method.

tiltEnabled

tiltEnabled: boolean = true

Set to true to enable tilting through these controls, false otherwise.

tiltToggleDuration

tiltToggleDuration: number = 0.5

Duration in seconds of the camera animation when the tilt button is clicked. Independent of inertia.

zoomEnabled

zoomEnabled: boolean = true

Set to true to enable zooming through these controls, false otherwise.

zoomInertiaDampingDuration

zoomInertiaDampingDuration: number = 0.6

Inertia damping duration for the zoom, in seconds.

zoomLevelDeltaOnControl

zoomLevelDeltaOnControl: number = 1

Zoom level delta when using the UI controls.

zoomLevelDeltaOnDoubleClick

zoomLevelDeltaOnDoubleClick: number = 1

Zoom level delta to apply when double clicking or double tapping. 0 disables the feature.

Accessors

attitude

cameraHeight

  • get cameraHeight(): number
  • set cameraHeight(height: number): void

eventTypes

  • get eventTypes(): string[]

maxTiltAngle

  • get maxTiltAngle(): number
  • set maxTiltAngle(angle: number): void

tiltState

zoomLevelDeltaOnMouseWheel

  • get zoomLevelDeltaOnMouseWheel(): number
  • set zoomLevelDeltaOnMouseWheel(delta: number): void
  • Determines the zoom level delta for single mouse wheel movement. So after each mouse wheel movement the current zoom level will be added or subtracted by this value.

    The default values are:

    • 0.2 when inertiaEnabled is false - this means that every 5th mouse wheel movement you will cross a zoom level.
    • 0.8, otherwise.

    Returns number

  • Set the zoom level delta for a single mouse wheel movement.

    Note: To reverse the zoom direction, you can provide a negative value.

    Parameters

    • delta: number

    Returns void

zoomLevelTargeted

  • get zoomLevelTargeted(): number
  • Get the zoom level targeted by MapControls. Useful when inertia is on, to add incremented values to the target instead of getting the random zoomLevel value during the interpolation.

    Returns number

Methods

addEventListener

  • addEventListener(type: string, listener: (event: Event) => void): void

dispatchEvent

  • dispatchEvent(event: Event): void

dispose

  • dispose(): void

hasEventListener

  • hasEventListener(type: string, listener?: undefined | ((event: Event) => void)): boolean

listeners

  • listeners(type: string): Array<(event: Event) => void> | undefined

pointToNorth

  • pointToNorth(): void
  • Reset the camera to looking north, in an orbiting movement around the target point instead of changing the yaw (which would be the camera rotating on itself).

    Returns void

removeAllEventListeners

  • removeAllEventListeners(): void

removeEventListener

  • removeEventListener(type: string, listener?: any): void

setZoomLevel

  • setZoomLevel(zoomLevel: number, screenTarget?: { x: number; y: number } | Vector2): void
  • Zooms to the desired location by the provided value.

    Parameters

    • zoomLevel: number

      Zoom level.

    • Default value screenTarget: { x: number; y: number } | Vector2 = { x: 0, y: 0 }

      Zoom target on screen.

    Returns void

toggleTilt

  • toggleTilt(): void

zoomOnTargetPosition

  • zoomOnTargetPosition(targetPositionOnScreenXinNDC: number, targetPositionOnScreenYinNDC: number, zoomLevel: number): void
  • Zooms and moves the map in such a way that the given target position remains at the same position after the zoom.

    Parameters

    • targetPositionOnScreenXinNDC: number

      Target x position in NDC space.

    • targetPositionOnScreenYinNDC: number

      Target y position in NDC space.

    • zoomLevel: number

    Returns void

Static create

Generated using TypeDoc