Overview

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

You can build a simple 2D or 3D mapping application by using the Map and View classes. The Map is a container for all of the layers you would like to display including the basemap. You can choose from a number of vector and raster basemaps hosted on ArcGIS Online or you can use your own styled basemap. The View is responsible for drawing all of the layers in the Map. You can choose to render the view in 2D with the MapView class or in 3D with the SceneView class. You can use the View to position the map by setting properties such as center, zoom, and for 3D scenes, the camera. 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.

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 from the ArcGIS JS API 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 with the Style a vector basemap and Display a styled vector basemap tutorial.

Content