GEOG 863:
Web Application Development for Geospatial Professionals

5.1 Non-programming Options


Throughout the course, we’ve talked about using GUI-based tools whenever possible to avoid or simplify coding. In Lesson 1, we used app templates and Web AppBuilder to compose apps without writing any code. In Lesson 4, we were developing apps using code, but saw that we could greatly simplify the code needed to produce a map by doing the map development in ArcGIS Online and bringing the map into the app via its item ID.

In this lesson on layer visualization, we again have options that greatly reduce the coding burden. If you have ArcGIS Server, you can use desktop tools to visualize your layer, publish that layer as a service through your ArcGIS Server instance, then add your layer to an app as we saw in the last lesson.

If you don’t have ArcGIS Server, you can still easily handle the visualization of layers without coding. The workflow is to upload your shapefile or file geodatabase as a hosted feature layer to ArcGIS Online, symbolize the layer using the same GUI tools we saw in Lesson 1, then add the layer to the map in your code using its item ID. Let’s walk through that workflow.

  1. Sign in to ArcGIS Online.
    Recall that in Lesson 1, we created a new map, then added zipped shapefiles to that map. Here, our goal is to upload the shapefiles to AGO so that they can be manipulated as individual Feature Layer items.
  2. On your Content page, select Add Item > From my computer.
  3. Browse to the shapefile from Lesson 1.
  4. After selecting the shapefile, confirm that the Publish this file as a hosted layer option is checked.
  5. Add your name or initials to the default Title so that it will be unique.  AGO doesn't allow a service name to be duplicated within an organization.
  6. Add tags that could be used to aid in discovering the layer (e.g., GEOG863).
  7. Click Add Item.
  8. In your list of content items, you should now see a cities item labeled as a Feature Layer (hosted).
  9. Click on the Options button associated with the layer (3 dots) and select Open in Map Viewer.
  10. Using the GUI, create some kind of thematic display of the cities data. (The smart mapping tool built into AGO will probably create graduated symbols based on the POPULATION field by default. You’re welcome to stick with that.)
  11. After you’re done styling the layer, click on the More Options button beside the layer (3 dots) and select Save Layer.
  12. Now to bring this hosted feature layer into an app, we just need to create a FeatureLayer object using the item ID:
    var featureLayer = new FeatureLayer({
     portalItem: {
      id: “59d4705e7d2e48beb94faaa6b78307e7” //replace w/ your own layer ID

If you're wondering where that layer id comes from have a look at your browser window and you'll see something like :

That last part after layers= is the layer id.

A quick and easy way to test this is to open the FeatureLayer sample referenced in Lesson 4, change the way the FeatureLayer is constructed, refresh the map, then zoom out (since the map is zoomed in on North Carolina and the Jen & Barry’s data is in Pennsylvania).

Note that it is also possible to do your layer visualization and publishing to AGO from ArcMap or ArcGIS Pro. The steps involved are described in detail in the AGO help if you’re interested.