Web GIS Lab 7

Goal and Background

This weeks lab was working with volunteered geographic information or VGI applications. VGI apps allow the general public to collect and upload features which are geo-located and add attribute information to it. These features combine to make GIS data so this VGI app allows for crowd sourcing data collection. 

In this lab we developed a web GIS application that allows the general public to collect and upload geographic information in the application. In other words we created a VGI application. These apps are very important in the field of GIS because they allow collection of data that without the help of the general public may not be able to be collected. 

There were 5 main goals for this lab.

1. Get experience setting domains and sub types for enterprise geodatabase features. 

2. Prepare a feature template for the types of VGI data that we want the public to collect.

3. Create feature editing services for the data to be collected.

4. Develope a simple user interface for the VGI app using ArcGIS API for JavaScript.

5. Verify the integrity of data added by the public.

Methods

Part 1 Authoring a map document to support feature services and web editing

Once again as in weeks past Dr. Wilson gave a scenario for what we would accomplish during this lab. It read as follows "The City of Eau Claire has contracted your geospatial company to efficiently collect information about the status of public infrastructure in the city within a two week period. The city only has limited amount of money to pay you for this project. You have examined the money your company will make from this project and realized that the most economically feasible way of executing this project is to crowd source the task to the general public as you won’t afford to hire field workers or send your staff members to the field. A VGI app is absolutely essential for a successful completion of this job. You will use and accentuate your web GIS app development skills in this project."

The first part of the lab ivolved creating a map document in ArcGIS that will be used to allow the public to add point, line and polygon features to in a VGI web GIS app. The step to doing this is set up the domains and sub types in our geodatabase. In order to this we right click on the geodatabase we want to use and select the domain tab. In this tab we are able to set up domains which will later be linked to new feature classes that will be created with the features for the map. Figure 1 is showing what the domain set up looks like in the geodatabase properties. These domains are telling ArcMap what kind of inputs allowed in to the feature and help when it comes to symbolizing the features. If you look at figure 1 you see that I have the condition domain selected. Condition means we are describing what shape something is in. For this app we are looking at sidewalks and whether they are in good shape or need to be repaired. The coded values 0 and 1 come into play in the next step when new features are created and we go to symbolize the features.

Figure 1 This is the domain setup in the geodatabase properties

Once the domains are set up the next step is to create the new features. First a grey scale base map is added. Then in the geodatabase we created a new feature class. Figure 2 is the first window that opens when creating a new feature. This is where you name the feature and choose if it is a line, point or polygon feature. For this example we created a feature for fire hydrants and made it a point feature. Then we choose the coordinate system in this case we used WGS 1984 Web Mercator because this app is going to be dealing with the whole world because any one anywhere can add data. Then the window in figure 3 opens. This is where you match up the feature class with the domain we created earlier. Right now the box is showing the field properties for the comments field name we added but when working with the feature class there would be a choice of which domain to link the feature class to and in this case we chose the type domain which is dealing with the color of fire hydrants.

Figure 2 First window for feature creation

Figure 3 Window for linking the new feature class to
the domains

Next step is to symbolize the new feature classes. This is done by opening the feature properties and going to the symbolize tab and then categories and unique values. When you hit add values the coded values from the domain will be loaded. If this doesn't work something isn't set up right. Those values can then be symbolized in any way you like but the symbols should make sense with what the feature is displaying. Figure 4 shows the symbology properties for the fire hydrant feature where I applied different colors to the two coded values for hydrants.Figure 5 is showing how the symbology will show up in the contents side bar. The sidewalk and green space features were created the same way I have described. The sidewalk is a line feature class and the green space is a polygon feature.

Figure 4 Symbology properties for feature classes

Figure 5 The symbolized features show in the table of contents

Once the feature are complete and symbolized correctly we can go ahead and add some to the map. This is done by starting an editing session and selecting the feature you want to add. To add it click on the map and the symbol will appear. Then you can add information about the feature by clicking the attribute editor this allows you to add information like when and where the point was collected and even attached an image if you feel is necessary. Figure 6 shows the feature I created in my map in an editing session.

Figure 6 Features added to the map in ArcMap before publishing

Part 2 Prepare your enterprise geodatabase feature template for publishing

Once your mxd. file is complete and set up the way you like you are ready to publish. This is done by connecting to an ArcGIS server and publishing this mxd. as a service. We name the service how we want and it is stored in the REST location where it can be accessed for use in the VGI app. We made sure that the features in this service are accessible to anyone using the app. If they are not set up correctly the general public would not be able to add data to the app and it would be useless. We are done with ArcMap portion of the lab and now move to the online set up.

Part 3 Consuming the feature service in a web GIS application

This portion of the lab is all about setting up a website where the app will be hosted. Again as in previous labs coding was needed. We set up an HTML document, JavaScript and CSS style sheet which you can see further details on how to do this in my labs 3, 4, and 5. Figure 7,8,9,and 10 are the code documents created to make this app work in a web browser and also for mobile applications, set up to work with both Android and iOS devices. As in the last couple of labs we pulled stylesheets and functionalities from the Dojo and ESRI libraries however we did create a CSS file for the coloring and other styles of the webpage in which the VGI app is included.

Figure 7 The HTML document for my VGI app 

Figure 8 The first half of the JavaScript code 

Figure 9  The second part of the JavaScript file

Figure 10 The CSS file we created to style the webpage the VGI app sits in

These code files are very similar to the codes for the last 3 labs but I want to point a one thing that I don't think I did in the last labs. Figure 11 is a portion of the JavaScript code that is used to put the features we created in ArcMap in part one and published to the REST into our app. Each one is linked to separately and are even separated by what kind of feature they are point, line, and polygon. If this portion of the code was not here or not working correctly when the app opened there would be nothing in the legend and the end user would not be able to add features to the map. When done correctly the exact same symbology the features were given in ArcMap will display in the VGI legend.

Figure 11 The JavaScript for bringing in the features created in ArcMap

Once the scripts are complete the index can be opened and the app should open in a web browser.If not there is an error in the code. Once you check if it works there is one more step we did. We took our files and placed them in the live server here on campus by doing this the app can be accessed over the internet by anyone.  Once our applications were in the liver server and tested to make sure they work we went out and collected some data on our smartphones which can be seen later on in my results section.

 Part 4 Developing an independent VGI application to collect additional data

After we finished our first VGI apps we got a chance to make our own. Following the instruction for the first 3 parts of the lab I created a VGI to aid in monitoring roads, boulevards and medians. I set up point feature classes of out door lighting types and trees. The lighting types are for reporting what kind of light street lights contain. The user can choose LED, fluorescent or incandescent lighting systems. This could be used to update the cities street lights all to LEDs saving power and increasing brightness. The trees feature is created to aid in monitoring the health of trees throughout the city. The end user can select healthy, dying or dead features to place on the map so that the city knows where trees need help or should be replaced. The final feature class is the roads which contained 3 rankings, smooth streets, some potholes and bumps and needs replacing. The public can aid the city in reporting sections of road ways that need work or could be replaced as well as comment on good section of road. For all of the additions the end user can add photos and additional information about the point. Figure 12 are the symbolized features in my app as well as basic instructions for the user. 

Figure 12 Some of the symbolized feature and instruction in my VGI app 

Results

These are the two resulting apps from this lab. Figure 13 is a link to the live VGI app created in parts 1 to 3 and figure 14 a screen shot of the VGI app I created.

Figure 13 VGI app created from part 1 to 3 of the lab
Please click here to go to the VGI app (In another browser other than chrome)

Figure 14 This is what my custom VGI app looks like

Sources

Red Fire Hydrant. (2015). Retrieved from http://www.dreamstime.com

Also made use of ESRI geometry services.

Web GIS Lab 6

Goal and Background

Last week in lab we used ArcGIS API for JavaScript in creating a couple of apps that were designed for non-mobile platforms. This week we used some of those same skills but will be adding some additional skill sets to take those non-mobile apps and make mobile responsive Web GIS apps. By adding additional pieces of code to the API and DOM our apps will be responsive on smart phones, tablets and other mobile platforms.

Under this overall goal there were two specific goals for this lab. First is the creation of a search app which end-users can use to search addresses, congressional districts, info about senators and universities. The second goal was to create a query app that will return both graphical and textual census info for counties in Wisconsin. 

Methods

Part 1 Creating a search app

As in the past couple of labs Dr.Wilson gave a scenario for this weeks lab."The geospatial company which you established in Lab 4 is slowly taking root in the geospatial business. It is now time to expand your services from only desktop Web GIS applications to mobile responsive apps. In this lab, you will gain some of the skillsets required in developing mobile responsive Web GIS apps. In a year, you want your company to be large enough to be able to buy Virtual Geospatial Analytics your initial employer. You will acquire the necessary skills required in building a search app and a query app which should form part of your company’s services to clients in the near future." 

The first thing to do is to start creating the HTML and JavaScript codes that make the app functional. For this lab like lab 5 our css or style sheets will be coming from ESRI so we don't have to code those, instead we reference them in html code. Then we set the view port which is the extent that you see on a mobile device. It is important to set this so that the app displays correctly and is fully functional. Next is creating the search box where the end user will enter their search words. Figure 1 is the resulting html code for these first steps. At the bottom of the code you see a reference for a JavaScript file that we created as well as divisions between the search bar and map which will be displayed in the web app.

Figure 1 HTML code for part one of this lab. 

Once the HTML code is written the next step is to write the JavaScript file that will be referenced in the HTML. The JavaScript code is what contains all the code for the functionality of the search app. The features included in the JavaScript file are as follows.

1. The base map which in this case is a gray scale map which we have centered over a certain portion of the U.S and set a zoom extent. This ensures the map opens to this same location every time it is opened.

2.  The next portion of coding is for the search bar. In particular the congressional districts and information about the senators. This will allow the end user to search by the number of a district, the map will zoom to that district and highlight it.

3. A info template is set up so that when the map zooms to a district the end user can click on it and a box pops up which displays the district number, name of the senator as well as their party affiliation.

4. Additional search criterion are added so that universities of the U.S. are also searchable. In the same way that map zooms to districts it also zooms to searched universities and displays information including state, city and the last 4 digits of the zip code for the university.

Figures 2 and 3 are the JavaScript File for this portion of the lab which includes all the functionalities described above.

Figure 2 The first portion of the JavaScript

Figure 3 The other half of the JS file. All of this code is referenced by the HTML to give the app functionality. 

The combination of both of these files give you a mobile search app. Figures 9,10 and 11 in the results portion of my blog post show the functionalities of the app.

Part 2 Creating a query app

This portion of the lab is creating a simple mobile responsive app. The end user will use this app to see how the populations of the counties in Wisconsin compare to the population of the most populous county which is Milwaukee county. By touching the county in the mobile version or hovering over it in the desktop version the county information will display in an info window and population comparison will be displayed in a gauge.  

Just like in part one the first step is set up the HTML document for the mobile app. Figure 4 is the first portion of the HTML document where the relevant meta and external style sheets are referenced similar to part 1.

Figure 4 This is the HTML code for the first portion of part 2.

The next step is setting up the functionality of the app which is again done as JavaScript file. The functionalities we coded for include the following.

1. First is setting up the basemap which for this map is the oceans base map. Again the center and zoom extent is set and because this app focuses on the state of Wisconsin the map is centered over Wisconsin and set to a zoom level where the whole state is visible.

2. Next is linking to the selectable counties of the United States. This is done by referencing a county map server in the ESRI database. 

3. Next is setting colors for the borders of the counties. When the county is not being selected or hovered over the outline will be white. When it is being selected it will turn yellow. The counties themselves are set to gray with a percentage of transparency so that the base map is still visible through them.

4. In order for population comparisons to be performed we need to know which county has the highest population. All the other counties will be compared to this county. We write code in the JS file for the app to find the county with the max population in 2007 which in this case is Milwaukee County.

5. Next is making sure that only the data for Wisconsin is part of the query. The data set that the app is retrieving the stats from is data for the whole country so we set up a query filter which limits what data can be accessed. In the same way we want to make sure that only the counties of Wisconsin show up on the map. This is done by saying that any county in the state of Wisconsin should be displayed and no counties outside of Wisconsin.

6.Next is the gauge which shows what percentage a counties population is of Milwaukee County's population. We set up how the gauge will look with a background color of white, how big the gauge is, and what percentages show up. We have it displaying 0 to 100 percent in increments of 25. We also chose the gauge itself to be yellow and it will change instantaneously as different counties are selected. We also choose where the percent is displayed and in this case we chose to be in the middle of the gauge. Figures 5 and 6 are the JavaScript file for part 2.

Figure 5 The first half of the JS file.

Figure 6 The second half of the JS file.

A css style sheet is created that corresponds with all the functionalities and how they should appear on the app (Figure 7).

Figure 7 The style sheet for the functionalities of this query web app.

After the JavaScript and CSS files are written they need to be referenced in the HTML code. Figure 8 is the HTML code in its entirety for part 2 of the lab.

Figure 8 The HTML document for the mobile query app.

Results

For the first part of the lab creating the search app the resulting app and functionality is seen in figures 9, 10 and 11.

Figure 9 This is district 3501 you can see the district is highlighted a different color and when clicked on the text box pops up with information about the district.

Figure 10 This is using the university search functionality. I search for the University of Miami. Even when zoomed out the info box stays the same size so the info is legible.

Figure 11 This is the zoom extent that is set for when the end user searched a university. It zooms way in to the location of the school but is still visible zoomed out like in figure 10.

For the second part of the lab the app generated displays and functions as show in figure 12 and 13.

Figure 12 This is what the query app looks like when it is first opened. The counties of Wisconsin are gray but transparent enough to still see the base map. They have white boundaries. The info box and gauge are blank because no county is selected.

Figure 13 This is what it looks like in the app when a county is selected or hovered over. The county boundary turns yellow and the info box and gauge are filled with information about the county.

Sources

University feature class is obtained from Esri InfoGroup Business Locations dataset. 

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.