GEOG 455: Web GIS

Wednesday, October 25, 2017

Lab 4: Basic HTML, CSS, and JavaScript

Introduction

The purpose of this lab was to build two simple webpages using Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript. This was done using Notepad + + and referencing different aspects of the webpage (HTML for functionality, CSS for aesthetics, and JavaScript for dynamics). Part 1 of this lab was focused on building a "test page" to get familiar with how the three pieces work together. In part 2, the goal was to build a webpage for a hypothetical GIS company. The page had to contain the following:

The name of the company
A company logo
Useful links for end-users/clients
Link to Natural Disasters Web App created in Lab 3
Links to two other Web Apps with preview images
A list of six services that the company provides
A website search bar

Methods

Part 1

For part 1 of this assignment, the goal is to become familiar with different aspects of a webpage and how to code them. Start by opening a new document in Notepad + +. Label the document as an HTML code by typing <!DOCTYPE html> in the first line. Save the document in the appropriate folder as an .html file, give it an appropriate name. Now Notepad + + will know to use html syntax for this document. Next, enter the code shown in figure 1.

Figure 1: Create tab head for website.

The <head> tag creates the websites tab so that when an end-user has the website opened in their browser along with others, they can refer back to the tab which will read "My Test Page" and will be able to navigate back to your website. The <link> tag connects this HTML code which contains most of the webpage's content, to a CSS script that will be created a little later.

Now that the tab title has been created, enter the code shown in figure 2 starting with the <body> tag.

Figure 2: Create header for body.

Using the <div> tags compartmentalizes the webpage and allows the programmer to divide the page into smaller workable sections. The <img> tag places the UWEC logo (taken from the same folder used to store this .html file) in the top right corner of the webpage. The height, width, and align parameters allow the programmer to adjust those image properties. The next three lines in figure 2, serve as the webpage's heading and subheadings (see figure 3). The <h1>, <h2>, and <h3>

tags adjust the size of the heading and subheadings text.

Figure 3: Webpage heading.

Now that the top of the website has been built, the body of the page is next. For this section, start off with a <div> tag to place the following paragraph tags (<p>), shown in figure 4, within the body of the page instead of the heading. Give this divider tag an id = main statement. This will be referenced for style settings of this section in the CSS code.

Figure 4: Building main body text and search form.

In figure 4, there are two lines of text, denoted by the <p> tags, that will read "This is the result of my first HTML code"and "Tell me what you think about my website by writing a sentence in the input form". Then, using the <form> tag, create a search bar (made of a submit button and input box) as shown in figure 4.

The next segment of this code will incorporate an unordered list, using the <ul> and <li> tags shown in figure 5. The <ul> tag creates an unordered list while the subsequent <li> tags create bulleted list items.

Figure 5: Create an unordered list.

Start by creating a new paragraph, bolding the text "These are my hobbies". The <strong> command creates bold text. Add a comment below this (shown as green text in figure 5) as a reminder of what the following code does, then list six or so hobbies.

Next, create a large separation in the content by using the <p>&nbsp</p> tag shown in figure 6. Add some text in a new paragraph that explains your excitement for coding. Attach a hyperlink to the UWEC Geography & Anthropology department directly following that. Give the hyperlink a display label of "Web GIS". Lastly, to finish off this section, add another <div> tag with an id="resultsBox" statement. This will be referenced later using JavaScript to create a text box in that location.

Figure 6: Create new section of webpage with link.

To get familiar with adding images to a webpage, practice by starting with a comment (figure 7). Again, commenting when coding helps the programmer to remember what each part of the code is doing, which helps when revising and/or debugging the resulting webpage. Then, place a new paragraph in the code describing the picture about to be placed into the webpage. The picture will be a thumbnail image of the Web App created in the last assignment, Lab 3. It would be helpful to provide a link for the end-user to actually visit the working web app, so include a link to the application as well. Now, the main body of our page is complete, so throw in a closing </div> tag to finish it off (see figure 7).

Figure 7: Placing a picture and link to Natural Disasters web app created in lab 3 into body of webpage.

We're almost done with the HTML for this webpage, but first a footer displaying temporal relevance of this webpage and credits for the code format will be added. Start with another <div> statement and add text with today's date on it. Create a large separation using a <p>&nbsp</p> tag and lastly a link to the resource this code was extracted from. Always cite your sources (see figure 8).

Figure 8: Add footer content.

Finish this code by closing the </body> and </html> tags, ensuring to line them up with their respective opening tags (see bottom of figure 9).

Figure 9: The (almost) finished HTML code for the webpage.

Double-click this .html file in the folder you saved it in and view your webpage (figure 10).

Figure 10: Resulting webpage thus far.

Although, the webpage is coming along well and there is a good amount of content, the page looks very bland. Now, we will employ CSS code to give color to the webpage.

Start by creating a new file in Notepad + + the same way you did before, only this time you will save it in your folder as a .css file. Write a comment at the top of the code that says "Overall design". Begin designing the body of the page. Choose a background color and "font-family" (CSS will pick a font for you). Since we're coding in CSS language, the syntax is a little different than HTML (see figure 11).

Figure 11: Creating a style sheet.

Now, code all of the aesthetic settings of the page divisions that were made in the html code. These sections include:

Wrapper
Header
Main
Footer
Images
Results Box (soon to be coded with JavaScript)

Figure 12: Setting aesthetics for different segments of the webpage based on <div> id.

There are many different settings the programmer can apply to their webpage, as seen in the image above. In order to apply these settings to your HTML code, save this CSS file and re-open the HTML file created earlier. Add a statement underneath the <title> tag to connect to the CSS file (figure 13).

Figure 13: Connecting the CSS file to the original HTML code.

Much like the hyperlinks to the UWEC Geography & Anthropology site and your Lab 3 web app embedded in the HTML code, enter a <link> statement with the file name of the CSS sheet that's stored within the working folder. Visit the webpage and view the changes that adding this CSS file made to your webpage (figure 14).

Figure 14: Webpage with CSS styling.

That's more like it! Notice in figure 14 that the UWEC logo in the top right corner and the thumbnail image at the bottom have a black border around them. Also notice the blue heading, beige background, and (unfinished) results box which currently looks like two lines above the caption for your web app thumbnail. This will be filled-in by creating and linking a JavaScript file to the original HTML.

Open yet another new Notepad + + document and save it in your working folder as a JavaScript file (.js). Give it a conventional name to be easily referenced in the HTML code. Start by creating a function called "writeResults" (see figure 15).

Figure 15: JavaScript code that will display the function writeResults' associated text.

Within the function shown in figure 15, there are variables (var). These tell the function how to run, and in this case, create a text box and place whatever the input of the text parameter is when the function is called (see bottom writeResults function). Once again, save this JavaScript file and reference it in the original HTML code (figures 16 and 17).

Figure 16: Placement of results box in webpage.

Figure 17: Calling the JavaScript function to actually display the text box where it was placed in figure 16.

With that last bit, this web site is complete for now. There is always room to add more to this webpage, however, for the purposes of understanding website building basics, this exercise has done its job.

Figure 18: Results box in webpage.

Part 2

Now that we have the basics of building a webpage with HTML, CSS, and JavaScript down, build your own webpage that meets the criteria listed in the Introduction section. Figure 19, 20, and 21 show the CSS and HTML code, and the resulting webpage for this part of the assignment.

Figure 19: Finished CSS code for ScienceWhere GIS page.

Figure 20: Finished HTML code for ScienceWhere GIS webpage.

Results

Figure 21: Resulting ScienceWhere GIS webpage.

For the most part, the layout of the hypothetical ScienceWhere GIS webpage is the same as the test webpage created in part 1 of this lab. Like the site search bar and footer text were repositioned to fill more space; adding a few align parameters in their <div> tags was all that was needed for that. Another thing that was different was using an ordered list instead of an unordered one like that made in part 1. The only change that was required to perform this action was using a <ol> tag instead of a <ul> tag. The most obvious change to this website versus the test site is the color, but again, some simple changes to the CSS code were made to create a different feel for this site.

Discussion

Overall, I think I learned quite a bit about HTML, CSS, and JavaScript fundamentals with this lab. Although rudimentary, I'm fairly proud of the sites I created. I still acknowledge, however, they could use some serious work. Perhaps adding more JavaScript dynamic aspects to the page would create a better use of space on the page, as well as: multiple tabs, objects, and colors. For what it's worth, using HTML, CSS, and JavaScript to create a webpage really helps to understand the nuts and bolts of how webpages function, are accessed, and created.

Tuesday, October 10, 2017

Lab 3: Using Web AppBuilder for ArcGIS

Introduction

For this lab, the goal is to utilize the Web AppBuilder service for ArcGIS through scenarios. The first scenario helps incorporate XYZ concepts when using the service. The first scenario says that the student has been employed at a geospatial analytics company and is tasked to build a web app for viewers to see historic natural disasters (hurricanes and earthquakes in this case). The requirements for the application are as follows:

Provide pop-up windows for earthquakes and hurricanes.
Set the entire U.S. as the opening extent.
Establish bookmarked locations for predefined areas.
Allow users to compare attributes for selected earthquakes.
Allow users to query for features based on attributes.
Display appropriate logo, title, subtitle, and links in the application's banner.
Allow users to build elevation profiles within earthquake prone zones for earthquake potential risk analysis.

Methods

Section 1 - Design Web AppBuilder and initial widgets

To start this lab, the student navigated to ArcGIS Online and logged in with their credentials. Then, selecting Create > Using the Web AppBuilder option from the Content dropdown menu, a new web app was created. The title given to this app was Natural Disasters of the United States_Student'sLastName (see figure 1).

Figure 1: Create new web app.

Next, the data from the previous lab was used for this application. The Map tab in the developer window was selected and the Natural_Disasters_Student'sLastName map was chosen (steps 1, 2, and 3 in figure 2).

Figure 2: Choose Natural_Disasters_Student'sLastName from selections.

Then, under the Theme tab, a Theme, Style, and Layout were chosen. I selected Foldable Theme, Green as the style, and the first layout option (see figure 3).

Figure 3: Choose theme, style, and layout for web app.

Once the layout was chosen, widgets were added to the web app. This was done by selecting the Widget tab in the developer window, Widget 1, and Basemap Gallery (see figure 4).

Figure 4: Select widget for Widget 1.

The same steps for adding a widget were repeated two more times to add a Measurement and Bookmark widget. The default bookmark widget needed some revising however, so when hovering over the widget, a pencil icon displayed. This was clicked to Configure the Widget (see figure 5).

Figure 5: Configuring a widget (measurement widget shown).

Two bookmarks were configured for this app. One was titled Western States and the other, Eastern States. Either bookmark focused on their respective sides of the country as an efficient way to navigate throughout the app. Once the titles, thumbnails, and extents were set for each book mark, they were added to the widget by clicking OK (see figure 6).

Figure 6: Setting title, extent, and thumbnail to bookmark location.

Then, the Attributes tab was selected in order to edit the Attributes Title and Subtitle, as well as add a Custom Logo. The title was set to "Historic Earthquakes and Hurricanes", the subtitle "Designed by Student'sName", and the logo set to the UWEC logo (see figure 7).

Figure 7: Branding the web app.

After that, a Link to the UWEC Geography & Anthropology Department was added to the web app, which displays on the banner while using the app (see figure 8).

Figure 8: Adding custom link.

Section 2 - Configure additional widgets

Logging into ArcGIS Online and navigating to the web app just created was how this section started. In the Options dropdown (displayed as ellipses located on right side of app) Edit Application was selected. The web app opened and the Widget tab was selected. The widgets in the Header Controller were set (see figure 9).

Figure 9: Configure header controller widgets.

The widgets created in the last section were added to the Header Toolbar of the app. Chart, Draw, and Query were added. The chart widget needed to be configured, so under the Configure Chart window, Add New was clicked, the Map option was selected as the Data Source, and the Earthquakes feature was selected to be configured first (see figure 10).

Figure 10: Configure Chart widget.

The settings shown in figure 11 were set for the earthquakes chart.

Figure 11: Settings for earthquakes chart.

Along with magnitudes, the DEPTH_KM field was also selected and configured to read as "Depths(km)". Next, the Display fields were set. This is the data that pops-up when a user clicks on a hurricane path or earthquake point. For the earthquake display fields, Depth (km), Magnitude, and Year were set.

Part 2 - Customizing Web AppBuilder

Section 1 - Start Web AppBuilder for ArcGIS

To start this portion of the lab, the student logged in to ArcGIS Online with their credentials and under My Content selected Add Item > An application. The application was given a URL, title, and tags. Next, the app was registered so that it can be edited only with the App ID (see figures 12 and 13).

Figure 12: Register app.

Figure 13: App ID.

Once the app was registered, the natural disasters web app just created in part 1 was used as the application data for the new application.

Section 2 - Customizing the Web AppBuilder Developer Edition

This section started by importing the Elevation profile widget from the previous lab into the new web app. Then, the widget was configured. The color, among other properties, were edited to be different than the default and saved. A sample elevation profile was taken and downloaded from the app as a JPEG and exported as a CSV file to ensure the functionality of data export within the app.

Results

Link to web app

I found this application to turn out quite well and offers a lot of information to its users. It was really interesting to see the potential with this app developer. With a wide selection of widgets, data display features, and exporting/downloading capabilities, this app was easy to create, easy to use, and accessible to anyone with a computer.

Sources

ESRI Web AppBuilder
Dr. Cyril Wilson

Friday, September 29, 2017

Lab 2: Creating and Publishing Geospatial Web Services

Introduction

The goal of this lab was to get familiar with using geospatial data to create and publish web services. A web service is an application that can be utilized through the internet on a platform that allows the user access to information and sometimes the ability to edit or maintain that information. For this lab, ArcGIS Online was the platform used to create these web services.

Methods

Part 1 - Section 1:

The first objective of this lab was to publish a web service using geospatial data stored on my computer. This was done by downloading a Wisconsin transportation dataset and importing it to ArcGIS online. This service contains Wisconsin cities, counties, interstates, and highways layers that were edited in ArcGIS online to represent the data in a visually pleasing and informative manner.

Figure 1: First step to editing layer symbology.

The first step in creating an aesthetically pleasing web service was to edit the symbology. In ArcGIS Pro, the way to do this was by clicking the "Change Style" icon underneath the layer name in the map viewer.

Figure 2: Second step in changing symbology.

Next, the user would be prompted to select their layer attribute to show and the associated symbology which is presented in figure 2.

Figure 3: Setting the symbology for the layer.

Then, the user would arrive at a page much like the one presented in figure 3. Here, the user can set any and/or all of the layer's symbology properties like the symbol, symbol size and color, transparency, and visual scale range.

Figure 4: Summary page for the Wisconsin Transportation Web Service.

http://uwec.maps.arcgis.com/home/webmap/viewer.html?webmap=80535cbbccf744e1ad67e263b80b708d

Part 1 - Section 2:

The next service published to ArcGIS Online was done so by importing a geospatial data table in a comma delineated format. Once the dataset was brought into ArcGIS Online, the coordinate information was matched with the X and Y fields in the table to symbolize fire occurrences of 2004 in Wisconsin. Once this was done, the attribute pop-ups were configured to display only relevant information when the user clicks on a particular point.

Figure 5: (left) More options list for editing a feature layer in ArcGIS Online Map Viewer.

The pop-ups for this web service were configured to show the date and time of the fire when its location is clicked.

Part 1 - Section 3:

The next method used to publish a web service was connecting to ArcGIS Online through ArcMap and using a map document as the foundation for the service. The first step in doing this was to create the map document in ArcMap. For this map document, "rivers and streams" and "lakes" of Wisconsin shapefiles were used. After naming the map "Wisconsin Water Bodies", the user signs into their ArcGIS Online account, through Enterprise, in ArcMap.

Figure 6: First step to logging into ArcGIS Online.

When logging into ArcGIS Online, the user must go to File > Sign In... pictured in figure 6.

Figure 7: Sign in using the Enterprise account.

From there, the user will trigger a pop-up window, like the one shown in figure 7. For this lab, I used my enterprise account, but a normal ESRI user account works fine too.

Figure 8: For an Enterprise login, use organization credentials.

If the user is using an Enterprise login, they would be prompted to enter in their organization login credentials in a similar pop-up window to the one displayed in figure 8.

Figure 9: Check to ensure the login was successful.

Once the user has entered in their ESRI login information, the pop-up windows should close and the user returns to the ArcMap document. To ensure that the login was successful, the user can check under the File tab (see Figure 9). The user's account name should be next to the words "Sign Out-". If not, try logging in again starting at Figure 6.

Upon logging into ArcGIS Online in ArcMap, the user can share their map document as a service in ArcGIS Online. To do this, the user would go to File > Share as > Service. A Service Editor Wizard opens. When clicking through the Service Editor Wizard, the user inputs their ArcGIS Online connection type ("My Hosted Services (UW-Eau Claire - Geography and Anthropology)"), a name for the service ("Wisconsin_Water-Bodies_Service_Miller"), an item description (Summary, Tags, Description, Access Use and Constraints, and Credits as information regarding the web service), and sharing properties (Geog455Fall2017).

Next, the user ensures the successful creation and transfer of the web service by clicking the Analyze button in the Service Editor Wizard. A window at the bottom of the map document appears with all, if any, errors with the service. There are three types of error severity: High, Medium, and Low. Ultimately, it is up to the user to decide which errors to address and correct, or ignore and publish anyway. The more high severity errors the service has, the more likely something will go wrong when publishing or creating the service. Once the user has analyzed their service, click Publish. If the service was published correctly, a pop-up window will show, telling the user the good news. The user can check the status of the service by going to ArcGIS Online. The service should appear under My Content.

From there the user can edit their web service and publish it in ArcGIS Online's Map Viewer.

Part 2 - Section 1:

For this method, the service was published to the UWEC geography department's ArcGIS server. The first step was to connect to the user's database in the server. To do this, go to Add Database Connection in ArcMap's Catalog window. (see Figure 10)

Figure 10: Double click Add Database Connection to connect to user's database in server.

Then a pop-up window will open and the user will be prompted to enter their database information and credentials. (see Figure 11)

Figure 11: Enter database information and hit OK.

The user should then see their database under Database Connections. From there, a classified land use raster was imported to the database using the Right-Click > Import > Raster datasets... command for the user's database in the catalog window. Once the raster was placed in the database, the symbology for landuse classes were established. Then, using the "share as a service" feature in ArcMap the Service Editor Wizard was used again to publish the map as a service, only this time, to UWEC's ArcGIS server.

Figure 12: Raster service published to UWEC's ArcGIS server.

Part 2 - Section 2:

From there, the service was brought into ArcGIS Online using the hyperlink pictured in Figure 12, and published as a web service. (see Figure 13)

Figure 13: Web service shown in ArcGIS Map Viewer.

Part 2 - Section 3:

For this section of the lab, a web service was published to ArcGIS Online from ArcGIS Pro. The procedure for this was identical to Part 2 - Section 2, except ArcGIS Pro was used instead of ArcMap.

The user would start by creating a new File Geodatabase in ArcCatalog and copying the Chippewa Valley land use raster dataset to it. From there, the user would sign in to their ArcGIS Online account through ArcGIS Pro in a similar way to the last section. Then, the user would create a new project and connect to their new file geodatabase- adding the embedded raster file to the project. Next, the user would enter the metadata to the general tab in the raster properties. Lastly, the project was shared by going to Share > Web Layer > Publish Web Layer, and all the subsequent settings in the Service Editor Wizard would be established, analyzed, and published in the same way as the previous section.

Part 3:

For this part of the lab, a Map document was created in ArcMap and two feature class layers were imported to the geodatabase on UWEC's ArcGIS server- a Hurricanes and an Earthquakes layer. The Hurricane layer displays projected paths of all hurricanes in the Atlantic from the year 2000 and 2009. The Earthquake layer shows point locations for all earthquakes in the United States between the same nine-year span.

In ArcMap, both the Hurricanes layer and Earthquakes layer were separated into three classes, using a graduated symbology for Earthquakes and a graduated color symbology for Hurricanes. From there, the time interval setting in the layer properties was enabled and the correct column was used for the Time Field setting.

Once the time interval was established, the service was published to the ArcGIS server and then imported as a Web Service in ArcGIS Online through the Add Layer from Web function in the platform. The service was edited and cleaned up in ArcGIS Online's Map Viewer.

Discussion

Overall, there are many different ways to create and publish web services to ArcGIS Online, and I'm sure, in other various platforms as well. Depending on the user's experience with ArcGIS Online, ArcMap, and ArcGIS Pro, which method is preferred is up to the user's discretion. Personally, I thought publishing a Web Service to ArcGIS Online through ArcMap was my preferred method. This is most likely due to the fact that I'm well versed in ArcMap and connecting to ArcGIS Online from that platform, and not so comfortable with the other methods.

Each method is useful in not only being flexible with ESRI products and the different ways to publish web services with them, but also in understanding web GIS fundamentals. These include: understanding connections between the desktop interface, the university server, and ArcGIS Online. Publishing services to and from UWEC's ArcGIS server helped me to better understand the movement, storage, and exchange of data within the ESRI products I use almost everyday.

Although I was able to publish everything correctly, I did run into some issues in this lab. When I attempted to complete Part 2 - Section 1 of this lab, my student server wasn't set up properly and the service wouldn't publish to the server correctly. A new server was set up for me and I was able to publish without fail.

Sunday, September 17, 2017

Lab 1: Cloud GIS Basics

Introduction

The purpose of this lab was to practice using datasets and making story maps with ESRI's cloud-based GIS platform, ArcGIS Online. This application is particularly useful for simple spatial analyses and presenting easily accessible geographic information. With plenty of user-contributed data, the user can manipulate data available or upload their own data to the application.

Methods

Part I:

The first part of this lab was to explore and customize a web map with data from ESRI. Volcanoes, roads, and schools on Hawaii Island were used to analyze lava flow risk. This exercise was particularly useful in showing how a ArcGIS Online user can add, customize, and share a web mapping application through the platform.

Figure 1: Web Map interface.

Figure 2: Terrain layer detail.

Figures one and two show what the ArcGIS Online application looks like when using it. There are limited viewing and manipulation options for the user to experiment with in the platform. Legend organization, layer transparency, label options, visible scale range, and symbology are a few examples of activities that were carried out in the first part of this lab.

Part II:

In the second part of this lab, a story map was created using the ArcGIS Online platform. For this exercise, the user simply creates a new map, selects their basemap, and chooses a template- in this case, the "story map tour" template was used. From there, the user uploads pictures with their location information to their map. Either coordinates or an address can be used. For this exercise, photos from a UWEC department of geography & anthropology field trip to Texas were used.

Figure 3: Story Map Application.

Once the user is done uploading their pictures and information for their story map, the application can be shared either publicly or be made available to only members of a specific organization.

Discussion

This platform proved to be a fairly simplistic way to disseminate spatial information and/or create story maps. A benefit of this platform was the sheer amount of information available. If an ESRI user wanted to perform a simple analysis for a project, this Web GIS platform might be a great option for them- especially if they don't have extensive training in using other GIS platforms like ArcMap, QGIS, etc. The platform also almost guarantees an aesthetically pleasing and easy-to-understand result due to the limited abilities of the site. This of course becomes one of the downsides to this platform. If a user wanted to perform an in depth analysis or perform complex data manipulations like running slope analysis or surface volume tools, this platform would most likely not be the best option.

Overall, this platform is a convenient and easy way to perform simple analyses in an online solution.

Link to Story Map: http://uwec.maps.arcgis.com/apps/MapTour/index.html?appid=c5b3df545d50410496dc4c38dee8f3a2