Web GIS Lab 8: Geoprocessing Services/Web Tools

Goals and Background

Methods

Part 1: Authoring and Publishing a Geoprocessing Service

Section 1: Authoring a geoprocessing service

Section 2: Run the model

Section 3: Publish the execution path of the model as a geoprocessing service

Part 2: Consuming a Geoprocessing Service in a Simple Web GIS Application

Section 1: Configuring a geoprocessing app with the Web AppBuilder Developer Edition

Section 2: Deploy the app in the development server

Results

Sources

Web GIS Lab 7: Volunteered Geographic Information (VGI)

Goal and Background

Volunteered geographic information (VGI) allows the general public to voluntarily provide geographic data by giving them access to tools that allows them to generate this data. Instead of hiring individuals to collect data, a web GIS application can be developed that will allow the public to collect information by their own free will. This is referred to as user-generated content. It is a useful method for collecting various types of data which may not have been collected by only a few hired individuals.

In this lab, students will develop a web GIS application which will allow the public to collect geographic data and upload it to the application. Students will complete the following tasks:

1. Author a map document to support feature services and web editing
2. Prepare an enterprise geodatabase feature template for publishing
3. Consume the feature service in a web GIS app

Methods

Part 1: Author a Map Document to Support Feature Services and Web Editing

Section 1: Create attribute domains and subtypes

Domains and subtypes are created for the fire hydrant (point), sidewalk (line), and green space (polygon) features that will be collected through the VGI app. This process will be completed in ArcMap. Students must first connect to their personal enterprise geodatabase on the ArcGIS server. in the database properties, domains can be created

Section 2: Create feature templates for VGI attributes to be collected

Section 3: Create feature attachments, define layer renderer and symbology

Section 4: Add features to the map document

Part 2: Prepare Your Enterprise Geodatabase Feature Template for Publishing

Section 1: Prepare the map document and connect to ArcGIS server publisher

Section 2: Publish a map service with feature access enabled

Part 3: Consuming the Feature Service in a Web GIS Application

Section 1: Develop a user interface for VGI data collection

Section 2: Fine tune the template picker to be responsive in smart phones

Results

Part 1

Part 2

Part 3

Sources

Web GIS Lab 6: ArcGIS API for JavaScript 2: Mobile Responsive Apps

Goal and Background

In lab 5, students used ArcGIS API for Javascript to create non-mobile platform applications. Using the skills developed in lab 5, students will construct mobile responsive Web GIS applications in this lab. Certain pieces of code need to be utilized that will allow the application to respond well on mobile platforms.

The main goal of this lab to is for students to build upon previously developed coding skills and to also teach students how to make Web GIS applications responsive on mobile platforms. Students will complete the following in this lab:

1. Develop a search app that will allow users to search addresses, congressional districts, information about senators, and universities
2. Develop a query app that will return graphical and text census information for Wisconsin counties

Methods

Part 1: Creating a Search Application

Section 1: Create a search app for addresses, congressional districts, and senator information

> The first step is to use Notepad++ to create an HTML document. An HTML tag must be inserted that will tell the browser to read from a left-to-right direction. The ESRI stylesheet must also be referenced. Next, for the app to be responsive on multiple platforms, the head tag should contain the following meta information: viewport for iOS devices and apple mobile web responsiveness, and chrome for Android. A title and references to the claro and ESRI style sheets should also be included. A style can now be written for the map that will fill the entire webpage and one for the search widget box. At this point, the document can be saved and closed out of for the moment.

>  The next step is to use Notepad++ to create a JavaScript document. Import the map, search, FeatureLayer, and the InfoTemplate from the Dojo library and make the DOM (HTML page) ready. Create a function with four definition parameters that correspond to the four modules that were just imported. Next, create a map function and assign a new map object to this variable with properties for a basemap type, center, and zoom. Create an s variable and assign it a new search object with properties and their respective values for enableButtonMode, enableLabel, enableInfoWindow, showInfoWindowOnSelect, and map. Create a sources variable and assign it the results of the sources.push objects that will be created later. Create the first sources.push object that should have a feature layer property and an assigned property value of a congressional district service hosted by ArcGIS server. Define the object properties and their respective values next. After this, a similar sources.push object is created to use a service of U.S. senators names and locations. At this point the JavaScript file can be saved and closed out of.

> Reopen the HTML document that was just created. On a new line, reference the compact build of the ArcGIS API for JavaScript and the JavaScript file that was just created. Finally, create the container for the map and the search widget, and create a <div> element for the search widget box and one to hold the map. Close the <body> and <html> and save and close the document.

> The HTML and part of the JavaScript coding for this section can be seen below (Figures 1 and 2).

Figure 1: Resulting HTML code from part 1 section 1

Figure 2: Part of the resulting JavaScript code from part 1 section 1

Section 2: Modifying the search app to reference a different service

> The same search app code will be used in this section. However, students will replace the senator service with a universities service that students will create first before utilizing. Using a feature class of U.S. Universities, students will publish a universities feature service to the UWEC Geography ArcGIS REST Server and configure the relevant search fields so that users can search for a university and its location along with other information.

> First, students must connect their enterprise geodatabase in ArcMap and import the universities feature class into that geodatabase. From there this feature class can be added to the map and then published to the REST Server in each students' personal folders.

> Copy and paste the HTML and JavaScript documents from section 1 and rename them. Open the JavaScript document and remove the senators feature service URL and replace it with the universities URL. Change the property values to accordingly and adjust the infoTemplate values to reflect the relevant fields of the universities feature service. Save the document and close it.

> Open the renamed HTML document and reference the renamed JavaScript document. Save and close the document. The replaced JavaScript coding for this section can be seen below (Figure 3).

Figure 3: The universities JavaScript code that replaced the senators code in part 1 section 2

Part 2: Creating a Query Application

> In this part of the lab, students create a simple mobile responsive query app that will allow users to see how each Wisconsin county's population compares to the highest populated county in the state.

> Using Notepad++, create an HTML document and start by entering the relevant meta information and external stylesheets. The document and be saved and closed for the moment. The body will be coded later.

> Using a new Notepad++ document, the JavaScript will be developed. Import the required modules from the Dojo library and DojoX sub-library which is used to add additional functionality to the display of the query result. Create an app variable and assign it a null {} value. The value of the null object is obtained from a service of demographic information for the U.S. which will take advantage of the Wisconsin component of the service. Next, create a countiesUrl variable and assign the aforementioned service to it. Create a stateList variable and additional variables for the query definition, fields that records will be extracted from, and so on. Create an hColor variable and assign it a hexadecimal color, and create an hOutline variable and assign it a simple line symbol class.

> The query task must now be initialized. Create a popQueryTask and assign it the value of the ESRI service previously referenced. Also create popQuery and statDef variables, and configure three query stat definitions that will return end-user desired records. Next, develop the query filter for string, number, and geometry and call the execute method for the query. Create a layer to show the query result and declare an object that will create the resulting graphic layer.

> Set a definition expression so that only Wisconsin counties will be displayed. Create the analog gauge and declare a function called showInfo with an event definition parameter and arguments that will display the graphics and gauge. Following this, a function is declared to create the gauge and an object is created that will give a physical configuration and operational functionality to the gauge. Continue to design the gauge and write an expression to position the gauge within the app where it will not obstruct the Wisconsin graphic.

> The JavaScript file can be saved and closed. Styling for the map will now be developed for the map, text, gauge result, county result, and the margin for the webpage in a CSS file.

> Return to the HTML document and reference the JavaScript and CSS files that were just created. Next, the code for the body of the HTML page will be written which will determine how the query app will be displayed on the webpage. Save and close the document.

> The coding for the HTML, CSS, and part of the JavaScript documents can be viewed below (Figures 4-8).

Figure 4: Resulting HTML code in part 2

Figure 5: Resulting CSS code in part 2

Figure 6: Top section of resulting JavaScript code in part 2

Figure 7: Middle section of resulting JavaScript code in part 2

Figure 8: Bottom section of resulting JavaScript code in part 2

Results

The resulting app from section 1 of part 1 can be seen below (Figure 9). End users can pan and zoom in and out, but more importantly, they can search for an address, congressional district, and/or senator. When either of these search options is selected, the end user enters the appropriate search into the search box, and when a result is returned, it zooms into that geographic location.

Figure 9: Screenshot of the result from section 1 part 1

The resulting app from section 2 of part 1 can be seen below (Figure 10). The functionality of this app is exactly the same as in section 1. However, instead of senators, end-users can now search for universities within the U.S. where once a university name is entered, it will take the user to that location and display the university's name, street, city, zip code, and state.

Figure 10: Screenshot of the result from section 2 part 1

The resulting app from part 2 can be seen below (Figure 11). The app opens up to the extent of Wisconsin where Wisconsin counties are overlaid on a basemap. End-users can pan around the map and zoom in and out. More importantly, users can hover the mouse pointer over any county, and that county's border will be highlighted yellow and will display the county's name and population (2007). Also, below this information, a gauge displays that particular county's population as a percentage to the most populated county in Wisconsin (which is Milwaukee county at around 927,000 people).

Sources

University feature class:
Esri Demographics. (n.d.). Retrieved November 15, 2017, from http://doc.arcgis.com/en/esri-demographics/data/business.htm

CongressionalDistricts (Feature Server): 

ArcGIS REST Services

US_Senators (FeatureServer):
ArcGIS REST Services

Census (MapServer):
Bureau, U. C. (n.d.). Census.gov. Retrieved November 15, 2017, from http://www.census.gov/  

Web GIS Lab 5: ArcGIS API for JavaScript 1

Goal and Background

ArcGIS API for JavaScript allows for the creation of high-performing web mapping applications that includes information such as terrain, basemaps, imagery, and features. The API makes it simple for end users to access the full range of capabilities available in the ArcGIS platform. The apps can be used on both mobile devices or desktops.

The goal of this lab is for students to how to use the ArcGIS JavaScript API to incorporate GIS services into a website. At the end of the lab, students will be more familiar with writing JavaScript codes in developing applications, especially using the JavaScript API for creating Web GIS applications.

In this lab, students will complete the following:

1. Create a basic Web GIS mapping app
2. Build a Web GIS app with operational layer functionality
3. Fine tune an application popup window and add a scale bar

Methods

Part 1: Create a Basic Web GIS Mapping App

In this part, students will:

     > Set up a basic HTML and JavaScript document
     > Reference the ArcGIS API for JavaScript in the HTML document
     > Use a streets basemap from ArcGIS Online
     > Specify the map scale and center point
     > Display the map full screen

Students must create a Lab5 folder in their personal folders in the development server where all work will be saved. Using Notepad++, both an HTML document and a JavaScript document will be created.

In the HTML document, an external CSS style sheet (claro) and ESRI's style sheet for web maps is referenced. The claro theme is a style sheet for the display of web GIS applications while ESRI's style sheet is used to style feature on a web map. The latest 2D version of ArcGIS API for JavaScript is also referenced.

After the code is entered into the HTML document, the JavaScript code will now be written which will implement the Web GIS app. Connection to the Dojo library must be made first to import and access modules for the map. Next, the center coordinate, zoom level, and streets basemap map type is setup for a new map object.

Once the JavaScript document is created and saved, it must be referenced in the HTML document. The code for both documents can be viewed below (Figures 1 and 2).

Figure 1: Part 1 HTML code

Figure 2: Part 1 JavaScript code

Part 2: Build a Web GIS App with Operational Layer Functionality

Section 1: Develop JavaScript Methods to Display Tree Species and Attributes

Students will create an app that displays tree species and their attributes for the city of San Francisco. To create this app, an HTML document will host the app, JavaScript methods will be developed to display the feature service attributes, and an internal CSS and JavaScript file will be used.

Using Notepad++, an HTML document is created to define the web page of the app. An external stylesheet from ArcGIS and the InfoWindow.css file (provided to students) are both linked. After this, enter the code to link the CSS styling sheets. Next, the styling properties for the map are coded.

After the HTML document, a new Notepad++ document is used to write the JavaScript code. Enter the 'require' command to access modules for dojo DOMs, dojo string, myModules, and some ESRI utilities. A new Map object is created with various properties, and a new InfoTemplate is coded to display the popup content of a feature in the app. Declare a 'featureLayer' variable that will reference a feature service of streets in San Francisco.

After the JavaScript file is written and saved, it must be referenced in the HTML document that was just created. The ArcGIS API for JavaScript must also be referenced. The code for both of these documents can be viewed below (Figures 3 and 4).

Figure 3: Part 2 Section 1 HTML code

Figure 4: Part 2 Section 1 JavaScript code

Section 2: Feature Service Creation and Development of a Web App for Eau Claire Schools

A feature service must be created from schools in Eau Claire and published to the UWEC ArcGIS Server REST. Also, add a predefined ESRI basemap and configure a pop up window for the service.

Copies must be made and renamed of the HTML and JavaScript files created in the previous section. A feature class containing the name, address, and elevation of the Eau Claire schools is created in ArcMap and saved to the UWEC enterprise geodatabase. Then it can be published to the server.

The copied and renamed JS file can now be edited with the following tasks:

     > Reposition the basemap to Eau Claire County using correct coordinates
     > Replace streets trees service with the EC_Schools feature service that was just published
     > Configure the popup so that the desired attributes in the popup info window is displayed when each school is clicked in the app

The JavaScript code for this section can be viewed below (Figure 5).

Figure 5: Part 2 Section 2 JavaScript code

Section 3: Fine Tune an Application Popup Window and Include a Scale Bar

A scale bar will be added to the map application and the popup window will be widened so that the text of each attribute is displayed on one line.

In the JavaScript file that was just created, the required dojo dijit module for a scalebar must be added. The function definition parameter that will call the scale bar must be included as well. A new Scalebar object with property values for 'map' and 'scalebarUnit' is added as well.

To change the size of the info window, the very last block of code is changed from 180, 75 to 250, 75.

Part 3: Develop a Simple Routing Application

A simple app is developed that finds routes between two or more points. The app will have the following features:

     > Click on the map to add stops to the route
     > When two stops are added, a route will be calculated
     > Adding subsequent stops on the map will extend the route

Using Notepad++, an HTML document is created and references are made to 'ESRI' and 'claro' external style sheets. The ArcGIS API for JavaScript is also referenced for access.

Using a new Notepad++ document, a JavaScript file is also written and connected to the Dojo library. A Dojo command is entered to access the modules for map, graphic, route task, and route parameters. Several other modules are also accessed. After this, JavaScript statements are written to declare variables, develop functions, and create objects. A new Map object is created with Eau Claire coordinates.

After all of the JavaScript code is written, the file can be saved and referenced in the HTML document that was just created. The code for both of these documents can be viewed below (Figures 6 and 7).

Figure 6: Part 3 HTML code

Figure 7: Part 3 JavaScript code

Results

Part 1: Basic Web GIS Mapping App

The resulting app from part 1 can be viewed below (Figure 8). It is a simple map that features a streets basemap and allows user to pan and zoom in and out.

Figure 8: Result from Part 1

Part 2: Web GIS App with Operational Layer Functionality

Section 1: Tree Species and Attributes in San Francisco

The resulting app from part 2 section 1 can be viewed below (Figure 9). The map features a streets basemap and displays trees located in San Francisco. When the map is initially launched, it is located directly over the city. Users can then pan and zoom in and out and click on any tree. The tree address and species is then displayed in a popup info window.

Figure 9: Result from Part 2 Section 1

Sections 2 & 3: Web App for Eau Claire Schools with Scale Bar

The result of part 2 sections 2 and 3 can be viewed below (Figure 10). The app features a streets basemap and displays school locations in Eau Claire. The map is located over Eau Claire when it is initially launched, and end users can pan and zoom and out of the map. When a school is clicked on, a popup info window is displayed that features the school name, address, and elevation. A dynamic scale bar is also featured in the lower left corner that has adjustable units based on the scale of the map.

Figure 10: Result from Part 2 Sections 2 and 3

Part 3: Simple Routing App

The result from part 3 can be viewed below (Figure 11). The map features a streets basemap that is located directly over Eau Claire when launched. End users can click on multiple destinations where routes are then automatically displayed between each selected location. Users can also zoom in and out and pan around the map.

Figure 11: Result from Part 3

Sources

ArcGIS API for JavaScript information:
ArcGIS API for JavaScript. (n.d.). Retrieved November 08, 2017, from https://developers.arcgis.com/javascript/3/

EC_Schools feature class:
MapCruzin [Advertisement]. (2012, October 1). Retrieved November 8, 2017, from http://www.mapcruzin.com/geographic-names-shapefiles/#School
Custom shapefiles and GIS projects, free GIS software, shapefiles, maps, and tutorials

EC_Schools_Address:

G. (2013). [Eau Claire School Addresses]. Unpublished raw data.
Table of Eau Claire, WI school addresses

Widget_infowindow files:

ArcGIS API for JavaScript 3.22. (n.d.). Retrieved November 08, 2017, from https://developers.arcgis.com/javascript/3/jssamples/

Web GIS Lab 4: Basic HTML, CSS, and JavaScript

Goal and Background

In this lab, students are introduced to necessary languages needed to develop Web GIS applications with the ArcGIS API for JavaScript. Basic methods and syntax of Hypertext Markup Language (HTML), cascading style sheets (CSS), and JavaScript, which are all commonly used in webpage development, will be introduced and used in this lab. HTML is the standard markup language for creating web pages and applications. CSS is a stylesheet language that describes the appearance of an HTML document. JavaScript is the scripting language for web pages. Using these three languages simultaneously, students will development a functional website.

This lab is divided up into four parts which include:

1. Developing a web page using HTML tags
2. Styling your web page using CSS
3. Introduction to JavaScript
4. Building a customized webpage

Methods

Part 1: Developing a web page using HTML tags

> Open a new Notepad++ program sheet
> Define the DOCTYPE, <head>, and <title> tags; the title should say "My Test Page"
> Next, set the <body> tag which should contain the following:

• Three levels of header that describe the website
• Your name, course, and semester
• Your UWEC department information
• Your hobbies
• Last date at which the web page was updated
• Credits for part of CSS and JavaScript codes that you will use in parts 2 and 3

> Insert a <body> tag underneath the closing </head> tag

> Insert an opening <div> tag with an id="header"; enter the following child levels of header (<h1> through <h3>) where <h2> should have your first and last name, course number, and semester; close the </div> tag after <h3> (Figure 1)

Figure 1: First block of HTML code

> Start a new paragraph by entering a <p> tag and type the following in italics, "This is the result of my first HTML code"; create another <p> tag and type the following in bold, "These are my hobbies"
> Next, we will create an unordered list of hobbies; enter an unordered list opening tag <ul> right after the comment; list six of your own hobbies within the child list <li> item tag; close the </ul> tag after your list of hobbies; insert a closing </div> tag at the end of the list (Figure 2)

Figure 2: Second block of HTML code

> Save the HTML page by clicking File > Save As and select 'Hyper Text Markup Language file' then navigate to the proper folder and name it 'index_YourInitials'
> After saving, create six non-breaking space paragraphs <p>&nbsp;</p> where a picture will be inserted in part 2
> Enter a <div> tag with an 'id' which will display the last date the website was updated; enter a final <div> tag with a footer 'id' which will display the credits and also a source reference link 'href' to Creative Commons website
> Finally, close the </body> tag and the </html> document (Figure 3)

Figure 3: Third block of HTML code

> Save your document and launch it in a browser; it should look like the one below (Figure 4)

Figure 4: Result of part 1 HTML code writing

Part 2: Styling your web page using CSS

Section 1: Styling the various sections of a webpage

> We will now improve the display of the web page by styling it with CSS
> Open up a blank Notepad++ document; enter a comment on line 1 that says "Overall Design"
> Enter a body{ selector and give it 'background-color' and 'font-family' properties; close the body element with a '}' (Figure 5)

Figure 5: First block of CSS code

> Hit 'Enter' to create a space and insert a #wrapper{ selector and its width, margin, and background-color properties; close the wrapper selector with a '}' (Figure 6)

Figure 6: Second block of CSS code

> Type in a #header{ selector and its properties as shown below (Figure 7)

Figure 7: Third block of CSS code

> Hit 'Enter' to create a space and insert a #main{ selector with 'background-color' as '#fff' and a 'padding' of '1em'; insert a #sidebar{ and its properties below the #main id selector (Figure 8)

Figure 8: Fourth block of CSS code

> Insert a #footer{ selector and its properties below the #sidebar selector; next, insert a div#footer a{ selector and property for the link in the footer of your web page (Figure 9)

Figure 9: Fifth block of CSS code

> Save the file as a 'Cascade Style Sheets File' and name it 'styles_YourInitials' in the proper folder; close the CSS file you just saved

> For the stylesheet to work in the HTML page, we have to link the CSS file to the HTML document in the <head> tag; open the HTML file you created in part 1 and insert a <link> tag under the <title> tag and reference the 'styles_YourInitials' CSS file (Figure 10)

Figure 10: Linking the CSS file to the HTML file

> Continuing to work in the HTML document, format the second <h3> header tag so that it is on the same line as the first <h3> header tag (Figure 11)

Figure 11: Formatting the <h3> tag

> Insert a <div id> for the wrapper directly below the start of the <body> tag; insert a <div id> for the main styling of the body of the HTML document below the header <hn> divs (Figure 12)

Figure 12: <div id> for the wrapper and main in the HTML document

Section 2: Adding forms to an HTML document

> In this section, students create a simple form along with a submit button to allow end-users of the webpage to be able to leave comments. A <form> tag is inserted with a simpleForm id in the HTML document. The form is labeled "Input" and a simpleSubmit id is inserted afterwards. The form is then closed with a </form> tag (Figure 13).

Figure 13: HTML code for the simple form and submit button

> The webpage is now further improved by adding a picture of the Web GIS app that was developed in lab 3. A link to that app will be included as well so that end-users can examine it.

Part 3: Introduction to JavaScript

Results

Part 1: Developing Web Page Using HTML Tags

The resulting web page from part 1 can be viewed below (Figure 14). This web page is at its very basic form and has very little functionality and no styling.

Figure 14: Result from part 1 

Part 2: Styling Web Page Using CSS

The results of incorporating CSS into the HTML page can be viewed below (Figure 15). The web page is still very basic with little functionality, but its appearance is much more attractive.

Figure 15: Result from part 2

Part 3: Introduction to JavaScript

The results of incorporating JavaScript into the HTML page can be viewed below (Figure 16). While it is still a simple HTML, it now has increased functionality and the end result looks much more attractive than it did after part 1.

Figure 16: Result from part 3

Sources

UWEC Website (logo):
University of Wisconsin-Eau Claire. (n.d.). Retrieved 2015, from http://www.uwec.edu/

Sylvia Richardson of Girl Develop It via Github (2015):
Richardson, S. (n.d.). Girl Develop It. Retrieved 2015, from https://github.com/girldevelopit

Web GIS Lab 3: Web AppBuilder for ArcGIS

Goal and Background

This lab exercise introduces students to building Web GIS applications using the Web AppBuilder for ArcGIS. Students will create an application, add services, add and configure custom widgets, and finally deploy the finished application to be utilized by end-users. Although there is no coding performed in this lab, students are to think about the coding that is written in the creation of the Web GIS applications being created.

The two parts featured in this lab include:

1. Building Web GIS apps through Web AppBuilder Integrated Edition
2. Customizing Web AppBuilder for ArcGIS (Developer Edition)

Methods 

Part 1: Building Web GIS apps through Web AppBuilder Integrated Edition

Section 1: Design Web AppBuilder and initial widgets



Section 2: Configure additional widgets

Part 2: Customizing Web AppBuilder for ArcGIS (Developer Edition)

Section 1: Start Web AppBuilder for ArcGIS

Section 2: Customizing the Web AppBuilder Developer Edition

Results 

Sources

Fu, Pinde (2015)

HERE

USGS National Atlas

NOAA National Climatic Data Center

Web GIS Lab 2: Geospatial Web Services

Goal and Background

This lab introduces students to creating geospatial web services through ArcGIS Online and ArcGIS Server in which they will author and publish feature classes, raster, and an Excel CSV file via ArcMap and ArcGIS Pro.

In this lab students will engage in the following tasks:

1. Publishing feature hosted services through ArcGIS Online
2. Publishing a tiled map service using ArcGIS Server
3. Author a map document, create a feature service, and add this to a web map

*Data for this lab can be found in the Lab2_data.zip file on the D2L website; contains data for all sections of the lab*

Methods

Part 1: Publishing feature hosted services through ArcGIS Online

Section 1: Publishing a feature hosted service using a shapefile

> Open ArcMap and load the data for Part 1 Section 1 which contains Wisconsin features including cities, interstates, highways, and counties; close ArcMap

> Return to the Part 1 Section 1 folder, select all the features, and right click and select 'Send to' > 'Compressed (Zipped) folder' (Figure 1); this will create a zip file of the selected data in the folder

Figure 1: Creating a zip file

> Change the name of the folder to 'Wisconsin_transportation.zip' and be sure to not delete the .zip file extension while renaming it; now you will publish a shapefile in ArcGIS.com

> Sign in to ArcGIS Online for organizations; click on 'Content' > 'My Content' > 'Add Item' > 'From My Computer' (Figure 2); click 'Choose File' button and select the 'Wisconsin_transportation.zip' file created earlier

Figure 2: Add Item from computer in ArcGIS Online

> Enter the title 'Wisconsin transportation data service_YourLastName'; type in at least four appropriate tags; click 'Add Item' at the bottom of the window which will then publish the file as a service; once the file is published, a thumbnail will appear that should look like the one below (Figure 3)

Figure 3: Wisconsin transportation data
service feature layer thumbnail

> From here, you can view the service in the map viewer, making desired changes and edits, and share items as well.

Section 2: Publishing a feature hosted service using a CSV file

Instead of using a shapefile, we will now publish an Excel CSV (comma separated value) file. The file is titled 'WI_fire_occ_2004' and is located in the Lab 2 Data folder. The Excel sheet must be saved as a CSV file before it can be published.

> Open the 'WI_fire_occ_2004' file; save it as a CSV file and name it 'WI_fire_occ_2004_YourLastName'

> In ArcGIS.com, follow the similar procedure as in the previous section to publish the file; use the recently saved fire occurence CSV file as the input file; name it something along the lines of 'Wisconsin 2004 fire occurrence'; add at least two appropriate tags

> Under 'Locate features by:' select 'Coordinates'; under the 'Location Fields' heading for the 'POINT_Y' Field Name select 'Latitude' and for the 'POINT_X' Field Name select 'Longitude' (Figure 4)

Figure 4: Setting up the coordinates values from
 the CSV file in the 'Add an item' window

> Click on 'Add Item' at the bottom of the window to publish the service; verify the service has been published by opening the service in the map viewer

> When clicking on any fire occurrence, we only want the FIREDATE field to show; click on 'Content' > 'More Option' > 'Configure Pop-up' (Figure 5) to configure the pop-ups

Figure 5: Configure pop-ups in map viewer

> Under 'Pop-up Contents' change display from 'A list of field attributes' to 'A description from one field' and select 'FIREDATE' as the field; click 'OK' at the bottom of the window to finish configuring pop-ups

Section 3: Publishing a feature hosted service using an ArcMap document



Part 2: Publishing a tiled map service using ArcGIS Server

Section 1: Publishing a service to ArcGIS Server using ArcMap


Section 2: Consuming the map service in a web application


Section 3: Publishing a service to a Portal using ArcGIS Pro


Part 3: Author a map document, create a feature service, and add these to a web map

Section 1: Author a feature access and time-enabled service data

Section 2: Consume a feature access time-enabled service




Results

Result #1: Feature hosted service using a shapefile

URL: http://uwec.maps.arcgis.com/home/item.html?id=12cb4fa746504ba588d833e8f9d3c469

The end product 'Wisconsin transportation date service_Jeffers' feature hosted using a shapefile can be seen below (Figure ):

Figure : Wisconsin transportation data feature hosted
service that was created using a shapefile

This is what the service looks like when it is opened in map viewer on ArcGIS Online. From here, users can perform a number of task such as editing and customizing the map layers, adding other layers, change the basemap, run analyses, etc., and once the map has been customized, it can be saved and shared.

Result #2: Feature hosted service using a CSV file

URL: http://uwec.maps.arcgis.com/home/webmap/viewer.html?useExisting=1&layers=8ca5b88b0c3e4da4a9fae37b7ecea16f 

The end product of the 'WI_fire_occ_2004_Jeffers' feature hosted service using a CSV file can be seen below (Figure ):

Figure : Wisconsin 2004 fire occurrence feature hosted
service that was created using a CSV file

This is what the service looks like when it is opened in map viewer on ArcGIS Online. This service offers the same functionality as described in the previous feature hosted service result.

Result #3: Feature hosted service using an ArcMap document

URL: http://uwec.maps.arcgis.com/home/webmap/viewer.html?useExisting=1&layers=c63294be4f7c42bbaecf3a61a1001a51 

The end product of the 'Wisconsin_WaterBodies_Service_Jeffers' feature hosted service using an ArcMap document can be seen below (Figure ):

Figure : Wisconsin water bodies feature hosted service
that was created using an ArcMap document

This is what the service looks like when it is opened in map viewer on ArcGIS Online. This service offers the same functionality as described in the previous feature hosted service results.

Result #4: Published ArcGIS Server service using ArcMap

URL: http://www.arcgis.com/home/webmap/viewer.html?url=http%3A%2F%2Fgeog01.uwec.edu%2Fserver%2Frest%2Fservices%2Fjefferap%2FJeffers_Chippewa_Valley_urban_Landuse%2FMapServer&source=sd 

The end product of the 'Jeffers_Chippewa_Valley_urban_Landuse' MapServer service that was published using ArcMap can be seen below (Figure ):

Figure : Chippewa Valley urban land use ArcGIS Server
service that was created using ArcMap

This is what the service looks like when it is opened in ArcGIS Online map viewer except this was accessed through ArcGIS Server as opposed to ArcGIS Online. This service offers similar functionality as described in the previous feature hosted service results.

Result #5: Published ArcGIS Online service using ArcGIS Pro

URL: http://uwec.maps.arcgis.com/home/webmap/viewer.html?useExisting=1&layers=0fdabfa9f40c467d8076b496b2f3cefa

The end product of the 'Chippewa_valley_corridor_Jeffers' tile layer that was published using ArcGIS Pro can be seen below (Figure ):

Figure : Chippewa Valley urban land use ArcGIS Online
tile layer that was created using ArcGIS Pro

This is what the layer looks like when it is opened in ArcGIS Online map viewer. The appearance and functionality is basically the same as the previous result, it was just published using a different method.

Result #6: Feature access and time-enabled service data

URL: http://www.arcgis.com/home/webmap/viewer.html?url=http%3A%2F%2Fgeog01.uwec.edu%2Fserver%2Frest%2Fservices%2Fjefferap%2FNatural_Disasters_AJ%2FMapServer&source=sd

The end product of the 'Natural_Disasters_AJ' MapServer service that was published using ArcMap can be seen below (Figure ):

Figure : U.S. natural disasters (earthquakes and hurricanes)
ArcGIS Server service that was created using ArcMap

This is what the service looks like when it is opened in ArcGIS Online map viewer via ArcGIS Server. The functionality is similar to the previous results. However, there is an added time-enabled functionality which allows users to adjust the time settings and playback of the added features.


Sources

Mastering ArcGIS:

Price, Maribeth Hughett. Mastering ArcGIS. New York: McGraw-Hill Education, 2016.
Wisconsin DNR:


Cyril Wilson:

USGS:

NOAA:

Web GIS Lab 1: Cloud GIS Basics

Goal and Background

This lab introduces students to some basic components of web maps. Students get an idea of what creating a simple web map from a "developer's" perspective is like and what its functionalities look like from a consumer user's point of view. It also introduces students to the creation of a story map which will be created using ArcGIS Online for Organizations. 

A story map tour allows a user to take a "tour" of a specific geographic location by "walking through" a sequence of photos that are linked to a map. 

There are three parts to building a story map via ArcGIS Online:

1. Create and share a web map application template
2. Creation of service for photographs and finalize story map
3. Launch the application

Methods

Building a Story Map via ArcGIS Online

Create and share a web map application template

> Sign in to ArcGIS Online by first going to https://www.arcgis.com/home/index.html and clicking on 'Sign In' in the upper right corner (figure 1); click on 'Sign in with Enterprise Account' (figure 2); type in 'uwec' and click 'Continue' (figure 3); click on 'Using Your University of Wisconsin - Eau Claire Account' (figure 4); then log in using your UWEC user name and password and you will be directed to the home page.

Figure 1: 'Sign In' home page

Figure 2: 'Enterprise Account' sign in

Figure 3: UWEC sign in

Figure 4: UWEC personal account sign in

> Next, create a new web map by first clicking on 'Map' from the home page followed by 'Basemap' and then select 'Terrain with Labels' (figure 5).

Figure 5: Basemap selection

> Zoom into Texas with Austin in the center of the map. Save the map and fill in the blanks with the following information (figure 6):

     Title: Geog 368 Texas field trip_YourLastName
     Tags: Field trip, Texas, Geography
     Summary: Field activities carried out in Texas

Figure 6: Save map

> Click on 'Save Map' to save it. Go to 'My Content' and find the map that was just created. Click on the Texas web map which will then bring you to the overview and other information about the map.

> Click on 'Create Web App > Using a Template' toward the upper right hand side. This will then reveal numerous application templates from which to choose. Select the 'Story Map Tour' from the gallery then click 'Create Web App' (figure 7).

Figure 7: Select web app template

> The information entered in earlier when the map was initially saved automatically shows up. Type in a suitable summary then click on 'Done'. Next, the Map Tour Builder will pop up (figure 8).


Create and share a web map application template

> The Texas photos must now be uploaded to ArcGIS Online. Click on the 'ArcGIS' icon on the right side of the Map Tour Builder followed by clicking on 'Create the layer'.

Figure 8: Map Tour Builder window

> After the service is created, the map will be visible on the right side of the screen with a blank section on the left side where the photos will be uploaded. Click 'Add' (figure 9) to bring up the 'Add a new tour point' window (figure 10). Photos for this map are located in the 'Lab1data' folder found on D2L. There are 10 photos in the 'StoryMapData' folder that will be uploaded to ArcGIS online to be used in the story map.

Figure 9: Add photo

Figure 10: 'Add a new tour point' window

> Click on 'Select or drop picture' and locate the folder containing the Texas photos. Select 'Photo_1.jpg' which will now appear in the window (figure 11).

> Some information needs to be added in both the 'Information' and 'Location' tabs. Click on the 'Information' tab. Open the word document titled 'Photo information' in the 'Lab1data' folder. Type in the subsequent 'Name' and 'Caption' information.

Figure 11: Window with added photo

> Next, click on the 'Location' tab. Since the photo was not geotagged in the field, the latitude and longitude will need to be entered manually. Enter the subsequent latitude and longitude in the 'Latitude' and 'Longitude' boxes (figure 12). Once this is entered, click 'Add tour point'. The photo is now added and the location appears on the map.

Figure 12: Location tab

> Follow the same procedures for the remaining photos (photos 2-10). Once all photos have been added, the application should look similar to the one below (figure 13). 

Figure 13: Story map with all photos added

Launch the application

> Click the 'Save' button at the top of the screen then click 'Share'. After the story map tour is shared, click 'Open' in the 'Share your Tour' window to launch the finalized tour.

Results

The final story map tour looks similar to figure 13 but does not feature the 'Application Configuration' buttons (figure 14). This tour can be found at the following URL:

http://arcg.is/2jDMNjr

Figure 14: Final story map tour

The tour allows user to view the photos in a number of ways including:

1. Clicking on the arrows that appear on either side or both sides of the large photo on the upper left hand side of the screen
2. Clicking on any photo in the row of small photos on the bottom of the screen (these photos also show the number of the photo in the upper left corner)
3. Clicking on the colored numbers on the map (numbers are associated with their respective photo)

When a photo is selected, the name and caption appears on the large photo itself, and a button appears in the upper right corner of the photo that allows the viewer to view a larger version of the photo by itself. The name also appears above the associated photo number located on the map. Overall, viewers can easily navigate photos of the tour from start to finish or jump around from photo to photo.

On the map, users can zoom in and out to get a good sense of where exactly the tour is located and gather a good understanding of the distances between photo locations and where they appear in respect to each other. 

Sources

ArcGIS Online: https://www.arcgis.com/home/index.html