Publish an Esri Story Map Tour on your own web server with ArcMap and Microsoft Excel

A new mode of map-based storytelling is emerging. In this lesson you’ll learn how to use an Esri Story Map template to create this Photo Map tour of the Ten Tallest Skyscrapers in Los Angeles hosted on your own Internet server. The example data came from Wikipedia, so just substitute your own set of points if you’re so inclined. We’ll be using ISS from Microsoft, but you could also use Apache or any number of other web servers. We’ll use ArcMap to create our initial point layer, and Microsoft Excel to edit and format the text. If you don’t have ArcMap, Excel or access to a web server, you can still build and publish Story Maps in the hosted ArcGIS online environment using the new Interactive Builder. There’s a tutorial for that, too. Both approaches are valid, but the method outlined in this Lesson is targeted at GIS pros ready to serve Photo Map Tours and other Esri Story Maps on their own web sites.

Phase 1: Download the template. 

1. Download the Storytelling Map Tour template from the Esri Story Maps website. (Look for the Download Source Code link near the bottom of the page.)
2. Locate the file called map-tour-storytelling-template.zip.
3. Make a connection to your web server directory.
4. Create a new folder in the root directory of your web server called “map_tour”.
5. Unzip the file into the map_tour folder. The name of that folder forms part of the URL.
6. Open the folder and have a look around.

The App folder contains all the configuration files, one of which we’ll edit later. Resources contains the special markers and symbols used on the map. Samples contains some templates and starting data. We won’t be using any of these samples in this tutorial, but you should know that they’re in there. They include things like Shapefiles and layer packages pre-formatted with all the necessary fields and other examples that you can investigate and will find described in the application’s Full Documentation pdf.

Since we’ve unzipped the files to c:\inetpub\wwwroot\map_tour, your map tour’s URL will be www.yourURL.com/map_tour. We’ll come back to this folder later when it’s time to configure the web application settings so just keep that window handy.

Phase 2: Bring Excel data into ArcMap.

Next we’re going to work with some publicly-available data. In this case, a Wikipedia article entitled List of tallest buildings in Los Angeles included a table that we simply cut and pasted off the web page into an Excel worksheet. Here’s a 15-second video showing that process:

The Lat, Long, and Photographer fields were not included in the main Wikipedia table; but the information was still on the page, so it just had to be cut and pasted manually for each record. Not a big deal; it took just a few minutes.

1. Download this compressed Excel spreadsheet.
2. Uncompress the file to your desktop.
3. Double-click to open the spreadsheet in Microsoft Excel.

The Story Map web application we put onto our server in Phase 1 requires the following eight fields in order to display correctly:

• Name: The name of the location
• Icon_color: The color of the map icon (red or blue only)
• URL: Web location of the large image
• Thumb_URL: Web location of the thumbnail image
• Number: an optional field for sorting the bactual icons are numbered according to the Object ID.
• Caption: Where the descriptive text is stored
• Long: The x-position (longtiude) in decimal degrees
• Lat: The y-position in decimal degrees

You can refer to this matrix for a detailed schema of the attributes.

4. Scroll through the fields and you’ll see that we have three of the eight already in place: Name, Long, and Lat, as well as several additional fields Architect, Floors,  Built, Wikinotes, and Photographer which we’ll use to create our Captions later in Phase 3.
5. Close the spreadsheet.
6. Launch ArcMap 10.2 and open a New Blank map document.
7. From the File menu, choose Add Data..Add XY Data …
8. Make a Folder Connection to your C: drive and then navigate to the Desktop (or wherever you saved the spreadsheet).
9. Select Sheet 1 in the workbook.
10. Click Edit and set the Coordinate system to Geographic Coordinate System (GCS) WGS-1984 (it’ll be the last one on the list of geographic coordinate systems).

12. Click OK and OK again when ArcMap warns you about the lack of an Object ID field (we’ll fix that shortly).

Phase 3: Edit spatial aspects of the data.

In reality, we could exclude ArcMap from this whole exercise because we have lat-lon values and Excel can by itself export a Comma Separated Value (CSV) file, which is the file type we’ll use to get our data onto a web map. But there are some advantages to being able to work with the spatial data in ArcMap, so we’ll just use it to make a small spatial edit to give you the general idea of how it works.

We created what’s called an XY-event in ArcMap in Phase 2, but we need to convert it to a true ArcGIS spatial data format (typified by the existence of an ObjectID).

1. In the Contents window, right-click Sheet1Events and choose Data>Export Data.
2. Name the output MapLocations and save as a feature class into your default.gdb (or any other geodatabase you might have created).
3. Click Yes when asked to add it to the map.
4. Right-click and Remove the original Sheet1Events table.
5. Click the symbol in the Table of Contents and change it to a red circle 10 points.
6. In the ArcMap table of contents, right-click MapLocations and choose Label Features.

You ‘ll notice that two of the buildings–Paul Hastings Tower and City National Tower–appear to be at the exact same location. This is because they are actually part of the same complex and share one address even though the buildings are side by side. So in the original table they have identical lat & lon values (if you want, check the table to prove this to your own satisfaction).

8. Add the Imagery basemap.
9. Zoom in to the double set of points until both buildings are visible in the map window.
10. From the File menu, choose Customize>Toolbars>Editor to launch the Editor toolbar.
11. Click the Editor dropdown and choose Start Editing.
12. Use the Edit Tool to relocate the individual points onto the roofs of their respective buildings (the City National Tower is the one with the heli-pad).

13. Pan around to the other location points and adjust any you’d like to place right on the building.
14. Click Stop Editing and then make sure you save your edits.

So in ArcMap, you have total control over the locations of the points. But guess what? The fact that we moved points didn’t alter the lat lon fields we used in the first place, so we need to recalculate them now.

15. Open the Attribute table for Map Locations.
16. Right-click the LAT field and then choose Calculate Geometry from the dropdown.
17. Click Yes when you get the warning about doing this outside an edit session (and check the box that says don’t warn me again).
18. In the calculate geometry dialog, make sure the Property box is set to “Y-coordinate of point then click OK.

yada yada yada

You’ll see the values update for any point that you moved.

19. Repeat the process for the LON field, but this time change the Property to x-field and click OK.

Now the only thing left to do in ArcMap is export the table to a comma separated value (CSV) table.

19. In the upper right or the table, click the Table Options dropdown and select Export.

20. Change the file type to Text, name the file LASyscrapers.csv, and save to your desktop (or anywhere as long as you can find it later).
21. Click No when asked if you want to add it to the current map (no need, our work is done here).
22. Exit ArcMap.

Phase 4: Collect and edit photos

For each image in the map tour, we actually need two images: one at full size for the large panel on the left of the map, and a small thumbnail for the strip at the bottom. We got our images of the LA Skyscrapers from Wikipedia Commons, taking care to only use images where the photographers have granted permission to reuse in advance. We’ve provided the images already hosted on a server for you since this is not a tutorial about image research and editing, but here is the basic sequence we followed to assemble the images:

1. Find the highest resolution version of the image available and save it to your local machine.
2. Open the image in an image editing program (we used Techsmith SnagIt Editor) and save the image at 1000 x 750 pixels (this could require some cropping and inserting black borders depending on the aspect ratios (more details can be found in this document about image assembly).
3. Save the image with a logical name (ex. CityNational.jpg).
4. Reduce the image to 150 pixels and do a save-as of the thumbnail (ex. CityNational_thumb.jpg).
5. When you’ve got them all saved in two versions, copy all of these files to a folder in your wwwroot directory.
6. In the ISS Manager, enable Directory Browsing for the new folder.

For the purposes of this tutorial, we have saved the images to this directory on a public Esri server named ugis.

Here are all the finished images.

This is all you need to proceed to the next phase.

Phase 5: Do final writing and editing in Excel.

In this stage we’re going to work with in Excel with the CSV file we created earlier, which when we’re done we will upload into a web map as a layer.You can also so this work in a text file editor like Windows Notepad, but Excel is great for being able to sort the records so we’ll show that method. This is the simplest most failsafe way to create your tour point layer.

1. Open LASkyscrapers.csv that you exported from ArcMap in Phase 3.
2. Add the following new columns to your spreadsheet making sure you use these exact spellings:

•  Icon_color
• URL
• Thumb_URL
• Number
• Caption

The order of your columns and the existence of columns not required by the web app is irrelevant.

3. Point your browser to ugis.esri.com/SkyscraperImages
4. Click the name of the each image and copy and paste it’s URL from the browser address bar into the corresponding row for that building.
5. For example, for the tallest building, US Bank Tower, the URL looks like this:

http://ugis.esri.com/SkyscraperImages/USBankTower.jpg

6. Copy and paste that URL into the appropriate cell in the spreadsheet.

7. Repeat this copy-and-paste process for all the buildings, one-by-one.
8. Now pate all the thumbnail URLs into the Thumb_URL field for each matching record.

At the end of this process your spreadsheet should look like this:

9. In the icon_color column, enter a “B” (for blue) for each record.

We are keeping it simple and using one color for all the tour points, but you can also G, R, or P (Green, Red, Purple).

10. Copy and paste the values from the Rank column into the Number column.

This is the number that will appear in the blue icons and will also set the viewing order of the tour.

Now it’s time to build the caption that will appear under each photograph as the tour proceeds.

11. Highlight the Caption column and activate Text Wrap for the whole column..
12. Using the information in the Architect, Floors, Built, and Photographer fields, copy and paste to build a caption that looks like this:

Using data from the other fields, build a single caption.

13. Repeat the process for all records.
14. Delete the extraneous columns ObjectID, Rank, Architect, Floors, Built, and Photographer, at which point your spreadsheet should look like this:

At this point we could proceed to ArcGIS Online and make our web map, but there is one extra step that can really give our finished product a nice finished look and that’s the addition of a special “cover” or intro image.  By default the first record in your layer will become the first image seen. It isn’t shown on the map as a numbered tour point. This enables you to show a photo and some text to introduce the tour before people advance to the first location. Even though it isn’t shown on the map, this first record in your map tour point layer still needs to be a geographic feature with a point location like all the other points in your tour so that is gets accepted as a feature by the web map.

We have created a special image with a text headline for this purpose:

http://ugis.esri.com/SkyscraperImages/SkylinewithText.jpg

15. Insert a new row at the first record.
16. Copy the LAT and LONG values from U.S. Bank Tower and past them into the LAT LONG fields for the new blank record.
17. Copy the above URL and paste it into the URL field.
18. Type (or copy) this text into the Caption Field: While it doesn’t have as many tall buildings as New York or Chicago, LA’s skyline is among the most striking in America.
19. Leave the other fileds blank; we don’t need them.

20. Save the CSV file and exit Excel.

Phase 6: Create your web map and configure your Map Application 

In this stage we’ll be logging into ArcGIS Online with a public or organizational account and creating a simple web map that will power our Map Tour application.

1. Go to www,argis.com and sign in to a public or organizational account that you’re a member of.
2. Click Map in the upper ribbon.

3. When the map opens, click the Add button and select Add Layer from File.

4. Click Choose File and locate the file LASkyscrapers.csv.
5. Click Import Layer.

Your map points should appear in red, with the map zoomed into the extent of the area downtown where all the buildings are clustered. The default basemap is the topographic. But you can change it to any of the other 8 basemaps that your prefer. Compare the different look of Topographic, Imagery, and National Geographic:

(The default symbols will be smaller red dots than seen in the illustration above in which we bumped the size up for graphical clarity.) It doesn’t matter what symbol you use in this web map; the web application assigns its own symbology. We’ll stick with Topographic.

6. In the Save Map Dialog, Title the map LA Heights and type “An Architectural Tour” into the summary and click Save Map.

This information will get picked up by the Map Tour Application and used in the title area. You’re free to insert whatever text you’d like.

7. Now click the Share button and sshare this web map with Everyone (which makes it available to anyone on the web).

Once the web map is saved, look up in address bar and notice the long alphanumeric string at the end of the URL.

8. Copy this unique ID, which is like a social security number for your web app, into the clipboard.
9. Minimize your web browser.
10. Now go back to the wwwRoot folder locate the folder where you downloaded the app in Phase 1.
11. Locate the file called index.html and open it in a text editor (like Notepad).
12. Scroll down to the 23rd line in the file and after where it says webmap: paste the webmap ID that you copied (between the quotation marks).

13. Save the file and exit your text editor.
14. Now go back to your web browser and type in the URL (based on your folder name in wwwroot.
15. You should now be looking at your finished web application,
16. Click through a few record to admire your work and confirm that all looks good.