GEOG 865
Cloud and Server GIS

Creating a web editing application

PrintPrint

In the previous sections of this lesson, you have laid all the groundwork for allowing web-based editing of your GIS datasets. You've set up the database, prepared the maps, and published a web service that allows editing. Your final step is to make a web application that allows editing.

Web editing can be a successful or frustrating experience for users depending on how the web services and app are designed. You already did some work with your web services to make them easy to visualize and understand. For example, you made only a few layers editable and verified that a feature template was available so that users could create only certain types of features and have some of the attributes pre-set.

In the same way that you made simple, focused services for editing, you also need to make a simple, focused application. An application that has too many buttons, functions, or GIS lingo can seem over-complicated to field workers and other professionals in your organization who may need to perform web editing. Fortunately, it's a lot easier to make a simple web app than a complex web app.

In this lesson, you'll build a web editing applications using the ArcGIS development tools, which will let you build in a what-you-see-is-what-you-get (WYSIWYG) environment so you can quickly and easily create an app. For those of you that are interested in going beyond the simple functionality, ArcGIS has an "extensible framework" which means you can build your own custom widgets and themes if you have some programming knowledge. We won't cover those extensions in this class but you should know that you're not limited to the tools and templates that Esri provides. 

Creating the web map

Before we start creating the app, let's assemble the web map that we want to display inside of it. You'll do this using the same ArcGIS.com map viewer that you used in the previous lesson.

  1. On any machine, open a web browser to the Penn State ArcGIS Online Organization site and sign in using the Enterprise login with the Penn State credentials you used in the previous lesson.
  2. At the top of the screen, click Map to open the map viewer.
  3. Follow the procedure you used in the previous lesson in "Viewing your service in a web map" to add the following layers to the map:
      - Esri imagery in the background
      -CarbonCountyReferenceLayers map service on top of that
      - BighornHabitat feature service on top of everything
  4. Save this map as BighornWebMap.

Creating the web app using Web AppBuilder

Now that you've got a web map set up, you can get down to the business of creating your web app.

  1. In your ArcGIS Online website, click the Content link in the main menu.

  2. Click the Create App button, and select Web AppBuilder.

  3. Choose 2D, enter a title (e.g., BighornSheepEditingApp), tags (again at least one is required), and a summary (e.g., Bighorn Sheep editing app using ArcGIS Online), click OK.

    You will see the Web AppBuilder for ArcGIS screen, and then you'll be redirected to a webpage displaying a theme and other graphical styles.

  4. Choose a style and color scheme that you like. I'll leave it up to you to be creative. 

    The important elements live under the Map and Widget tabs. We'll start with the Map tab.

  5. Click the Map tab, and click Choose Web Map.

  6. Select the BighornWebMap you created above, and click OK.

    This will bring in all the layers that you configured in the ArcGIS.com map viewer. That's all you need to do for the map design. Now, let's add some widgets.

  7. Click the Widget tab and click Set the widgets in this controller and then the +.

  8. From the list of widgets that appears, add the Edit and Measurement widgets. Also feel free to choose a couple of others.

  9. Click Save in the bottom of the pane and then Launch. The web app will open in a new browser tab (it might take a few seconds to start). Take a quick look around.

  10. Now, go to your own local computer (not your EC2 instance), and log in to arcgis.com. Click Content, then click your BighornSheepEditingApp, and click View Application.

    From a look at the URL, you will see that your web app is, in fact, running on ArcGIS online servers via the Penn State URL (pennstate.maps.arcgis.com); however, it is still depending on services that are running on your EC2 instance. When you stop your instance, this app will not work as expected.

    If you wanted to download the source code for this app and host it on your own web server, you could easily do that using the Download link that appears by each app in your ArcGIS Online content.

  11. Test out your Web App thoroughly by reading and following along below.

    Now that you have your app created, you can use your widgets to edit some of the underlying data. If you click the Edit widget, a sidebar window will appear with the list of editable layers within your feature layer. If you select the Sightings, you can add in some new sightings and some attributes. Try it!

    You can also add a habitat area by drawing a polygon on the map (follow the on-screen instructions). You can use the controls at the bottom of the edit window to modify those changes (just like you might in the Edit window of ArcMap).

    When you're done editing, click the X in the upper right of the window. These changes will be saved back to the server version.  You could open your database and look at it in ArcMap on the EC2 instance to prove that this is the case.

  12. Take a couple of screenshots that give a tour of your ArcGIS Online app and its editing functionality, perhaps showing a before-and-after view of ArcMap on your EC2 machine that shows the Sightings layer before you make an edit via the Web App and after you make an edit in the Web App. Show how you made the app uniquely yours in design.
  13. When you have finished with the above, stop your EC2 Instance in AWS.