Intro to SceneView - Create a 3D map

Explore in the sandboxView live

This tutorial will walk you through how to create a simple map in a 3D SceneView.

1. Reference the ArcGIS Maps SDK for JavaScript

First, set up a basic HTML document similar to the following example:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to SceneView - Create a 3D map</title>
  </head>
</html>

Inside the <head> tags, reference the using <script> and <link> tags:

1
2
<link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.31/"></script>

The <script> tag loads the from a CDN. When new versions of the API are released, update the version number to match the newly released version.

The <link> tag references the main.css style sheet which contains styles specific to Esri widgets and components.

2. Load the modules

Use a second <script> tag to load specific modules from the API. Load the following modules using the syntax in the snippet below:

  • esri/Map - loads code specific to creating a map
  • esri/views/SceneView - loads code that allows for viewing the map in 3D
1
2
3
4
5
<script>
  require([ "esri/Map", "esri/views/SceneView" ], (Map, SceneView) => {
    // Code to create the map and view will go here
  });
</script>

Putting JavaScript inside a script tag is useful when building simple pages or experimenting, but not suitable for larger applications. When building a larger application, all JavaScript should be in separate .js files.

The globalrequire() function is used to load the API's AMD modules. To learn more about the API's different modules visit the Overview Guide page.

3. Create the map

A new map is created using Map, which is a reference to the Map class that was loaded from the esri/Map module. You can specify map properties, such as basemap and ground, by passing an object to the Map constructor.

1
2
3
4
5
6
require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
  const map = new Map({
    basemap: "topo-3d",
    ground: "world-elevation"
  });
});

Additional 3D basemap options are: navigation-3d, navigation-dark-3d, osm-3d, gray-3d, dark-gray-3d, streets-3d and streets-dark-3d. Additional 2D basemap options are: topo-vector, satellite, hybrid, osm, gray-vector, dark-gray-vector, oceans, streets-vector, streets-night-vector. Use alternate basemaps by modifying the basemap option in the sandbox. Further basemaps can be found in basemap id. View the Map class for more details on additional map options.

The ground property of Map specifies the surface properties for the map. It is only relevant when adding the map to a 3D SceneView. The string 'world-elevation' specifies an instance of ground using the World Elevation Service.

4. Create a 3D view

Views reference nodes that serve as containers in HTML files, allowing users to view the map inside an HTML page. Create a new SceneView and set its properties by passing an object to its constructor:

1
2
3
4
5
6
7
8
9
10
require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
  const map = new Map({
    basemap: "topo-3d",
    ground: "world-elevation"
  });
  const view = new SceneView({
    container: "viewDiv", // Reference to the DOM node that will contain the view
    map: map // References the map object created in step 3
  });
});

In this snippet, we set the container property to the name of the DOM node that will hold the map, in this case we use the id attribute of the <div> element. The map property references the map object we created in the previous step. See the SceneView documentation for additional properties you may set on the view, including center and scale, which may be used to define the initial extent of the view.

There are two types of views available: MapView (used for viewing 2D maps) and SceneView (used for viewing 3D maps). Click here to learn more about creating maps with 2D views.

5. Define the page content

Now the JavaScript needed to create a map and a view is complete! The next step is to add the associated HTML for viewing the map. For this example, the HTML is very simple: add a <body> tag, which defines what is visible in the browser, and a single <div> element inside the body where the view will be created.

1
2
3
<body>
  <div id="viewDiv"></div>
</body>

The <div> has an id of "viewDiv" to match the id that is passed to the SceneView's container property in the constructor.

6. Style the page

Style the content of the page using <style> tags inside the <head>. To make the map fill the browser window, add the following CSS inside the page's <style>:

1
2
3
4
5
6
7
8
9
10
<style>
  html,
  body,
  #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

You've now built your first web application in 3D using the ! Your final HTML code should look like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to SceneView - Create a 3D map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.31/"></script>
    <script>
      require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
        const map = new Map({
          basemap: "topo-3d",
          ground: "world-elevation"
        });
        const view = new SceneView({
          container: "viewDiv", // Reference to the scene div created in step 5
          map: map, // Reference to the map object created before the scene
          camera: { // Sets the initial camera position
            position: {
              spatialReference: {
                latestWkid: 3857,
                wkid: 102100
              },
              x: -11262192.883555487,
              y: 2315246.351026253,
              z: 18161244.728082635
            },
            heading: 0,
            tilt: 0.49
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

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

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close