Interact with the map

This page contains information on key features in Photorealistic 3D Maps in Maps JavaScript that allow you to create interactive and immersive 3D experiences. The following documentation covers:

• Handling user interface events for seamless interaction.
• Including exploration controls for navigating 3D spaces.
• Utilizing preset camera paths for guided tours.
• Applying camera restrictions to maintain focus on a specific area.

User Interface Events

This section outlines the interactive events and state change notifications you can listen for and handle programmatically when working with 3D maps. JavaScript within the browser is event-driven, meaning it responds to user interactions by generating events that your program can listen to and execute code accordingly.

There are two main types of events:

• User interaction events (such as mouse clicks) are propagated from the 3D map viewport to your code. These events allow you to respond to direct user actions within the 3D map environment. View sample.
• State change notifications reflect updates to the underlying 3D map data models and rendering state, using a conventional property_changed naming scheme.

Each 3D mapping API object exposes a set of named events that your program can register event listeners for and execute logic when those events occur using the built-in addEventListener() function. The following example illustrates common events triggered as a user interacts with a 3D map.

The following example shows which events are triggered as a user interacts with the map:

Exploration controls

The maps displayed in the Photorealistic 3D Maps in Maps JavaScript API contain UI elements that support user interaction with the map. These elements are known as user controls. Exploration controls are included by default, but you can choose to suppress them in your application.

The following image shows the default controls displayed by the Photorealistic 3D Maps in Maps JavaScript:

Below is a list of the full set of controls in the Photorealistic 3D Maps in Maps JavaScript:

• The Zoom control displays "+" and "-" buttons for changing the zoom level of the map.
• The Tilt control lets you change the camera's tilt.
• The Rotate control lets you change the camera's heading.
• The Move control displays "←", "→", "↑", and "↓" buttons for changing the center of the map.

Camera controls & animation

Preset camera paths

Photorealistic 3D Maps in Maps JavaScript provides two preset camera paths. The camera paths can be customized by changing the duration of the animation (thereby increasing or decreasing speed), or by combining them to create more cinematic experiences.

Photorealistic 3D Maps in Maps JavaScript supports the following camera paths:

• FlyCameraTo animation flies from the map center to a specified destination.
• FlyCameraAround animation rotates around a point on the map however many times you specify.

The two available paths may be combined to fly to a point of interest, rotate around it, and then stop when desired.

Try sample

Camera restrictions

It may be desirable for you to control the camera's pan, maximum altitude, or to create lat/lng bounds restricting a user's movement in a given map. You can do this using camera restrictions.

For a example of how camera restrictions work and are implemented, take a look at the demo.