Lab 5: ArcGIS API for JavaScript

Goal and Background

The purpose of this lab was to show us how to embed GIS applications into websites using ArcGIS JavaScript API. In addition to modifying a web GIS application already created by another user, another goal of this lab was to familiarize us with the structure of html files, and the embedding JavaScript into html and the associated cascading style sheets (CSS).

**Data for this lab was provide to us by Dr. C. Wilson in a compressed format, and was downloaded online.

Methods & Results

Part 1: The aim of the first part of this lab was to create a basic application. First we had to set up an html document. Setting this up was relatively easy, and only required us to open up Notepad++. Once the program was opened, the code below was entered to begin the document.

Figure 1: Code to set an html document

 

Next, a reference to the ArcGIS API for JavaScript and CSS style sheet that would display this web application was included. Specifically, ArcGIS API for JavaScript version 3.7 and the claro Dojo Dijit theme were referenced. Show below is both blocks of code.

Figure 2: Code to reference CSS style sheet in html document

 

Figure 3: Code to reference ArcGIS API for JavaScript in html document

After the page had been styled, the Dojo modules were loaded into the document to include the basemap, zoom level, map center, and dojo function. Shown below is the final block of code that also includes script that defined the page content.

 

Figure 4: Final block of code for application

Map 1: Display of final application for Part 1 with URL shown

Part 2: The focus of the next part of the lab was to display and interact with a web map. This application was created much like the one in part 1 and required us to first enter code in a new blank Notepad++ document that referenced the ArcGIS API for JavaScript, CSS from ESRI and the dojo functions. In addition to those script elements, code that loaded the esri.arcgis.utils module to access the esri.arcgis.utils.createMap method was also included. Specific to this application was the basemap that would be used. To create the basemap, we had to include the map ID, 1a40fa5cc1ab4569b79f45444d728067, from ArcGIS Online. The final block of code written for this application is below.

Figure 5: Final block of code for the application created in Part 2

Map 2: Display of final application for Part 2 with URL shown

 

 

Missing from that application was a legend for the layer to interpret the symbols displayed. To include a legend, reference to a legend widget within the code was necessary. The new final block of code that includes script for the legend widget can be seen below.

Figure 6: Final block of code including script for legend widget for Part 2

 

 

Map 3: Display of final application for Part 2 including legend widget with URL shown

 Part 3: The objective of the last part of the lab was to build a web mapping application. Included below are the methods followed to develop a full-page web GIS application that would display a new feature service for schools in Eau Claire County that would be published to the UWEC ArcGIS Server REST endpoint to then be projected on an ESRI basemap. Also included was a pop up window for the schools feature service, and also a scale bar for the map.
After distributing a list of schools in Eau Claire County to the class, each member of the class was required to find the corresponding address to each school they had been assigned. Due to the fact that the shapefile of geocoded schools did not have a populated address field for each school, a join between the excel file with the corresponding addresses for each needed to be done. I chose to join the table and shape file using the Name field because the FID number for each corresponding school did not match. Once joined, the map document was then published to the UWEC REST end point.

Next, we had to modify the html document that would be used as the basis of our application. The application that would be modified was a web map of tree species locations in San Francisco, CA that included a WidgetinfoWindow that displayed that attribute information.

Our task was to first reposition the basemap to have an extent of Eau Claire County, and then to modify the code to call on the Eau Claire schools feature service we published to display schools and their corresponding attributes in a pop up window.

To reposition the basemap, the map coordinates used to center the map needed to be modified from those of San Francisco to instead include the coordinates of the City of Eau Claire. Coordinates for Eau Claire, WI were obtained at http://www.latlong.net/. Next, the schools feature service was referenced by including the web address of the published service within the block of code in addition to changing the script that configured the name, elevation, and address lables in the pop up window. Lastly, a scale bar was added to the application by including code that would reference a dojo dijit for a scale bar. Shown below is the final block of code for this application, and also a snapshot of the application.

Figure 7: Final block of code including script for legend widget for Part 3. Lines 1-45 shown

Figure 8: Final block of code including script for legend widget for Part 3. Lines 46-87 shown

Figure 9: Final block of code including script for legend widget for Part 3. Lines 87- 95 shown

Map 4: Display of final application for Part 3 including pop up widget showing Name, Elevation, and Address. URL application also shown

Sources

1. Lab5data.zip (Provided by Dr. C. Wilson)
2. Wilson. C. (2013). Lab 5: ArcGIS API for JavaScript. GEOG 455: Web GIS, UW- Eau Claire.