Web GIS Labs
Web GIS Labs 2022
Lab 1
Goal and Background
The purpose of this lab was to introduce students to web maps and story maps. We worked with ArcGIS Online, learning/reviewing some basic Web GIS skills.
Methods
PART 1 SECTION 1: I was first instructed to log into ArcGIS Online, using our organization URL for the University of Wisconsin, Eau Claire. In the search option of our organization's page, I typed "Hawaii Island Lava Flow Risk". After disabling the "Only search in the UW-Eau Claire- Geography and Anthropology" button, I found the desired map by "Learn_ArcGIS". First, I observed the "View Item Details" option under the "web map information" tab. Next, after opening the map in the map viewer, I clicked on a volcano to see its pop-up, and then clicked on the resulting image to see the image details. I closed out of the windows I'd opened, and was then instructed to click on any colored area of the map. I did this to find that clicking on any zone selected the zone and opened information on it.
PART 1 SECTION 2: I opened the map in "map viewer classic". Next, in the upper right, I clicked "content", and clicked on the "Volcanos" and "Lava Flow Hazard Zones" layers to see their legend displays. I closed out of these and then clicked the "show legend" button to see another way to open their legend information. I then clicked the "content" button and unchecked the "Lava Flow Hazard Zones" box to turn it off and see the hillshade of the "LiDAR derived terrain". I then re-checked the "Lava Flow Hazard Zones" box.
PART 1 SECTION 3: I experimented with the transparency of the "Highways" layer and then changed the basemap to "Oceans".
PART 1 SECTION 4: I needed to save a version of the map for my own, so I clicked "save", "save as", saved the map in my folder on our ArcGIS Online server, and named it Hawaii Island Lava Flow Risk-Gibbs_22. I saved it under "My Contents". With the map saved as my own copy, I first examined some options for changing the symbol for "Highways", such as color, transparency, and width. I then changed the symbol to a dark grey, because I felt that it showed up well and represented roads. I then saved the map. After this, I went to the "My Content" menu of ArcGIS Online, and clicked the "share" option. From there, I clicked in the box next to Geog455Spring2022 to share it with the group.
PART 2 SECTION 1: In this part of the lab, I created my own version of the map I explored earlier in ArcGIS Online. I navigated back to the homepage and clicked "Map", "New Map" "Create New Map". I typed Hawaii in the search option to zoom to the desired area, and then panned/zoomed to the area to set the map's extent. I chose a topographic basemap, and then added the layers from the "Hawaii Lava Flow Hazard Zones by Learn_ArcGIS" map that I'd examined earlier. I then added layers: Volcanoes on Hawaii Island, HawaiiTerrain, and Hawaii Island Major Highways; all by Learn_ArcGIS. After this, I saved the map, filling in the appropriate information in the title, tags, and summary.
PART 2 SECTION 2: I renamed the "Hawaii Island Major Highways" layer "Highways". I renamed the "Hawaii Lava Flow Hazard Zones" layer "Lava Flow Hazard Zones". I renamed "HawaiiTerrain" "Terrain". I then created labels for the "Volcanoes" layer, changing the transparency to 50%.
PART 2 SECTION 3: I clicked the "Show Map Legend" Button and checked the items in the legend and hid the layer properties for "Terrain" and saved the map.
PART 2 SECTION 4: I enabled pop-up layers for "Highways". I then added the layer "Hawaii Emergency Shelters" to the map after searching for it on ArcGIS Online. I renamed it "Emergency Shelters" and saved the map.
PART 3 SECTION 1: In this part of the lab, I learned how to build a story map. I was instructed to click this link: https://storymaps-classic.arcgis.com/en/app-list/map-tour/ to take me to the classic story map page. I then signed in to ArcGIS Online with my organization's URL. I clicked "Build A Map Tour" and was taken to the map tour builder. I then selected the ArcGIS Icon and named it "Geog 368 :Texas field trip fall 2013 tour_Gibbs. I then clicked "Create the layer". After clicking "Select or drop picture", I opened my Lab1data folder and uploaded the first photo. I entered the coordinates provided with the photo for the location information and clicked "Add tour point". Then, in "settings", I gave it the "Three Panel" template and checked "Display a 'Locate' button". After clicking "Apply", I clicked "Edit me" and gave the story map the name "A tour of Geography 368 field seminar class, Fall 2013 in Texas". I then saved the map. After this, I clicked "Change Basemap" and chose the "Terrain with Labels" option. I then clicked "Settings", "Extent" and used the "Draw a new extent" tool to set the extent around the area of Austin Texas displayed in the lab and clicked "Apply". I then saved my work and added photos 3 though 10 to the story map. After this, I saved the map again and clicked "Share" and "Share with my Organization".
Results
Below is the map of the Hawaii Island Flow Risk that I created in part 2 of the lab. It displays emergency shelters, volcanoes, highways, lava flow hazard zones, and terrain of Hawaii. The end-user can view pop-ups on these features by clicking on them to learn more.
I created the story map below in part 3 of the lab. By clicking on each numbered location tab, the end-user can view the respective location that students toured and learn about what they saw and did there.
Sources:
Goal and Background
The purpose of this lab was to familiarize students with ArcGIS Online/Enterprise by having us create and publish features to these services.
Methods
PART 1 SECTION 1: First, I created a folder named Lab_2 in my student folder for Geog455. Next, I downloaded the Lab2_data.zip from canvas. I then saved and unzipped the data in my Lab_2 folder. I opened the data for Part 1 Section 1 in ArcGIS Pro and added all four of the features (cities, interstates, highways, and counties) of Wisconsin. I then selected each of the features and made a 7-Zip from them. I changed the folder name to Wisconsin_transportation_JG_22. I then signed in to ArcGIS Online for organizations, clicked the "New item" in "My Content". I chose the Wisconsin_transportation.zip file from the Part_1_Section_1 subfolder and clicked "open". I clicked "Next" after accepting the default "Add Wisconsin_transportation" option. For a title, I typed"Wisconsin transportation data service_Gibbs". I named it "Wisconsin_transportation_data_service_Gibbs and gave it appropriate categories, tags, and summry. Then, to create the service, I clicked "Save". After this, I clicked on the thumbnail, and chose "Open in Map Viewer" to examine the service.
PART 1 SECTION 2: I used the service I just published to build a cartographically pleasing map to the best of my ability. I gave it the title "Wisconsin Web Map_Gibbs" and gave it appropriate summery, description, and tags. before signing out of ArcGIS Online.
PART 1 SECTION 3: After starting ArcGIS Pro, I added Rivers_and_streams and Lakes from the sub-folder: Part 1 section 3. I then examined the attribute tables. I gave the feature appropriate titles and colors and saved it as "Wisconsin_water_bodies" in my student folder in the Q-drive. Next, I used ArcGIS Pro's option to sign in to ArcGIS Online for Organizations. In the interface, I clicked Share-Web Layer, and Publish Web Layer. I then named the service Wisconsin water bodies service_Gibbs and gave it the appropriate summary and tags. I accepted the "Feature" setting for the layer type and for the location, I chose my root folder. I clicked Geog455Spring2022 for the "Share with" option. Next, I clicked "Analyze" on the bottom of the "Share as a Web Layer" pane. I had an error message pop up, which I fixed by removing the World Topographic Map and the World Hillshade basemaps. After clicking "Analyze" a second time, there were no more error messages. I then clicked "Publish" and waited for the publishing to complete. After seeing the message saying the web layer had successfully published, clicked "My Content" in ArcGIS Online and opened the Wisconsin water bodies service in a new map. I made sure the legend was the same color as the water feature. Next, I changed the label "Wisconsin rivers and streams" to "Rivers and streams" and then I changed "Wisconsin lakes" to "Lakes".
PART 2 SECTION 1: First, I made a new project titled "PortalServ_Gibbs and saved it to my Lab2 folder. I clicked "Manage Portals" in the upper right of the ArcGIS Pro window. I clicked "Manage Portals", "Add Portal" and added the URL : https://gis.uwec.edu.portal/home (our deparment's ArcGIS Enterprise) portal. I clicked "OK" to add the portal and returned to the ArcGIS Pro viewer and changed to our organization's portal. I then signed in to the portal with my UWEC Enterprise account and added a new geodatabase connection. For the Database platform I selected "SQL Server". For the Instance, I typed geog03. For the authentication type, I typed Operating system authentication. For the database, I selected my username, and clicked OK. I then changed the name of to my last name from geog03 and opened the "Raster to Geodatabase" tool in "Geoprocessing". For the input raster, I chose the Eau_cpw2011.tif and for the output geodatabase, I chose YourEnterpriseGeodatabase and then ran the tool. I dragged the image into the map viewer to view it and opened symbology to properly display the class data with unique values. I then saved the project and opened layer properties. I clicked the General tab and clicked on metadata. I gave it the title "Chippewa Valley urban corridor GIBBS, and then gave it appropriate tags, summary, description, and credits. After this, I clicked "Cace" and "Ok" before saving the project. I then clicked "Share" on the top ribbon and then "Web Layer", "Publish Web Layer", and gave the map the title "Chippewa_valley_urban_corridor_GIBBS". After this, I gave it the appropriate summary and tags. I chose my root username in the portal folder, and then selected "UW-Eau Claire (Geography) ArcGIS Enterprise" under "Share With". To display the tiling scheme, I clicked the "Configuration" tab. I then clicked the pencil tool and under layer drawing, I clicked "Using tiles from a new cache". For tiling scheme, I clicked ArcGIS Online/Bing Maps/Google maps. I then se the min/max tile levels of detail to 10 and 17. I clicked "Analyze" to check for errors and once again removed the World Topographic Map and the World Hillshade Basemaps, and then unchecked "Ensure map is set to allow assignment of unique IDs" before clicking publish. After seeing that the map had fully published, I saved the map in my Lab2 folder.
PART 2 SECTION 2: First, went to the ArcGIS Enterprise Portal in a chrome browser. I then signed in and clicked into the "Map Image Layer" service of the Chippewa Valley urban corridor. I then accessed the service through the REST end point of the ArcGIS Server. searched within the view of the service within the REST end point and then clicked "View" in the Map Viewer.
PART 3 SECTION 1: I started ArcGIS Pro and opened a new project that I titled "natural_disasters_GIBBS" and saved in my Lab_2 folder. I connected to the lab2part3 data folder and expanded Data.gbd. I right-clicked my enterprise geodatabase and clicked "import" "feature classes" and for the input features I typed "Earthquakes, and Hurricanes". I then rand the tool. Once this completed, I dragged the the Earthquakes and Hurricanes into the map. I first symbolized the Earthquakes layer accordingly:
PART 3 SECTION 2: In this section, I opened ArcGIS Portal in a Chrome browser and added the feature service I created with "Add layer". I then configured the pop-ups for the Earthquakes and Hurricanes layers to make them more presentable by removing extra categories and changing names. After this, I saved the map, shared it, and made it public. The last thing I did in this lab was to experiment with the time-slider settings to choose the parameters I liked best.
Results:
^ This is the Wisconsin Water Bodies service I created in Part 1 of the lab.
Sources:
Fu, Pinde (2015) – HERE, Census at: \\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Earthquakes, courtesy of USGS National Atlas. \\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Hurricanes, courtesy of NOAA National Climatic Data Center.
Lab 3
Goal and Background:
In this lab, we learned how to use Web AppBuilder to create Web GIS applications. We would become familiar with methods for the developer to use to make the application aesthetic and easy to use for the end-user. For this lab, we would use the service that we created in Part 3 of lab 2.
Methods:
PART 1 SECTON 1: I first went to "My Content" in ArcGIS Enterprise Portal. Next, I clicked "Create app", followed by "Web App Builder". After this, I gave the app the title "Natural Disasters of the United States_GIBBS. I then gave the app the appropriate tags and summary and clicked "OK" to launch the ArcGIS Web AppBuilder. I then clicked the "Map" tab and "Choose Web Map". I saw the web map that I made in Part 3 of lab 2, and selected it. I then chose "Use Web Map's Default Extent" under the "Set initial extent" dialogue. After this, I gave the map the "Foldable Theme" and clicked "Save". Next, I clicked on the "Widget" tab so I could create extra widgets for the map. I clicked
Widget 1", selected "Basemap Gallery", and accepted the default settings for that widget. I then followed similar steps to add the "Measurement" and "Bookmark" widgets. After these widgets were completed, I configured the "Bookmark" widget to have 2 bookmarks. One displayed the Western U.S. States, and one displayed the Eastern States. I then changed the title to "Historic Earthquakes and Hurricanes" and added that the map was designed by me in the subtitle. I then uploaded the image provided in the lab of the UWEC logo in the "Logo" icon and added the Geography and Anthropology URL provide a link for the application. After this, I saved the map and clicked "Previews" to see what the app would look like from an end-user perspective. Next, I shared the app to "Everyone (Public)".
PART 1 SECTION 2 : I returned to the application in "My Contents" and clicked "Options", "Edit Application". I then clicked "Widget", "Set the widgets in this controller". From here, I added the "chart", "draw", and "query" widgets, and configured the chart widget. In the "Configure Chart" window, I set the "Category label" field to "Location" and then checked "magnitude" in "Value Fields". After this, I set the chart type to "Bar Chart" and gave it an appropriate color. I then followed similar steps to add a chart for "Depth_KM" and then clicked "OK" to close the "Configure Chart" window and saved the project. After this, I tested the "Chart" features I added to make sure I'd added them correctly. Next, I configured the "query" widget. and tested it to make sure I'd configured correctly.
PART 2 SECTION 1: I first signed in to ArcGIS Online and in "My Content", I clicked "New Item" and selected "Application". I was then instructed to type the URL: https://localhost:3344/webappbuilder and check "Web mapping" for "Application type" and click "Next". I gave it the title "ArcGIS Web AppBuilder", and gave it the tags: "Web AppBuilder, Hurricanes, and Earthquakes". For the summary, I typed "This is a customized Natural disasters of the U.S. app built with the developer edition of Web AppBuilder". I then saved the map and shared it as public. After this, I clicked "Settings", followed by "App Registration" and then "Register". I typed my machine name in the Redirect URI box and clicked "Add". I then typed my machine name for Redirect URI again, but had it start with http://. Next, I went into the D drive and found the startup.bat file for WebAppBuilder. In the window that came up, I typed the URL: localhost:3344/webappbuilder and hit enter. I then specified my ArcGIS Enterprise Portal URL and clicked within the browser so the "App ID" box was shown. I copied the App ID from the ArcGIS Enterprise Portal browser and pasted it in the WebAppBuilder browser box for App ID and clicked "Continue" to launch Web AppBuilder Developer Edition. I then imported the Natural disasters of the United Sates application that I'd previously created and clicked "2D" followed by "Import. I selected my application and clicked "OK". After this, I clicked "Edit" on the application to enter edit mode.
PART 2 SECTION 2: I found the "ElevationProfile" widget folder in my Part 2 subfolder and copied it. I pasted it in the client-sitemapp-widgets folder and went back to my Web AppBuilder window. I clicked "Widget", "Widget 1" and then "Elevation Profile". Next, I configured the Elevation Profile widget. To do this, I changed the properties to make it aesthetically pleasing and saved the changes to the App. After this, I switched the app to the "Previews" mode and tested the elevation profile. I chose the option to download a link to the JPEG and then clicked "Export profile data to CSV file". I then took a moment to look at the values, which I typed into the lab report. I then downloaded the application to a new subfolder that I created in my lab3 folder as a zip file. Next, I mapped my network drive to the development server at //geot03.uwec.edu\\webgis$. I entered the connection path and clicked "finish". After this, I copied and pasted the unzipped App folder into the development folder from my lab3 folder and renamed the folder "Naturaldisasters_app". I then typed the url to my app "http://webgis.uwec.edu/GIBBSJR9447/Naturaldiasters_app/index.htmlI took a screen capture for my report.
Results:
^ This is a screenshot of the functional Web GIS app I developed in the lab. It displays Hurricane and Earthquake data in the U.S. and is time-enabled so the end-user can see a time laps of these events. There is a variety of widgets such as "measure", "chart", "query", etc. to better allow the end-user to better understand and display the data.
Sources:
Fu, Pinde (2015). HERE, Census at: \\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Earthquakes, courtesy of USGS National Atlas. \\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Hurricanes, courtesy of NOAA National Climatic Data Center.
Lab 3
Goal and background
This lab was meant to teach students fundamental code to design a HTML websites. Students were also introduced to CSS and JavaScript. After following a guided lab tutorial, they were instructed to develop their own HTML website independently.
Methods
The first thing I did for this lab was to map my network drive to our Geography Web server and create a folder called Lab_4. After this, I read the scenario, which was that I was to create a website for my own hypothetical geospatial company.
Part 1: I first opened a new Notepad++ and changed the language to "HTML". I then gave it the title "My Test Page". After this, I gave it a <body> tag. In this, I used <h1> to state that it was my first web page development exercise, <h2> to type my name and class, and <h3> to type my department and university. I also used <h3> for all of the rest of the small font on my web page. Next, I created new <div> followed by a new paragraph using <p> and typed "This is the result of my first HTML code" in italics by using <em>. I then typed "These are my hobbies" and made it bold by using <strong>. I then saved the document as index_JG.html in my Lab_4 folder. After this, I previewed the Web page by double clicking its file in my Lab_4 folder. It matched the instructions, so I proceeded to make an ordered list of my hobbies by using the <ul> and <li> tags. I added a comment that read "i will now make an unordered list of my hobbies". After once again saving and previewing my document, I added 6 none-breaking space paragraphs using <p> </p>.
Part 2 section 1: I needed to give the web page some style, so I created a new CSS page in Notepad++. I gave it a body{ selector and gave it a background color and font family. After this, I added a #wrapper{ selector and set its width, margin, and background-color. Next, I added a #header{ selector and set its background color, margin, padding, and color. Once I was done with this, I saved the document as a .css file and named it styles_JG.css ---------
After viewing the web page again, I added a #main{ selector to the CSS page and set the background color to #fff. I then added a #sidebar{ selector, followed by a #footer{ and a div#footer a{ selector. Next, in my index_JG.html window, I added a "wrapper" and "main" to style the body of my code further.
Part 2 section 2: I wanted to add a button for end-users to submit search results for my page, so I added a <form> tag and above it, typed "Tell me what you think about my website by writing a sentence in the Input form". I then navigated to the link I had created in lab 3 for my first web application and opened it. I took a snip of it to be included in my current lab. I then removed the appropriate nbsp and added the image, typing near it: "And this is a picture of an application I developed with ArcGIS Web AppBuilder". I added a link near the image for the end-user to click in order to navigate to the application. I then went into my CSS document and gave the image a black border. I also observed that the image was too big to fit properly on the page so I had to resize it in my code, which also shrunk my image of the UWEC logo that I added a bit later. To fix this, I assigned each photo a class and set their parameters independently. After this was taken care of, I created a style for the results box in CSS. I then launched the web page again to review my changes to it.
Part 3: I needed to fix the squeezed results box that I'd created earlier, so I created a JavaScript function for this purpose. I declared 3 variables: "resultsDiv", "newParagraph", and "paragraphText". After this, I wrote 2 arguments to finish fixing the problem. I then used the <script> tag in my index_JG.html document to reference the JavaScript code I'd just written. I then launched the web page again to see that it had worked.
Part 4: For the rest of the lab, I needed to follow similar steps as those of the previous parts of the lab to create my own HTML web page, which I will include in the Results portion of this blog.
Results:
^This is my CSS code for my independent part of the lab after part 4.
Comments
Post a Comment