The Age of Megacities Storymap template

[JohnDye]

We really liked the context-map built into the top left corner of the Age of Megacities storymap and wanted to take this story map, customize it a little further and use it as a template for a recurring delivery.

I found the AGOL item for it which indicated it was a customization of the Journal Map app, so I pulled the source for the Journal Map app from Git. Next, I went and grabbed the index.html source code for the Age of Megacities story map through Chrome's view page source and placed that in a new HTML file, 'customized_index.html' and placed that in the root of the Journal Map App. I then deployed it to my webserver and brought up the page but the context-map and feature layer do not show.

It looks like there might be some differences between the viewer-min.css file in the Journal Map app and the customized Age of Megacities story map viewer-min.css. Can someone from the @StoryMapsTeam help me out here and provide the full source?

[StephenSylvia · Accepted solution]

The last two commits in this git repo

(https://github.com/ssylvia/growth-of-cities) shows the code we changed

for our version of the app. You may need to change this slightly depending

on what you want to show in the map. The readme in this app has

instructions to set up your computer to run and build your application so

it is ready for production. Part of the context map implementation requires that the web map you use

be configured in a very specific way. Heres the web map we¹re using in the

growth of cities story:

http://www.arcgis.com/home/webmap/viewer.html?webmap=56fa6622c4f44e69af8f874411a0a11a. To create the map, you will need to add a CSV layer to a  web

map. No other feature collection layer types can be included in your map.

Attached is the CSV we used. Required fields are index, active, any text

needed to display in the tooltip, and fields needed to geocode the point

(lat/long or address fields). In the active field, you must have at

lease one TRUE and one FALSE (it doesn't matter which one as the app

will change these as needed) value so you can symbolize through the ArcGIS

online viewer. All point symbology is pulled through the web map

configuration. After you add the CSV layer, remove the popups from that

layer. Then symbolize the points using Unique Values on the active

field. The index field determines when each point will highlighted based

on the map journal position. If you open the web console on the map

journal and scroll through, you should see a line that looks like this:

"tpl.core.MainView - navigateStoryToIndex -  1". The number at the end is

the index number you should use for that point in the CSV. If you

rearrange the map journal entries, you will need to update the CSV layer

with their new index. Lastly, you can update line 101 in the ContextMap.js

file to make sure you are pulling the correct attribute into the tooltip.

You may want to start with the original map journal source code (Esri/map-journal-storytelling-template-js · GitHub)  as the age of cities version used a map journal version that is outdated with an outdated API.