Web GIS: Geog 455: Lab 5: ArcGIS API for JavaScript 1

Goals

The goal of this lab was to use the ArcGIS Web AppBuilder, as we did in Lab 3, to create an app which has operational layers, is time aware aand has feature access services. The JavaScript API is an interface which allows programmer to build themes, widgets and other analytics from scratch based on components of existing apps. ArcGIS API for JavaScript is a simple way o embed maps and tasks into various web GIS applications and in this lab we will learn use the skills we have previously learned such as HTML, CSS and JavaScipt coding.

Methods

Part 1: Creating a Basic Web GIS Mapping App

In the first part of this lab exercise we completed the following list of tasks:

Set up a basic HTML document
Set up a basic JavaScript document
Reference the ArcGIS API for JavaScript in your HTML document
Use a basemap from ArcGIS Online
Specify the map zoom level and center point
Display the map full screen

We first set up a basic HTML document and then referencing an external CSS style sheet as well as the style sheet for web maps created by Esri. We linked the CSS style sheet by using the link tag which connects our individual application to the Dojo Dijit theme, particularly in this case the claro theme. The Esri style sheets are used to style features on a web map and since most of the styling for this map was done externally using the claro style sheet we wrote a CSS file to include it (Fig. 1).

(Fig. 1) To create the HTML document for this portion of the lab we linked various external style sheets.

Based on the code which we used to define the style (lines 10-14 in Fig. 1) the map will fill the web browser. Next we referenced the ArcGIS API for JavaScript version 3.14. For the body of the script we are using the claro stylesheet as mentioned above and therefore define "claro" as the body class (Fig. 2).

(Fig. 2) The body class was defined as claro and referenced the JavaScript file to be used in this part of the lab.

Once the HTML document was complete we created the JavaScript code which would be used with this Web GIS application. We connected to the Dojo library by using the "require" tag in order to import the modules which we used for the map as well as the document object model (DOM) of our HTML file. Next we added the map by declaring the map variable and specifying the specific properties and property values to ensure the following values: the zoom level, center coordinate of the map and that the map type was street basemap. After all this was complete we were finished with our JavaScript file for this portion of the lab, (Fig. 3).

(Fig. 3) This shows the JavaScript used in part 1 of this lab.

Before deploying the web application we needed to make sure that we linked the JavaScript text to our HTML document. The result of part 1 can be seen in Fig. 4 in the results section of this blog post.

Part 2: Build a Web GIS App with Operational Layer Functionality

In this part of the lab we first developed a JavaScript method to display tree species and attributes for the City of San Francisco. To do this we started by creating a new HTML 5 document and referenced two different external stylesheets.

After getting the HTML document set up we then started the JavaScript text. We entered the require command to access the modules for dojo DOMs, dojo string, myModules and Esri. Once this was done we created a function with the parameter definitions for the various components of the app as listed in the previous sentence (Fig. 4). Next, we created an infoWindow variable with arguments in order to create a new infoWindow. Then we declared a map variable that was assigned the value of a new map object with coordinates specific to Eau Claire. Once this was done we declared the new template variable which was used to display the popup content when an end-user clicks a feature on the application. The final variable we declared was the featureLayer which referenced a feature service of the study area (Fig. 5). After we linked the Eau Claire schools feature class to the JavaScript document we were able to view the output (Fig. 6).

(Fig. 4) This shows the list of modules accessed for this lab.

(Fig. 5) This is the JavaScript used for part 2 of the lab.

Part 3: Developing a Simple Routing Application

In developing a simple routing application we wanted to accomplish three main objectives. First, we wanted the user to be able to click on the map and add stops to a route, we also wanted a route to be calculated after at least two stops were added and finally we wanted the route to be extended when subsequent stops were added to the map.

After setting up the basic <html>, <head> and <meta> tags we added the viewport tag in order to make the application responsive in ISO devices (Fig. 5). Next we referenced two external style sheets which we have used in the past, the esri and claro style sheets.

(Fig. 7) The start of the HTML code for part 3 of the lab.

The next step was to create a new document to write our JavaScript code. The first thing we did once the document was started was to connect to the Dojo library using the "require" command which allowed us to connect to graphics, route task and modules for maps and other routing parameters which we needed for this app. We then added code to also added lines of code to invoke the Dojo modules for color as well as the dijit registry. This dijit registry gave us the ability to invoke modules for design features like the horizontal label rules, horizontal slider and border containers.

We then needed to write a function with multiple definition parameters to close the require command and leverage the Dojo modules we did in the previous step. These variables included the stop symbol, lastStop, routeSymbol etc.

Next we created a new map object in the JavaScript code in which we used the "streets" basemap via Esri and we centered the map to the Eau Claire area by entering in the latitude and longitude for Eau Claire. Then we created an event which would cause a stop to be added when the end-user clicks on a particular portion of the map. We then referenced the network service from the Esri sample server 3. To further set up the route parameters we used the following code seen in Fig. 8. In addition to this we wrote an argument to solve the route task and show the results on the map within the application.

(Fig. 8)

The final step was to create an errorHandler function with the error (err) definition parameter so that an error message is sent to the user if an erroneous route is requested (Fig. 9).

(Fig. 9)

After linking the JavaScript file to our original HTML document created in the beginning of this part of the lab our application was launched with routing capabilities. (An image of the output of this can be seen in Fig. 10 in the results section of the lab.)

Results