How to: the Montgomery Botanical Center App

The featured map this week on the website is the Montgomery Botanical Center champion trees application. Here’s an overview of how easy it was to create this application, which required no programming, using ArcGIS Online web maps and easy-to-configure application templates.

Click to view application

Step 1 – Organizing the data

We received key data from the Montgomery Botanical Center, notably the GPS locations of champion trees, photographs of each with credits, and other information like the scientific name and common name. This information was organized in a spreadsheet, which was saved as a CSV (comma-separated value) file. The crown jewel of the champion tree collection, the Barbados Silver Palm, was to be highlighted. So we added another field to the CSV so this particular tree could be symbolized uniquely from the others.

Two versions of photographs were used, one a smaller resized version for use in the pop-up and another full size version that could be opened from the pop-up thumbnail. The photos were placed at a web location and the URL to each was added to the spreadsheet. We covered a few considerations used for displaying the photos in an earlier blog post.

Step 2 – Adding data to a new map

Opening a new map, we switched basemaps from the default World Topographic (Community) basemap to the World Imagery basemap. Then dragged and dropped the CSV file onto our map. We also could have used Add Layer from File to add the CSV:

Step 3 – Configuring the layer

In our next step we configured the champion trees layer added via the spreadsheet in Step 2 above. We placed custom symbols we wanted to use (PNG files) in the same web folder as the photographs,  and used Add an Image from the Change Symbol dialog and entered the URL location of the custom symbol:

Next we configured the pop-up to display just the desired information (scientific and common name), and used aliases to change from ALL CAPS to something more user friendly:

We also added an image to the pop-up, and added a title, credits to the photographer, and added the thumbnail photo {PHOTO_TH} with a link to the larger photograph, as shown below:

This gave us the desired pop-up experience:

Step 4 – Making the custom app

After saving and sharing our web map publicly we chose a template to publish it within. We chose from among the story map templates currently found on the second gallery page:

We could have hosted the application from our ArcGIS Online account by choosing publish and then configuring it to suit, but we wanted to maintain the application on our own server, so chose download instead:

The template includes a splash screen which opens first, and offers an opportunity to deliver more information and context for the map users are about to view and explore. We crafted the graphic for the splash screen using Photoshop, then made just a few edits to the index.html to add our map via its ID, change the title, add the splash screen graphic, and splash screen text:

Click to view larger image

And here’s our final splash screen:

Click to view larger image

Step 5 – Publish the custom application

The final step was to take our customized application template and host it from our own server. The app templates are ready-to-host, and all you need to do is copy all files to a web-accessible location.

The bottom line

Using ArcGIS Online web maps and app templates, it was simple and straightforward to create an interesting customized application for Montgomery Botanical Center’s champion trees – no programming required.

View the application

This entry was posted in ArcGIS Online, Web. Bookmark the permalink.

Leave a Reply

One Comment

  1. jdbartram says:

    I found this article very useful, as I am working on a very similar project with plants and trees in our arboretum. Thanks.