Lab 5: ArcGIS API for JavaScript 1

Goal

The purpose of this lab exercise was to teach students how to use ArcGIS JavaScript API to embed GIS services into a webpage. By the end of the lab exercise, students would be able to write simple and intermediate JavaScript codes to develop web GIS applications as well as be familiar with using the JavaScript API to embed the services in webpages.

Methods

In part 1 of the lab exercise, students were introduced to setting up basic HTML and JavaScript documents. Students had to reference ESRI's Dojo Dijit themes claro and ESRI stylesheets. These stylesheets would style the display of the web map, so students had to add CSS code directly into the HTML document using <style> tags, since there was not enough actual styling to be done that warranted using an entire CSS document. Students then had to access the JavaScript API for ArcGIS. Next, students learned how to set the center of the map on the webpage, so that the map was centered on a certain location when the map loaded. The students also had to set the zoom level for the map as well as the basemap that would be used, which in this case was the "streets" basemap. Lastly, students were required to reference their JavaScript document (figure 1) in the HTML document (figure 2) so that the JavaScript would make the application work.

Figure 1. The JavaScript document for the part 1 map application.

Figure 2. The HTML document for the part 1 map application.

In part 2, students had to create a web GIS application with operational layers, meaning that the end user would be able to interact with the map application and see information from it. The construction of this map application was very similar to that of the first one, however, this time the Dojo components had to be accessed in the JavaScript (figure 4).

Figure 4. Dojo components in JavaScript document. 

Once all of the code (figures 5 and 6) was typed up for this application, it was run, and should have been zoomed in to San Francisco, where there were a large number of tree features. Upon clicking on these trees, an end user would be able to see the name and address location of that tree. 

Figure 5. The HTML document for the tree service application.

Figure 6. The JavaScript for the tree service application.

The second part of part two involved creating a service to view the address location and elevation of schools in Eau Claire. Again, this code (figures 7 and 8) was very similar to that of the tree service, except that students were required to develop the map service in ArcMap, publish it to the development server, then embed it into the webpage. Students were required to add a scale bar to the Eau Claire schools application, as well as fine tune the info window popups so that they included the address of the school all on one line. 

Figure 7. The HTML for the Eau Claire schools application was the same as the HTML for the tree service application, aside from the fact that the JavaScript reference was different.

Figure 8. The JavaScript document for the Eau Claire schools application.

Finally, in part 3, students were required to develop a simple routing application by coding it in JavaScript (figures 9 and 10). In theory, this application would be able to add a stop to a route when clicked, and when two or more stops were added, it would calculate a route between the stops, but if a stop was inaccessible, then an error message would be displayed. The map service was for the city of Eau Claire, so the map center coordinates centered on downtown Eau Claire. This routing app was not complicated to code up, but there is much room for error in coding. After some extensive troubleshooting, students were able to overcome the issues and were successful in creating the routing application.

Figure 9. The HTML document for the routing application.

Figure 10. The somewhat lengthy JavaScript document for the routing application.

Results

The following figures (figures 11, 12, 13, and 14) are the final results of the code written in the lab exercise.

Figure 11. The first part of the lab exercise yielded this application. The end user is able to pan and zoom around the application to view any part of the world in a topographic basemap.

Figure 12. The first section of part 2 of the lab exercise yielded this application. The end user can pan and zoom around this area of San Francisco, as well as click on each tree to see its address location in a popup window.

Figure 13. The second section of the second part of the lab exercise yielded this application. The end user can pan and zoom around Eau Claire County, and click to view name, address, and elevation data for each school feature.

Figure 14. The final part of the lab exercise yielded this application. The end user can click to add stops, and once one or more stops are selected, a route is calculated between the stops. Assuming a stop is inaccessible, an error message is displayed. 

Sources

EC_Schools feature class:

U.S. Geographic Names Information System (GNIS) Shapefiles Based on USGS GNIS Data                        Updated 10/1/2012. (1996-2017). Retrieved November 08, 2017, from                                                  http://www.mapcruzin.com/geographic-names-shapefiles/#School

EC_Schools_Address: 

Assembled by GEOG 455 class, fall 2013.

Widget_infowindow files:

Provided by ESRI at https://developers.arcgis.com/javascript/jssamples.html