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

(Fig. 4) This is the output image of the first part of the lab.

(Fig. 6) This is the output of part two of this lab.

(Fig. 10) The final routing application created in this lab in part 3 can be seen here.

Sources
Sources for this lab are listed below:

• EC_Schools feature class was obtained from MapCruzin.com at: 
• http://www.mapcruzin.com/geographic-names-shapefiles/#School
• EC_Schools_Address was assembled by GEOG 455 class, fall 2013Widget_infowindow files   were provided by Esri at :
• https://developers.arcgis.com/javascript/jssamples.html

Lab 4: Basic HTML, CSS and JavaScript

Goals

The objective of this lab was to introduce us to languages including JavaScript in order to give us a better understanding of how to develop Web GIS applications using the ArcGIS API for JavaScript. Not only were students exposed to the basic coding techniques and syntax of HTML (hypertext markup language) and JavaScript but also CSS (cascading style sheets). The overall goal of this lab was to give us the ability to develop our own website using all three languages from scratch.

Methods

Part 1: Developing a Web Page Using HTML Tags

In this first part of the lab we used Notepad++ to write basic HTML tags in order to introduce our web page with some basic information. Notepad++ is a text editor which is used for coding and editing various script languages including HTML, JavaScript and more. The first part of our code (Fig. 1: left) and the output (Fig. 1: right) defined the script as HTML code as well as created a set of three headers. Every additional header from the first one is smaller than the next because of their hierarchical nature. 

(Fig. 1) This image shows the first set of code we created on the left and the output of this code in a web browser on the right.

Next, we created a new paragraph using the <p> tag and created an unordered list with a title which was bolded using the <strong> tag. To create the unordered list we used the <ul> tag and before each line of text used the <li> tag . As can be seen in Fig. 2 on the left is the code used to create the list of my hobbies for this part of the page and on the right is the output. 

(Fig. 2) On the left is the code used to create the output HTML page on the right.

Part 2: Styling the Various Sections of a Webpage
Once the base of the webpage is created we created the CSS to stylize it. To do this we again used Notepad++ but created a new document which we titled "overall design" in order to keep track of what the purpose of each text file was. We started out buy giving the body a background color as well as defining the font for the webpage text. Then we adjusted the wrapper and header. After the CSS file has been created the next step is to link it to the HTML file created in Part 1. Once this is done we can see the results of the styling code in the HTML code (Fig. 3). We are then able to continue to edit the CSS by adjusting the settings of the footer and sidebar. 

(Fig. 3) The upper left screen shows the overall HTML code used to create the webpage on the bottom while the code on the right hand screen is the CSS file which was used to add the colors to the webpage.

The next thing we can do to improve our webpage is adding forms to the HTML code. To do this we simply use the <form> tag and specifying the labels for the input value and the type of information to be inputted into the form field. The code for this step can be seen in Fig. 4 on the left and the output can be seen in Fig. 4 on the right. 

(Fig. 4) On the left hand side of this image the coding used to create the form field can be seen while the result of the code can be seen on the webpage on the right.

Another feature we added an image of the web application we created in Lab 3 as well as the link which would directly link the end user to the application itself. We were even able to add a border to the image in the CSS file. The code for this step can be seen in Fig. 5 on the left and the output can be seen in Fig. 5 on the right. 

(Fig. 5) This image shows the complete list of code for the CSS.

Part 3: Introduction to JavaScript

In part 3 of this lab we developed a simple way to fix the results box which was not formatted correctly in step 2. To do this we created a new Notepad++ file and declared the JavaScript language by applying the function of write results. The writeResults function in JavaScript gives a function a definition or parameter named a result. Then the variables which are declared and the arguments are executed by the function and are written within the { curly brackets }. We then wrote out our code and added comments to describe each step so if we reviewed it later we would understand our process. The Code for this process can be seen in Fig. 6. The final step in this process was to link the JavaScript file to the original HTML document we created in step 1 to include the code of the JavaScript file.

(Fig. 6) The screen on the left shows the working HTML code used to produce the webpage and the image on the right displays the JavaScript which was created and linked to the HTML code.

Results

The ultimate goal of this lab was for us to be able to create our own customized webpage. After being given the following scenario: 

"You have just started a company that provides Web GIS solutions to customers in a county and state of your choice. One of the most important method of disseminating your company’s services to existing and prospective customers is through a website. You will develop a webpage with the following features. 

 The name of your proposed company and other relevant information. 
 Company Logo. 
 Links to resources that will be useful to your end-users. DR. CYRIL WILSON UNIVERSITY OF WISCONSIN-EAU CLAIRE 28 
 Links to the Web GIS application you developed in Lab 3 and two non-secured Web GIS applications from Esri JavaScript website.
 An ordered list of six services that your company will be delivering. These services should be highlighted with a catchy color other than black. 
 A form that will enable end-users to search your website and company services. 
 At least two pictures that are of importance to your proposed company."

The result of this portion of the lab and the final goal can be seen in the image below along with the code which was used to create it. 

NOTE: I did have some fun with this activity and it is a bit silly. I did that by choosing a fun design and the idea, the skills I learned really stuck with me. 

(Fig. 7) The webpage I created from scratch using the skills I learned throughout this lab exercise.

Sources

The UWEC logo was obtained from the UW-Eau Claire website and part of the codes which were used in developing the applications were from Sylvia Richardson of Girl Develop It via Github (2015).