Web GIS: Website of Colorado Water Use in 2010

Introduction

The web GIS course provided me with a number of useful skills including exposure to various coding languages, integration of web maps, and customized data layers.  The goal of the final project was to create a website that displays water usage for Colorado.  I was given an excel file with 2010 state water use and had to find additional layers to support the detailed data set.  This project gave me experience developing data layers within ArcGIS Online and ArcGIS Desktop.  The layers were then used to create a website about water use in Colorado.

Methodology

There were a number of challenges when developing the layers.  The first step involved the excel water use file and deleting fields that would not be in the analysis.  Once the data was pared down to a useable size the feature service had to be developed.  There are a lot of intricate options when converting the data layers from ArcGIS Desktop to a feature service.  One of the layers was loaded incorrectly and had to be deleted then reloaded for the feature service to display properly.  Once the layers were correctly loaded as feature services, the next challenge was to integrate the map with the website.

The data layers were developed to include pop-ups that give more information for the selected county.  There are three layers associated with the web map, each showing a different water variable.  One basic layer is total water while the others are based on calculated fields including water use normalized by population and percent water use by county.

The website was created from basic Hyper Text Markup Language(HTML), JavaScript and Cascading Style Sheet(CSS). The html code outlines the basic structure of the web page (Figure 1). The JavaScript code determines the functionality of the interactive map (Figure 2). The CSS coding allows the various parts of the web page to have specific styles (Figure 3).

• 

  Figure 1. HTML code snippet

• 

  Figure 2. JavaScript code snippet

• 

  Figure 3. CSS code snippet

Results

Below are images of the website displaying some of the functionality. Figure 4 is a screenshot from the web page to show how the buttons on the side, specifically the layer tool, can be expanded and collapsed. Figure 5 shows an example of one of the customized pop-ups that each layer possess.

• 

  Figure 4. Website screenshot showing the layer tool with the three layers.

• 

  Figure 5. Website screenshot showing the customized pop-ups for the layer.

Conclusion

This project was a great tool to expand my coding skills to include more advanced map components.  Some of the functionality included drawing lines and polygons on the map frame to get a scale reference.  Some of the more interesting features included button toggles to prevent cluttering around the map frame.  Developing these unique features included a lot of trial and error.  A great resource was the ArcGIS API for Python which allowed me to integrate more challenging code into my website.

Skills

• Basic Programming
• GIS Analysis
• Cartography and Graphic Design
• Spatial Data and Algorithms