Display a map (UI)

Learn how to set a basemap, elevation source, and add data layers, as well as display a specific area using the Modes Panel UI.

In this tutorial, you will create a local scene in Unreal Engine that contains a basemap layer service and data layers.

Prerequisites

Steps

Create a new level and open the Modes Panel UI

1. Click on File on the Menu Bar and select New Level.

2. Select Empty Level in the popup window.

   

3. Navigate to Window > World Settings in the menu bar. This will open the World Settings panel.

   

4. In the World Settings panel, go to the World group and open Advanced settings. Check the Enable Large Worlds option.

   

5. Click the the Select Mode drop-down in the Unreal UI toolbar and select ArcGIS Maps SDK.

   

6. The Modes Panel UI opens on the left side of the Unreal Editor Interface.

   

Create a map

1. In the Modes Panel UI, click the Map tab.

2. Select Local for the Map Type.

3. In the Origin Position section you can set up the center of your GIS scene with its coordinates and a spatial reference Well-Known ID (WKID). For the tutorial, set the parameters to these values:

   • Longitude: -74
   • Latitude: 41
   • Altitude: 0
   • Spatial Reference WKID: 4326

   For information regarding the spatial reference, see the spatial references page.

4. Check the Enable Extent check box to display the Map Extent section

5. In Map Extent, set the extent of the map to these values:

   • Longitude: -74.0
   • Latitude: 40.72
   • Spatial Reference WKID: 4326
   • Extent Shape: Circle
   • Radius: 5000

   This is the result of the Map tab.

   

6. Click on the Create button. In the Outliner panel, ArcGISMapActor is created.

   

Create and set up a camera

ArcGIS Maps SDK for Unreal Engine will show higher resolution LODs for areas closer to the camera and lower resolution LODs for the areas that are further away from the camera.

1. Click on the Camera tab.

2. The Camera Position defines the initial point of view of the camera. Set the parameters to these values:

   • Longitude: -74.054921
   • Latitude: 40.691242
   • Altitude: 3000
   • Spatial Reference WKID: 4326

3. The Camera Rotation defines the angle of the camera.

   • Heading: 55
   • Pitch: 58
   • Roll: 0

   This is the result of the Camera tab.

   

4. Click on the Create button. In the Outliner panel, Default Pawn Actor is created.

   

The level will still be empty at this point. In the coming tutorial steps, map data will be added to the level.

Set basemap and API key

In this tutorial, you will select a basemap that requires an API key.

1. Click the Basemap tab and display the panel content.

2. Select the Imagery basemap from the preset basemap list.

   This is the result of setting up the basemap to Imagery from the preset basemap.

   

3. Go to your developer dashboard to get your API key.

4. Click the Auth tab to display the panel content.

5. Set the API key in the API Key section.

   Make sure your API key is in the field where you see Paste your API key here in this screenshot. You can find the information about how to get API keys by clicking on Get an API Key in the UI.

   

6. After switching back to the Basemap tab, the previously grayed-out basemap icons should now be enabled, indicating that the API key is successfully registered.

   

Another way to set up a global API key for multiple levels in your Unreal project is through Project Settings. For more information about the API key, refer to the API keys section.

Set elevation

In this tutorial, you will use the default elevation to define the terrain.

1. Click the Elevation tab and display the panel content.

2. Make sure Terrain 3D is selected and the Enable All checkbox is checked.

This is the result of the elevation panel.

Add data layers

You will add operational data from ArcGIS Online.

• ArcGIS Online item: UrbanObservatory_NYC_TransitFrequency
  • Layer name: 01 - New York Transit Frequency
  • Type: ArcGIS Image Layer
  • Online service URL (source):
  Use dark colors for code blocksCopy

  1
  https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/UrbanObservatory_NYC_TransitFrequency/MapServer
  • Opacity: 0.9
• ArcGIS Online item: New_York_Industrial
  • Layer name: 02 - New York Industrial Areas
  • Type: ArcGIS Image Layer
  • Online service URL (source):
  Use dark colors for code blocksCopy

  1
  https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Industrial/MapServer
  • Opacity: 0.6
• ArcGIS Online item: NewYorkCity_PopDensity
  • Layer name: 03 - New York Population Density
  • Type: ArcGIS Image Layer
  • Online service URL (source):
  Use dark colors for code blocksCopy

  1
  https://tiles.arcgis.com/tiles/4yjifSiIG17X0gW4/arcgis/rest/services/NewYorkCity_PopDensity/MapServer
  • Opacity: 1.0
• ArcGIS Online item: New York, USA Buildings
  • Layer name: 04 - New York Buildings
  • Type: ArcGIS 3D Object Scene Layer
  • Online service URL (source):
  Use dark colors for code blocksCopy

  1
  https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Buildings_NewYork_17/SceneServer
  • Opacity: 1.0

Follow these steps to add each layer.

1. Click the Layers tab.

2. In the Add Data section, select the appropriate layer type from the drop-down list in Type.

3. Enter the layer's online service URL in the Source field to add an image tile layer.

4. Type the layer name in the Name field.

5. Click the Add button to add a layer to your map. Once the layer is added, it will appear in the Layers section.

6. Set the Opacity by dragging the slider to a specific value.

7. Use the Is Visible checkbox to toggle the layer visibility.

This is the result of the Layers panel.

Set up sky and lighting

1. From the quick add menu on the toolbar, select Lights > Directional Light and drag it into the level to create a Directional Light. For more information about Directional Lights, see Lights.

   

2. Select the Directional Light in the Outliner, and open the Transform section in the Details panel.

3. Reset the Location and Set the Rotation to:

   • X: 0
   • Y: -28
   • Z: -28

4. Set the Mobility to Movable.

   

5. In the Light section, change the Intensity Value to 3.1416.

6. In the Cascaded Shadow Maps section, change the Dynamic Shadow Distance MovableLight to 2000000.

7. In the Atmosphere and Cloud section, enable Atmosphere Sun Light.

8. In the Actor > Spawn Collision Handling Method section, select Always Spawn, Ignore Collisions.

   

9. From the quick add menu on the toolbar, select Lights > Sky Light and drag it into the level to create a Sky Light. For more information about Sky Light, see Lights.

10. In the Transform section, reset the Location and set the Mobility to Movable.

11. In the Light section, enable Real Time Capture.

    

12. From the quick add menu on the toolbar, select Visual Effects > Sky Atmosphere and drag it into the level to create a Sky. For more information about Sky Atmosphere, see Fog Effects.

13. In the Planet section, change the Ground Radius to 6378.137207.

At this point, you should see the cropped map data with the extent configuration. In the Outliner panel, double-click the Default Pawn to move the Editor camera to the configured camera position. Use the WASD keys while holding the right mouse button mouse to move around, or hold the left mouse button to look around during the Editor mode. To increase the camera navigation speed in the Viewport during the Editor mode, click the Camera Speed icon in the top right-hand corner of the Viewport and increase the value by dragging the slider.

Replace the Default Pawn with the ArcGIS Pawn

In the Editor mode, you can freely navigate the scene using the standard viewport controls in Unreal Engine. In order to navigate the scene in the Play mode, you can write your own controller Component for the Pawn or by modifying the movement component in the Default Pawn. In addition, you can replace the Default Pawn with the sample ArcGIS Pawn that is used in the sample levels. For information about the sample ArcGIS Pawn, see the ArcGIS Pawn section.

1. Open the location below in the Content Drawer.

   Plugins > ArcGIS Maps SDK for Unreal Engine C++ Classes > ArcGISSamples > Public

2. Click the ArcGIS Pawn to select it. When it is selected the background color changes to blue.

3. Right click the Default Pawn in the Outliner panel.

4. Click Replace Selected Actor with, then select ArcGIS Pawn.

You have successfully configured the local scene with the Modes Panel UI.

Click the Play icon on the Toolbar, and use the WASD keys to move around, hold the right mouse button mouse to look around or hold the left mouse button to pan.