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 a string such as streets, satellite, streets-vector, and streets-navigation-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 lab 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 DevLabs: 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 JavaScript

  1. In the <head>, add references to the ArcGIS CSS and JavaScript API.

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

Create a map and view

  1. In the <head>, add a <script> tag and a 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, and center the view on the Santa Monica Mountains (-118.71511,34.09042). Set the zoom property to 10.

    <script>
      require([
          "esri/Map",
          "esri/views/MapView",
          "dojo/domReady!"
        ], function(Map, MapView) {
    
        var map = new Map({
          basemap: "topo-vector"
        });
    
        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-118.71511,34.09042],
          zoom: 10
        });
      });
    </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 with string constants. Try setting the basemap property to light-gray-vector, dark-gray-vector, satellite, streets-relief-vector, and streets-navigation-vector.

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

Create a 3D starter app

An easy way to create a 3D app is to just replace the MapView with the SceneView module and run the app again. Try setting up the camera to create an arial perspective.

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

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

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