Overview

You will learn: how to build a simple app that displays a 2D map or 3D scene.

You can build mapping applications that can display geographic data in 2D or 3D. The first step is to create a Map that contains a basemap. You can use a basemap that is hosted in ArcGIS Online or you can use your own basemap with custom styles. If you want to add data to your map, you can add points, lines, polygons, and text as graphics, or for larger datasets, you can add data using feature layers. Once a Map is defined, it can be diplayed in 2D with the MapView or in 3D with the SceneView. The views are responsible for displaying the map, handling user interactions, and setting the position of the map. Learn more about working with the view in the documentation.

In this tutorial, you will create a 2D map or 3D scene that displays a topographic basemap and centers on the Santa Monica Mountains in California.

Click the tabs below to see the different views.

Steps

Create an HTML page

  1. Go to CodePen and create a new pen.

  2. Add the main HTML content to the pen.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
        <style>
          html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
          }
        </style>
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>
    

Add references to the CSS and API

  1. In the <head>, add the references.

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

Create a 2D map or a 3D scene

  1. Decide if you would like to create 2D map or a 3D scene.

  2. In the <head>, add a <script> tag and an AMD require statement to load the Map and MapView or SceneView modules. Create a new Map and set the basemap property to topo-vector. If you are creating a 3D scene, set the ground property to world-elevation so show elevation changes. Lastly, create the appropriate view by following one of these steps:

    • 2D map: Create a MapView and set the container property to viewDiv. Set the center to -118.71511,34.09042 and the zoom property to 11.

      or

    • 3D scene: Create a SceneView and set the container property to viewDiv. Set the SceneView position by creating a camera and setting the x, y, z coordinates to -118.71511, 34.09042, 2000 and the tilt to 65. Learn more about the camera settings in the documentation.

      <script>
      require([
          "esri/Map",
          "esri/views/MapView"
        ], function(Map, MapView) {
    
        var map = new Map({
          basemap: "topo-vector"
        });
    
        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-118.71511, 34.09042], // longitude, latitude
          zoom: 11
        });
      });
      </script>
    
      <script>
      require([
          "esri/Map",
          "esri/views/SceneView"
        ], function(Map, SceneView) {
    
        var map = new Map({
          basemap: "topo-vector",
          ground: "world-elevation"  // show elevation
        });
    
        var view = new SceneView({
          container: "viewDiv",
          map: map,
          camera: {
            position: {  // observation point
              x: -118.71,
              y: 33.75,
              z: 25000 // altitude in meters
            },
            tilt: 65  // perspective in degrees
          }
        });
      });
      </script>
    
  3. Run your code to view the map.

Congratulations, you're done!

The 2D map should look like this and the 3D scene should like this.

Challenge

Explore basemaps

ArcGIS Online hosts a wide variety of basemaps that you can use in your applications. Many of these can be referenced directly with a string constant. Try setting the basemap property to light-gray-vector, dark-gray-vector, satellite, streets-relief-vector, and streets-navigation-vector.

For example:

var map = new Map({
  basemap: "streets-navigation-vector"
});

Learn how to create and use your own custom basemaps in the Style a vector basemap and Display a styled vector basemap tutorials.