How do I go about modifying the dowloaded developer application to allow for 2 pictures per location and have a unique extent for each location?

Question

I have downloaded the developer application for the story map template.  I would like to customize it to do 2 things.  First, I would like to be able to show 2 pictures per location and add some sort of toggle button or tab control to switch between the 2.  Second, I would like to some how store a unique extent for each location.  I was thinking of modifying the csv file to store a url of an extra picture and also store the extent of the location.  I would then modify the downloaded template to read the updated csv file.  I don't know where to start to do this or if it is even possible.

GregoryL_Azou · Accepted Answer

Yes both are doable.

To modify the behavior of the picture panel, look at that file map-tour-storytelling-template-js/CrossFader.js at master · Esri/map-tour-storytelling-template-js · GitHub  this is where you will want to add your switch button and handle the event. That component is instantiated by map-tour-storytelling-template-js/PicturePanel.js at master · Esri/map-tour-storytelling-template-js · GitHub but you should not need to edit it.

For zooming the map to a different location for each point, adding the location to the CSV is great for data management. Then you could use the following events GitHub - Esri/map-tour-storytelling-template-js: The Story Map Tour is ideal when you want to present a linear, place-ba… to know when the app is navigating and use app.data.getCurrentGraphic().attributes.getOriginalGraphic().attributes to access that data, create the extent and then use app.map.setExtent to zoom the map