More about the map

You'll need to follow the preceding process we described for every application that you build with the ArcGIS API for JavaScript.

The creation of the map can only happen when your HTML has finished loading, and all the required DOM elements and scripts are ready. You achieved this by using the domReady! plugin in your require() function. This ensured that the code in the function that was passed as the second argument only executes when everything is in place. This function is known as an initialization function:

require(["esri/map", "dojo/domReady!"], function(Map) {
  // initialization goes here
});

You use your initialization function to create your map, add layers, and perform any other setup routines necessary to start your application.

Creating a map is invariably one of the first things that you'll do and in this section we'll take a closer look at the various options you have when creating an instance of the Map class.

In object-oriented programming you create an instance (your own, working copy) of a class (like Map), by calling a special method on the class called the constructor. Constructors frequently take one or more parameters that can be used to set the initial state of an object.

The Map constructor accepts two parameters: the HTML page element (a <div>) where the map should be placed, and an options object that sets various properties on the newly-created map instance to define its behavior. This includes things like which basemap to use, the initial extent of the map, the display of navigation controls, how graphics appear during panning, what type of zoom slider control to use, and many more.

The second parameter in the constructor is always enclosed within braces. This tells the JavaScript interpreter that you are supplying a JavaScript object.

Inside the braces, the map options (the object's properties) are specified as key/value pairs. If you are supplying more than one option, you must separate them with commas. In the following example, we are defining options for the map coordinates that will serve as the center of the map, along with a zoom level, and a basemap layer of streets:

      var map = new Map("mapDiv", { 
        center: [-56.049, 38.485], 
        zoom: 3, 
        basemap: "streets" 
      });