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.

Local scene UI

Prerequisites

Before starting this tutorial, you should:

  1. Have an ArcGIS Developer account or ArcGIS Online account and an API key to access ArcGIS services. If you don't have an account, sign up for free.

  2. Ensure your development environment meets the system requirements.

  3. Follow install and setup steps and install the plugin.

  4. Review the scene setting options page.

If you are not familiar with the Unreal Engine's interface, see Unreal Editor Interface for information about the most common editor panels, and how to make full use of them.

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.

    New Level

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

    Open World Wettings

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

    Enable Large Worlds

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

    Select Mode

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

    Open the Modes Panel UI

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.

    Map tab result

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

    ArcGIS Map Actor

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.

    Camera tab result

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

    Default Pawn

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

Level Preview

Set basemap and API key

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

  1. Click on 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.

    Set basemap

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

  4. Click on 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.

    Set the API key

  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.

    Set the API key

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 on the Elevation tab and display the panel content.

  2. Make sure Default Elevation is selected.

This is the result of the elevation panel.

Set elevation

At this point, you should be able to see map data displaying partially at the level.

Level Preview

Double-click the Default Pawn in the Outliner Window to switch the level view to the configured camera position.

Level Preview

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 on 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 on 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.

Add data

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.

    Directional Light

  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.

    Directional Light Transform

  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.

    Directional Light Actor

  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.

    SkyLight

  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 on the Camera Speed icon in the top right-hand corner of the Viewport and increase the value by dragging the slider.

Level Preview

Replace the Default Pawn with the ArcGIS Pawn

In the Editor mode, you can freely navigate the scene using the standard viewpoint 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 on 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 on 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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.