Build your first application | Guide | ArcGIS API for JavaScript 3.26

Before you begin, if you are new to the ArcGIS API for JavaScript, please read our Setting up a Development Environment topic which covers prerequisites such as setting up a web server and using various IDEs and text editors.

This tutorial shows how to use modules from the ArcGIS API for JavaScript using Asynchronous Module Definition (AMD). For more information on AMD, refer to the following:

The main difference between AMD and legacy code is how modules are loaded (require() vs. dojo.require()) and how classes from modules are referenced (globals are used in legacy code while AMD style code uses local variables). For the nostalgic, the non-AMD version of this tutorial is still available.

Create a Simple HTML Document

First, set up a basic HTML document. Here's an example:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
  </head>
</html>

Reference the ArcGIS API for JavaScript

To begin working with the ArcGIS API for JavaScript, add the following script and link tags inside the <head> tag:
```
<link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<script src="https://js.arcgis.com/3.26/"></script>
```
The script tag loads the ArcGIS API for JavaScript. When new versions of the JavaScript API are released, update the version number to match the newly released version of the API.

The esri.css style sheet contains styles specific to Esri widgets and components. For more information about this stylesheet, refer to the help topic on required CSS.

Optionally, include one of the style sheets for a Dojo Dijit theme. There are four themes available: claro, tundra, soria and nihilo. Tundra and claro are used frequently in the API samples. Experiment with different themes and see which you prefer. Again, using a Dojo Dijit theme is optional but doing so is an easy way to get a consistent look and feel to widgets included in the API. The URLs for the various theme style sheets are as follows:
https://js.arcgis.com/3.26/dijit/themes/claro/claro.css https://js.arcgis.com/3.26/dijit/themes/tundra/tundra.css https://js.arcgis.com/3.26/dijit/themes/nihilo/nihilo.css https://js.arcgis.com/3.26/dijit/themes/soria/soria.css
Load Modules

Use a second <script> to load specific modules from the API. Instead of having this script tag reference a URL, JavaScript code will be added directly inside of it.
```
<script>
  require(["esri/map"], function(Map) { ... });
</script>
```
One thing to note about the code in this step is that the argument(s) to the function inside of require() can be anything you like. For consistency, we've published a list of preferred argument aliases for Esri modules. We recommend following that list when naming arguments passed to the require callback function. Dojo also does the same with their list of preferred argument aliases.

Putting JavaScript inside a script tag is useful when building simple pages or experimenting but not suitable for larger applications. When building a larger application, all JavaScript should be in separate .js files.

The global require() function (provided by Dojo) is used to load modules. Esri's JavaScript API is built on top of Dojo and relies on Dojo for its module system and other features like vector graphics and localization as well as a way to abstract away browser differences. For more information on the relationship between Dojo and the JavaScript API, see Working with Dojo and Why Dojo.
Ensure the DOM is Available

Use dojo/domReady! to ensure the DOM is available before executing any code. Once the DOM is available, the function passed to require() will run. Code in that function will create the map and add a basemap. The basemap layer is a service from ArcGIS.com.
```
<script>
  require(["esri/map", "dojo/domReady!"], function(Map) {
    // code to create the map and add a basemap will go here
  });
</script>
```
In addition to dojo/domReady! (the bang or exclamation point denotes that domReady is an AMD loader plug-in), Dojo also provides dojo/ready. The difference between domReady and ready is that the former waits to fire the callback provided to require until the DOM is available while the latter waits for the DOM to be ready and waits for all outstanding require calls to finish. For more information, see the Dojo documentation for dojo/ready. In simple cases, dojo/domReady! should be used. If an app uses parseOnLoad: true, Dojo Dijits, widgets from the Esri library or custom dijits, dojo/ready should be used.
Create the Map

A new map is created using Map, which is a reference to the Map class that was loaded from the esri/map module. The string passed to Map, "map", is the id of the div element that will contain the map. An object to specify other map properties, such as basemap and starting center point and zoom level, is also passed to the Map constructor.
```
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
  map = new Map("map", {
    basemap: "topo",
    center: [-122.45, 37.75],
    zoom: 13
  });
});
```
Additional basemap options are: "satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic". Use alternate basemaps by modifying the basemap option in the sandbox. View the Map class for more details on additional map options.

Because the map variable is declared outside of a function, it is a global variable. This is useful while testing/debugging because the browser's developer console can be used to interact with the map.
Define the Page Content

Now that the JavaScript to create a map is in place, the next step is to add the associated HTML. For this example, the HTML is very simple: a body tag, which defines what is visible in the browser, and a single div element inside the body where the map will be created.
```
<body class="claro">
  <div id="map"></div>
</body>
```
The div has an id of "map" to match the id that is passed to the map constructor. The body tag has a class attribute of "claro". This is used to apply styles from claro style sheet included in the head tag of the page to elements (widgets) in the page. If using a different theme, like tundra, use class="tundra".
Style the Page

For this tutorial, the map fills the browser window. To achieve this, add the following css inside the page's <head> tag:
```
<style>
  html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
  }
</style>
```

	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

Create a Simple HTML Document

Reference the ArcGIS API for JavaScript

Load Modules

Ensure the DOM is Available

Create the Map

Define the Page Content

Style the Page

Keyboard shortcuts