Loading required modules

To take advantage of the Dojo's AMD style, we're going to use Dojo's require function. In older examples, we would create multiple dojo.require("") statements that would load the parts of the ArcGIS JavaScript library we needed (and hopefully by the time we wanted to use them). But with AMD style, we use a single require function that requests the list of libraries we ask for, and loads them within a function that runs after all the libraries are loaded in the browser:

  <div id="map"></div>
  <script type="text/javascript">
    require([], function () {});
  </script>
</body>

The require function takes two arguments, an array of strings that corresponds to folder locations in our library, and a function that runs after those libraries load. In the second function, we add arguments (variables within the parentheses after functions) that correspond to the libraries loaded in the list.

So, for this application, we'll need a few modules from the ArcGIS JavaScript API. We'll need to create an empty map and add data to the map in a form we call layers. We'll need to identify things on the map, retrieve the census data we need from the place we clicked on the map, and then display it:

<div id="map"></div>
<script type="text/javascript">
  require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/tasks/IdentifyParameters",
    "esri/tasks/IdentifyTask",
    "esri/InfoTemplate",
    "dojo/_base/array",
    "dojo/domReady!"
  ], function (
    Map, ArcGISDynamicMapServiceLayer,
    IdentifyParameters, IdentifyTask, InfoTemplate,
    arrayUtils
  ) {
    // code goes here
  });
</script>

Notice the order of the libraries loaded in the require statement, and the arguments in the following function. The first item in the list corresponds to the first argument in the function. It is a common error when creating more complex applications to mix up the order of the elements, especially if it has been revised multiple times. Make sure the items correspond as you go down the list.

You may have noticed that, while there are seven libraries loaded, there are only six arguments. The last library that loaded, the dojo/domReady! library, tells the require statement's second function not to run until all the HTML elements have loaded and are rendered in the browser.