Let’s focus first on the elements of the code that are quite similar to what you’ve seen in Google Maps:
- You access the functionality provided by the API by adding a script element that points to the API’s URL.
- The API contains a Map class whose constructor requires that you associate the new Map object with a div container on the page.
Now, let’s get into the differences:
- In Google Maps, a basic reference map will appear by default after instantiating a Map object and associating it with a div on the page. In Esri’s API, you must explicitly select a base map. Available basemap options include “streets”, “satellite”, “hybrid”, “topo”, “gray”, “oceans”, “osm” and “national-geographic”. In this case, we’re utilizing the topo option.
- Map services can be streamed as a set of pre-made image tiles (like Google’s) or as imagery that's generated on the fly. The former requires instantiating an object of the ArcGISTiledMapServiceLayer class; the latter an object of the ArcGISDynamicMapServiceLayer. We’ll see examples of these services later in the lesson.
- Esri built their API around a JS toolkit called Dojo. Toolkits like Dojo help JS developers build applications more easily by providing a set of user-interface widgets that can be programmed without the worry of maintaining multiple versions of the code for various browsers. Examples of Dojo widgets (also known as “dijits”) utilized in Esri’s API are the zoom level slider and the info window.
- In addition to including a reference to the API's JS library, it is also necessary to include a link to the esri.css stylesheet.
- All map pages contain references to one or more JS modules in a call to Dojo’s require() function. This function imports functionality into the page in much the same way that script tags are used to bring in functionality from external JS libraries. At minimum, a page will include an import of the "esri/map" module, which enables working with maps, graphics and symbols. Other resources may be necessary depending on the desired functionality. For example, "esri/tasks/query" is necessary for apps that carry out query tasks.
- Whereas the initMap() function in Google’s Hello World page is executed because it appears in the body of the document, the Esri map is initialized by inserting “dojo/domReady!” as the last item in the list of modules supplied to the require() function. That list of modules is then followed up by a callback function that you want to be executed when the DOM has finished loading.
- The callback function contains a list of arguments that corresponds to the list of required modules. In the Hello World example, only the “esri/map” module is required, so the only argument to the callback function is one called Map. We’ll see other arguments associated with other modules in more complex examples later. Note that a callback function argument is not included to go along with the domReady! plugin.