---
title: "3D Interface"
slug: "3d-interface"
updated: 2025-08-12T07:47:27Z
published: 2025-08-12T07:47:27Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metromap.com.au/llms.txt
> Use this file to discover all available pages before exploring further.

# 3D Interface

***
#### <span style="color:rgb(255,16,61)">Before you start</span><a name="top"></a>

Discover the key features of the MetroMap Browser 3D Interface, including the Overview, Menu, Navigation, and Toolbar tools — and learn how to make the most of them.

***
## <span style="color:rgb(255,16,61)">1. Overview</span><a name="ov"></a>
![3d-screen](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/3d-screen.PNG){height="" width="550"}

***
## <span style="color:rgb(255,16,61)">2. Menu</span><a name="menu"></a>

| Icons |  | Descriptions   |
| :---: | :---:  | :--- |
| [<img height="40" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/cities-btn.PNG">](#menu) | <span style="color:rgb(255,16,61)">**City** | Open/close the Cities panel by clicking the **Cities** button. |
| [<img height="40" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/screenshot-btn.PNG">](#menu) | <span style="color:rgb(255,16,61)">**Screenshot** | The **Screenshot tool** allows you to download a screenshot of the current view. |
|[<img height="40" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/back-btn.PNG">](#menu) | <span style="color:rgb(255,16,61)">**Back**  | Exit the **3D Viewer**. |

***    
## <span style="color:rgb(255,16,61)">3. Navigation</span><a name="navi"></a>
    

| Mouse | | Touch | |
| :---: | :--- | :---: | :--- |
| [<img height="" src="https://cesium.com/downloads/cesiumjs/releases/1.62/Build/Cesium/Widgets/Images/NavigationHelp/MouseLeft.svg">](#navi) | 	<span style="color:rgb(255,16,61)">**Pan view**</span><br>Left click + drag | [<img height="70" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/touch1.png">](#navi) | <span style="color:rgb(255,16,61)">**Pan view**</span><br>One finger drag |
| [<img height="" src="https://cesium.com/downloads/cesiumjs/releases/1.62/Build/Cesium/Widgets/Images/NavigationHelp/MouseRight.svg">](#navi) | <span style="color:rgb(255,16,61)">**Zoom view**</span><br>Right click + drag, or <br>Mouse wheel scroll | [<img height="60" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/touch2.png">](#navi) | <span style="color:rgb(255,16,61)">**Zoom view**</span><br>Two finger pinch | 
| [<img height="" src="https://cesium.com/downloads/cesiumjs/releases/1.62/Build/Cesium/Widgets/Images/NavigationHelp/MouseMiddle.svg">](#navi) | <span style="color:rgb(255,16,61)">**Rotate view**</span><br>Middle click + drag, or <br>CTRL + Left/Right click + drag | [<img height="70" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/touch3.png">](#navi) |  <span style="color:rgb(255,16,61)">**Tile view**</span><br>Two finger drag, same direction |
|  |  | [<img height="50" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/touch4.png">](#navi) | <span style="color:rgb(255,16,61)">**Rotate view**</span><br>Two finger drag, opposite direction |
    

***
## <span style="color:rgb(255,16,61)">4. Tool Bar</span><a name="tool"></a>
| Icons |  | Descriptions   |
| :---: | :---:  | :--- |
| [<img width="35" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/tools-btn.PNG">](#tool) | <span style="color:rgb(255,16,61)">**Measurement** | Click the **Measurement tools** button to open a list of measurement tools. |
| [<img height="35" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/search-btn.PNG">](#tool) | <span style="color:rgb(255,16,61)">**Search** | Hover over the **Search button** to expand the address bar, which allows you to search for a location. |
|[<img height="" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/home-btn.PNG">](#tool) | <span style="color:rgb(255,16,61)">**Home**  | Click the home button to reset the camera to its default position.|
| [<img height="" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/help-btn.PNG">](#tool) | <span style="color:rgb(255,16,61)">**Help** | Click for detailed instructions on how to use the tools. |
| [<img height="40" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/13.png">](#tool) |  <span style="color:rgb(255,16,61)">**Viewshed** | **Viewshed** allows you to see the geographical area that is visible from a location. |

***
### [<img width="50" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/tools-btn.PNG">](#tool)<span style="color:rgb(255,16,61)">Measurement</span><a name="mes"></a>
    

| Icons |   | Usages |
| :---: | :--- | :--- |
| [<img height="" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/1%282%29.png">](#mes) | <span style="color:rgb(255,16,61)">**Distance** | 1. Click on the point cloud or the globe to set the start point and end points.<br>2. To make a new measurement, click to clear the previous measurement |
| [<img height="" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/2%281%29.png">](#mes) | <span style="color:rgb(255,16,61)"> **Component Distance**| 1. Click on the point cloud or the globe to set the start point and end points<br>2. To make a new measurement, click to clear the previous measurement |
| [<img height="" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/3.png">](#mes) | <span style="color:rgb(255,16,61)">**Polyline Distance** | 1. Click to start drawing a polyline<br>2. Keep clicking to add more points<br>3. Double click to finish drawing |
| [<img height="" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/4.png">](#mes) | <span style="color:rgb(255,16,61)">**Horizontal distance** | 1. Click on the point cloud or the globe to set the start point<br>2. Move the mouse to drag the line<br>3. Press this shift key to clamp the direction of the line<br>4. Click again to set the end point<br>5. To make a new measurement, click to clear the previous measurement |
| [<img height="" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/5.png">](#mes) | <span style="color:rgb(255,16,61)">**Vertical distance** | 1. Click on the point cloud or the globe to set the start point<br>2. Move the mouse to drag the line<br>3. Click again to set the end point<br>4. To make a new measurement, click to clear the previous measurement |
| [<img height="" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/6%281%29.png">](#mes) | <span style="color:rgb(255,16,61)">**Height from terrain** | Click on the point cloud to get a distance from that point to terrain |
| [<img height="" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/7.png">](#mes) | <span style="color:rgb(255,16,61)">**Area** | 1. Click to start drawing a polygon<br>2. Keep clicking to add more points<br>3. Double click to finish drawing |
| [<img height="" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/8.png">](#mes) | <span style="color:rgb(255,16,61)">**Point coordinates** | Move the mouse to see the longitude, latitude and height of the point |
    
***
### <span style="color:rgb(255,16,61)">[<img height="30" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/13.png">](#tool) Viewshed</span><a name="vs"></a>
To add a viewshed, open the 3D viewer and click the viewshed button in the toolbar (located in the top-right corner of the interface).
![9\(1\)](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/9%281%29.PNG){height="" width="500"}
    
This will open a list of options for the viewshed. To add a viewshed object:

1. Click “Add”
![10](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/10.PNG){height="" width="500"}
2. Left-click on a location on the 3D tiles.
![11](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/11.PNG){height="" width="500"}

3. The **Options panel** will be populated with the coordinates of the viewshed center point (the point you selected by left clicking) and default values for radius, heading, pitch and roll.
    > You can change the values by typing into the input boxes. 
    > * Height and Radius are in meters.
    > * Heading, Pitch and Roll are in degrees.
![19](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/19.PNG){height="" width="500"}

4. Use [<img height="30" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/14.png">](#vs) to play/stop the animation. Switch to anti-clockwise by clicking   [<img height="30" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/15.png">](#vs) and clockwise by clicking [<img height="30" src="https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/16.png">](#vs).
5. Click the **delete** button to delete the **Viewshed**.

***
