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 Online map viewer that you used in the previous lesson.
- 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.
- At the top of the screen, click Map to open the map viewer.
- 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 - Save this map as BighornWebMap.
Creating the web app using Experience Builder
Now that you've got a web map set up, you can get down to the business of creating your web app.
- In your ArcGIS Online website, click the Content link in the main menu.
- Click the Create app button, and select Experience Builder.
- On the ArcGIS Experience Builder page, click the Create new button.
- Create an app using the “Foldable” template. After this assignment, feel free to return here and try out any of the other app styles you find.
You will see many of the familiar components of a web app: a map, search box, title, toolbars, etc. You can click on any of these items to access its properties in the panes along the sides.
- Double-click in the title box above the map and give your app an appropriate title.
- Click on the map to activate it and access its properties.
- In the Content pane, click the Select map button.
- In the Select data pane that appears, click the Add new data link and select your BighornWebMap from the list of content in your ArcGIS Online collection. Once it appears in the Select data pane, click to add it as the Source in the Content pane. You should now see all the layers that you configured in the ArcGIS Online map viewer. That's all you need to do for the map design. Now, let's add some widgets.
- Click on the widgets (a row of icons below the search box on the map) and use the plus icon to add widgets to your app. Choose the Measurement and Edit widgets; feel free to add others if you would like.
- At the far upper-left corner, give your app a name, like Bighorn Sheep Editing App. (By default, it's called "Untitled experience.") This is how your app will be named in your ArcGIS Online content.
- Toward the upper-right of the window, click the Save button in the toolbar.
Remember to save your app regularly as you make changes.
- Click the Publish button when you are ready to view your result.
- Click the Preview button at the upper-right of the app editor. The web app will open in a new browser tab. Take a quick look around.
- Now, go to your own local computer (not your EC2 instance), and log in to ArcGIS Online. Click Content, then click your Bighorn Sheep Editing App, and click View.
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 EC2 instance, this app will not work as expected. Test out your Web App thoroughly by reading and following along below.
Now that you have created your app, you can use your widgets to edit some of the underlying data. If you click the Edit widget, a window will appear with the list of editable layers within your feature services. If you select the Sightings, you can add some new points and some attributes. Try it!
You can also add a habitat area by drawing a polygon on the map.
You can use the Edit features section of the Edit window to modify or delete features, just like you might in the editing tools in ArcGIS Pro.
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.
- Take a few screenshots that give a tour of your ArcGIS Online app and its editing functionality. Show how you made the app uniquely yours in design.
- Take some screenshots of ArcGIS Pro on your EC2 machine to show before-and-after views of the Sightings data layer to demonstrate that the data layer has changed.
- When you have finished with the above, stop your EC2 Instance in AWS.