Overview

You will learn: how to create a simple starter app that displays a basemap.

With the ArcGIS API for JavaScript it's easy to create a simple starter app that displays a basemap. You can choose from a wide variety of vector and tile ArcGIS Online basemaps to build different types of applications. Most of the basemaps can be referenced with just a string such as satellite, streets-vector, streets-navigation-vector, and topo-vector. In order to set the location of the map, you can set the map view to a certain location on earth by specifying the latitude, longitude and zoom level.

In this tutorial you will use the ArcGIS API for JavaScript to build a simple mapping app that displays a topo-vector basemap and zooms to 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 map and view

  1. In the <head>, add a <script> tag and an AMD require statement to load the Map and MapView modules. Create a new Map and set the basemap property to topo-vector. Create a MapView and set its container property to viewDiv, its map property to map. Lastly, set the view center property to the Santa Monica Mountains using x/y coordinates (-118.71511,34.09042) and the zoom property to 11.

        <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],
              zoom: 11
            });
          });
        </script>
    
  2. Run your code to view the map.

Congratulations, you're done!

Your map app should look something 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.

Create a 3D starter app

To create a 3D app, replace the MapView with the SceneView module and then run the app again. You can also set the camera properties to give it a true 3D aerial perspective.

Learn more about how to work with the SceneView in the API Reference.

<script>
  require([
      "esri/Map",
      //*** ADD ***//
      //"esri/views/MapView",
      "esri/views/SceneView"
    ], function(Map, SceneView) {

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

    //*** ADD ***//
    //var view = new MapView({
    var view = new SceneView({
      container: "viewDiv",
      map: map,
      //*** ADD ***//
      //center: [-118.71511,34.09042],
      //zoom: 15,
      camera: {
        tilt: 65,
        position: {
          x: -118.71,
          y: 33.75,
          z: 25000 // meters
        }
      }
    });
  });
</script>