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

Web GIS Lab 4

Goal and Background 

The goal of this lab was to introduce us to the languages that required when creating a Web GIS application with the ArcGIS API for JavaScript. We learned the syntax and basic methods of Hypertext Markup language (HTML), cascading style sheets (CSS), and JavaScript. These langauges are commonly used in the development of of webpages. The overall goal was that by the end of the lab we would be able to create a basic website on our own from scratch using these languages.

Methods

Part 1 Developing a web page using HTML tags

At the beginning of the lab we were given the following scenario by Dr. Wilson. 

"You have spent a year working with Virtual Geospatial Analytics and you have gained enough experience including liquid capital and are at the brink of setting up your own geospatial company. Every company needs a website through which its services can be disseminated to its customers. In this lab, you will develop a basic website that will be improved upon and later used by your geospatial company. The basic website should contain the following:" 

• The name of your proposed company and other relevant information. 
• Company Logo
• Links to resources that will be useful to your end-users. 
• Link to the Web GIS application you developed in Lab 3. 
• A form that will enable end-users to comment on the usability of your website and company services. 
• Pictures and images that are of importance to your proposed company.

The first part was to get us familiar with using HTML and writing the basic text, using tags we learned in class, that would become our homepage of our website. The first step is open Notepad ++ which is the software that all the coding for the website is written in. In the very first line of the code you have to tell the software that this is an HTML code. We then used some of the tags we learned in class to create the header for the webpage. Then we inserted a div and labeled this section of code header. This id will be used with the CSS later on. Then 4 lines of text were added for title, class, department, and University. All of this text will be displayed in the header and ordered by h1 through h3 which tells the program how big the text should be. We then added two more lines after a div one was italicized or emphasized and the other is bold. Figure 1 the what the code actually looks like for what I am describing. The resulting web page is Figure 2. 

Figure 1 The basic HTML code for the header and first portions of my website.

Figure 2 This is the resulting web page for the code in Figure 1.

We then added a list under the bold text "These are my hobbies". We also added a comment above the list which is used to describe what is going on in the script for someone who is reading it. This text is not read buy the software as part of the code. Figure 3 is what the code looks like when you add a list to the code along with that comment.

Figure 3 This is the code for an unsorted list in a web page as well as adding a comment in the HTML code.

Showing credits or putting links in the text of a webpage is pretty common and that is what we learned to do next. In order to do this a href tag is used which allows you to highlight the text in your website you want linked and also attach the link to that text. Basically this allows the user to click linked words on your webpage and it opens the intended link. Figure 4 is the code for this tag. Figure 5 is what the webpage looks like now with the list and credits added to it.

Figure 4 This is the HTML for adding credits with links to your web page.

Figure 5 This is the the web page with the list and credits added to it. Still very plain.

Part 2 Styling your web page with the use of CSS

The web page is very plain and has no color right now it is just text. CSS is where we make changes to the color if the webpage. In order to this we opened a new sheet in Notepad ++ and saved it as a CSS file. At the top of the code we entered a comment just saying what this document is for. Figure 6 is what it looks like when changes are made in the style of the webpage. The blue text corresponds to the section of the web page the style applies to. This is where the ids in the HTML code come into play. This CSS file is referenced by the HTML code. Figure 7 shows the code in the CSS to make style changes. In the CSS file we set the style for the body, wrapper, header, sidebar, image borders and  footer. Any id can be added in the HTML to style any portion of the web page a certain way and the CSS is where you tell the web page how it should look.

Figure 6 This is the webpage after some changes are made in the CSS file with the colors. 

Figure 7 This is what the CSS file looks like where you change the style of different chunks of the website under the id from the HTML file.

We then added an image to the web page. As well used the code for creating a link. We created a web app in Lab 3 and want to put a link to it in our web page. In order to insert an image,back in HTML, we use the img tag and inside that we put src= which is where the file name is pasted. The webpage then grabs the image from the file location and displays it. Again like earlier we used the href to highlight a few words which are linked to the web web from lab 3. This allows the website user to click on the words and the map is opened. Figure 8 the image we coded in and the link in a sentence to open the web map.

Figure 8 This is a screenshot image of the web map created in lab 3 which we brought into the webpage. The link to the application is also added in text.

Next was to enter a results box into the web page. In order to this we enter a new id in the HTML and called resultsbox. Then in the CSS file we edited the style so we had a box above our image (Figure 9) where comments will go later on in the lab.

Figure 9 This is the results box which we later wrote the code for in JavaScript.

Part 3 Introduction to JavaScript

Part is all about how to use JavaScript. JavaScript is what will give the results box created in HTML and CSS its functionality. Again we add a blank sheet to Notepad ++ and save it as a .js file. Figure 10 is what the code looks like that makes the results box function. In the first line when it says function we are telling the webpage what this script is for. It is for writing results in the box we created. Basically what is happening in that code is that whatever gets submitted into the input box will show up in the results box on the page and a lot of details of exactly how the results should show up on the page. Just like with the CSS sheet we have to reference the JS file in the HTML code (Figure 11).

Figure 11 This is the JavaScript code that gives the results box its functionality. Without this code it would not work.

Figure 12 In order for the JS or CSS codes to work they need to be referenced in the HTML code. This is how that is done.

Part 4 Building a customized webpage

The last part of the lab is where we got to create our own webpage using the skills we learned in parts 1-3. We were given the following scenario by Dr. Wilson.

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.
• 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.  

Figure 13 is my customized webpage. Figures 14,15 and 16 are the code files which make up the website.

Figure 13a This is the top of my webpage. I changed the color scheme added a logo inserted a search box, image, and put in a link to my web map.

Figure 13b This is the lower part of the page where I have two more images and links to more web apps dealing with GIS.

Figure 14 This is part of the HTML code for my website.

Figure 15 This is most of the CSS file for the site.

Figure 16 This is the JS file which is controlling the function of the search box on my website.

Sources 

UWEC home page logo was obtained from a screenshot of UWEC website. 

Part of the codes used in developing the application were abstracted from Sylvia Richardson of Girl Develop it via Github (2015).

Screen shots in part 1-3 are from Dr. Wilson's lab PDF. 

Web GIS Lab 3

Goal and Background

The goal of this lab was to introduce us to building Web GIS applications with the Web AppBuilder for ArcGIS. We created and application, authored it and added our own services, configured and brought in customized widgets and then deployed the web app for use by an end user. Thinking about the amount of coding that is going on in the background of the app is another goal of this lab. In the app builder we don't have to do any coding but in upcoming labs we will be doing some of the coding that is needed to make a web app function properly.

Methods

Part 1 Building web GIS apps through Web AppBuilder Integrated Edition

You have been employed by Virtual Geospatial Analytics and you are tasked with creating a web GIS applicatruion that displays historic earthwuakes ad hurricanes to the public, Your supervisor wants the web GIS app to be able to perform the following:

• Provide pop-up windows to show the earthquakes and hurricanes.
• Zoom to the entire United States in its initial view
• Provide bookmarks so that users can easily zoom to predefined areas
• Allow users to chart and compare the selected attributes of selected earthquakes
• Allow  users to query for features based on their attributes
• Display appropriate logo, title, subtitle, add links in the banner
• Allow users to update recent earthquake information through batch editing

This was the scenario we were given for the first part of the lab by Dr. Wilson. The first step to completing this task was downloading data provided by Dr. Wilson. We then logged into ArcGIS Online and began creating a web app using Web AppBuilder. Create a new app and then bring in the web map created last week containing the hurricane and earthquakes features. This will serve as the map for the web app. Then we started to add widgets to the app. Widgets are tabs that allow the end user to complete additional tasks in the app. In our app we added the base map widget which allows the end user to switch between base maps like the imagery or topographic base map. The measurement widget allows the end user to measure the distance from one point to the another on the map. The bookmark widget allows the end user to set a certain zoom over a place on the map for easy access to that area in the future. All these widgets are very easy to add and use while at the same time dramatically increasing the interaction capabilities of the map. After the widgets are added.you can select a format that you want your map to display in. You can chose from PC, to iPhone, tablets or many other formats. Some additional widgets were added later on in the process. The chart widget allows a user to select some of the earthquakes and it displays attributes such as magnitude and depth in a bar chart for easy comparison. The query widget allows the user to select earthquakes based on attributes such as magnitudes, year it occurred, and other attributes. It makes finding a specific size or date of a earthquake easy to find. You also have widgets showing the layers of the map that you can turn on and off as well as a draw widget where the user can draw on the map if they chose to do so. That was the first part of the lab just creating a pretty simple easy to use web app with widgets. Figure 1 is that web app.

Figure 1 This is the first web map with the majority of the widgets in it.
Click the image to view the app.

Part 2 Customizing Web AppBuilder for ArcGIS (Developer Edition)

For the first part of the lab we were able to work on ArcGIS Online to create our web app but for this portion of the lab we worked on a local computer. In order to do this we used a program called node.js. Web AppBuilder is a program installed on the computers as part of the ESRI software package. The first step is too give AppBuilder a URL from which it can access your ArcGIS Online material. Then you go onto ArcGIS Online and create a new app and match the URL to the one you gave AppBuilder so that Appbuilder can access the app. This will give you an app ID which gives you access to the app. The app will be launched in a new browser window and it will ask for access to my ArcGIS Online enterprise account. I approve that and it launches AppBuilder. When it opens I then imported the web app I created in the first part of the lab. Once it is imported we can go ahead and begin making edits to it. Again we added widgets to the map. This time however this is a fully custom widget that is not in the program. It is called the Batch Attribute Editor widget. This widget allows the end user to make edits to some of the data on the map. In this case they are able to edit the location information of all of the earthquakes on the map.Right now the locations are pretty vague but if an end user wants to spend some time and make them more specific they have the ability to do so. This makes crowd sourcing available in the app. After this widget was added the next step is to save the app data on the local computer. To do this you download a zip with all the app info in it and map a network drive where you then connect to a server and paste the app info there. When the app is launched in a browser window this is where the URL path leads for the app information. This web app is hosted on a local computer which means it can not be opened on the internet unless you are on that computer. For that reason I can not put a link to it here.

Sources

Fu, Pinde (2015). HERE, Census at:   

 \\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Earthquakes, courtesy of USGS National Atlas. \\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Hurricanes, courtesy of NOAA National Climatic Data Center.