GEOG 863:
Web Application Development for Geospatial Professionals

6.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 5, 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 New item.
  3. Drag and drop the Lesson 1 shapefile from the File Explorer onto the appropriate box of the dialog (or click Your device to navigate to and select the zip file).
  4. After selecting the shapefile, confirm that the create 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. Optionally, add tags that could be used to aid in discovering the layer (e.g., GEOG863).
  7. Click Save.
  8. In your list of content items, you should now see a cities item labeled as a Feature Layer (hosted).
  9. Click on your cities feature layer to open its details page.
  10. Click on the Visualization tab, then using the GUI, create some kind of thematic display of the cities data.
  11. After you’re done styling the layer, click Save Layer.
  12. To make it possible for others to view the layer without any authentication, click on the Overview tab, then choose Share > Everyone (public) > Save.
  13. Now to bring this hosted feature layer into an app, we just need to create a FeatureLayer object using the item ID:
    const 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 5, 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.