PrintEsri’s ArcGIS API for JavaScript offers web-mapping capability that is quite similar to what you’ve encountered so far in the course with the Google Maps API. But while Google’s API is focused primarily on mapping, Esri’s provides more of the functionality you would expect from a GIS vendor, including geoprocessing, network analysis and data editing. Organizations that have their data in Esri’s formats (shapefiles and geodatabases) should also find it easier to share their maps online as there is less need for massaging data into another format.
We’ll get started by putting together a Hello World map using Esri’s JavaScript API. Take a look at the source code of this Hello World map.
Let’s focus first on the elements of the code that are quite similar to what you’ve seen in Google Maps:
- You place a div element in the body of the page, assign it an id you’ll reference later in your JavaScript code, and apply styles to the div to define its dimensions.
- 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.
Now that we've seen the Hello World of the Esri JavaScript API and discussed its similarities and differences with the Google API, let's have a look at some resources that developers can consult when putting together an Esri JS page.