Create a starter app

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 inArcGIS Onlineor 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 displayed 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. You will use this tutorial as the starting point for most of the other JavaScript tutorials.

Click the tabs below to see the different views.

Steps

Create an HTML page

Go to CodePen and create a new pen.

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

In the <head>, add the references.
To change the color of the widgets, try accessing the other CSS themes. For example, you can load the dark theme with this reference: https://js.arcgis.com/4.14/esri/themes/dark/main.css.
Learn more about styling and themes in the styling documentation.
```
  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.14/"></script>
```

Create a 2D map or a 3D scene

Decide if you would like to create 2D map or a 3D scene.
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:

The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.
It's important to notice that the map and the view are separate. The map is the container for layers and the view is responsible for drawing the layers to the HTML element provided. This is usually a div element. You can pass in the element id or the element itself.
Learn more about working with maps, views, and containers in the guide.
- 2D map: Create a MapView and set the container property to viewDiv. Set the center to -118.80500,34.02700 and the zoom property to 13.
  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.80800, 33.96100, 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.80500, 34.02700], // longitude, latitude
      zoom: 13
    });
  });
  </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.80800,
          y: 33.96100,
          z: 25000 // altitude in meters
        },
        tilt: 65  // perspective in degrees
      }
    });
  });
  </script>
```
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 Onlinehosts 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.

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

JavaScript API 4.14 Guide

JavaScript API Guide