GEOG 863:
Web Application Development for Geospatial Professionals

3.1 Use the API to Create Your First 2D Map


As mentioned earlier, modifying existing sample code is a common way to begin learning a new programming language or API.  Thankfully, Esri offers a "sandbox" environment for experimenting with the samples found in their SDK.  Let's use this sandbox to start our work with the API.

  1. On the SDK home page, click on the Sample Code tab.
    Accessing the Sample Code area of the SDK
    Figure 3.1 Accessing the Sample Code area of the ArcGIS Javascript API SDK

    There you should see a list of Get started... samples.
  2. Click on the Intro to MapView (2D) link. Like the other Samples pages, you should see a map embedded at the top of the page. Beneath the map, you should see buttons labeled Explore in the sandbox, Share, and View live.
  3. Click the Explore in the sandbox button. The sandbox shows you the same map you just saw on the right side of the page and the source code that produces that map on the left. The size of these two panels can be adjusted by dragging the vertical bar separating them to the left or right. The power of the sandbox is the ability to modify the source code and quickly see the result (by clicking the Refresh button in the upper right of the page).

    The sample is coded so that the map is centered over Scandinavia at a zoom level of 4. What if you wanted to display the United States instead? That’s easy!
  4. Modify line 36 so that the MapView’s center property is set to a lon/lat array of [-95, 40] and click the Refresh button. Now, let’s say you wanted to use a different basemap.
  5. Change line 29 so that the Map’s basemap property is set to "terrain" and again click the Refresh button. As you can see, the sandbox makes it very convenient to “play around” with the code samples.

    Note: We’ll see shortly how you’d know what other values can be used to set the basemap property.