Web GIS Lab 5

Goal and Background

One goal of this lab was to again create an app using ArcGIS AppBuilder just like we did in Lab 3. In that lab our app leveraged a basemap, operational layers, time aware, and feature access services. For this lab we added ArcGIS JavaScript API which is a programming interface that allowed us to build widgets, themes, and analytics from scratch or to edit existing apps. API is easily embedded in an HTML document and offers a lightweight mechanism to embed maps and tasks in the web GIS applications. We used our programming skills from lab 4 to carry out this lab. 

The main goal of this lab was to teach us how to use the ArcGIS JavaScript API to embed GIS services into any website. Some of the objectives included embedding GIS services to display and interact in a web map, customize a web GIS application created by someone else,and build a routing app that leverages network services from an external GIS server.

Methods

Part 1 Creating a basic Web GIS mapping app

The step for this portion of the lab was to create an HTML document (Figure 1) like we have done in previous labs. 

Figure 1 Beginning of the HTML document.

Then we referenced an external style sheets so that we did not have to create our own CSS file. The style sheets came from the ESRI and Dojo libraries. In figure 2 you can see the code with which this external style sheet is referenced in the HTML. The first line of text in the red box refers to the Dojo Digit theme which styles the display of web GIS applications. The second line is a link to the ESRI style sheet which styles the feature on the map. 

Figure 2 References to the external style sheets.

The only part of the css style sheet we have to write is in regards to the web page extent. The code in figure 3 is written to assure that the web map fills the browser window.

Figure 3 Web map size display code.

The next steps are to load the ArcGIS API for JavaScript and to add some additional styling to your web map by adding the claro style sheet. Then we wrote our JavaScript file and that is also referenced in our HTML code.These steps can be seen in the code of figure 4.

Figure 4 Reference for our JavaScript file and the claro style sheet.

The final step of part one is create the JavaScript file (Figure 5). We connected to the Dojo library and DOM which control the modules for the map and the web page. Another part of the code is for setting the zoom extent. A function is written which centers the map over a certain portion of the world and zooms to a specific extent. This is also where the type of base map is chosen.In this case we chose the street base map.

Figure 5 Very simple JavaScript file for part 1.

Please see Figure 6 in my results section to see the map created using the HTML and Javascript API. It incorporates the style sheets and zoom extent we set in the code.

Part 2 Build a Web GIS app with operational layer functionality

---Technical difficulties are being experienced with this portion of the lab. Will update when fixed---

Part 3 Developing a simple routing application

This part of the lab was about constructing a very simple routing app that finds routed between two or more locations. It will have the following features:

1. Click on the map to add stops to a route

2. When two or more stops are added a route will be calculated

3. If more stops are added the app will extent the route

The first step just as in our other apps is to create the HTML file. We reference the same style sheets as in the other parts of the lab. One additional portion is added to ensure that the app displays correctly on an iOS device including iPhones and iPads etc. Just like the other portions of the lab we will reference the JavaScript file which contains the functions of the app. Figure 7 is the HTML document for my simple routing app. 

Figure 7 HTML for routing app.

In addition to the viewport and references to the style sheets and JavaScript file we also set the size of the map window when this app is opened in a web browser. Also an explanation of how to use the app is written in the HTML document towards the bottom to give the user an idea of what to do with the app. 

Next we wrote the JavaScript file. The first portion of the JS file is dealing with acquiring Dojo modules for features, symbols, color, and the dijits we will use in the app. The Dojo digits we used are for border containers, content pane, horizontal slider and the horizontal rule labels. Figure 8 shows these first lines of the JS file. 

Figure 8 Code for acquiring modules in the JS file

Then multiple variables are added under the functions portion of the code including map, routeTask, and routeParams. Also included are stop symbol, routeSymbol and lastStop variables. Then just like in previous apps we are going to set the view extent and chose our street base map. The view area for this app is focused over the city of Eau Claire.

Next an event is added to the JS code. The event causes a stop point to be placed on the map when the end user clicks on a point. Then to give the app its route functionality we referenced the network service from the ESRI sample server 3. Additional code was written so that a symbol displays on the screen where the user clicks. Figure 9 show these functionalities coded on the JS file.

Figure 9 JavaScript for additional functionalities of the routing app.

Finally code was written so that the solved route appears on the screen for the use to see. Also an errorHandler function is written so that is the user creates an impossible route an error message is displayed on the screen. These functions are seen Figure 10 of the JS code. Please see the results of this app in Figure 11 of my results section.

Figure 10 Continued JavaScript code for error and route display.

Results 

Figure 6 This is the resulting app from Part 1 of the lab learning to reference external style sheets.

Figure 11 This is what the web page looks like with the simple routing app embedded into it. It also includes the directions on how to use the app for the end user.

Figure 12 This is how the app will look when stop point are inserted and the app figures out the best route.

Sources

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