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.
Solved! Go to Solution.
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 ·... 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... 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 presen... 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
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 ·... 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... 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 presen... 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
Thanks Gregory,
Your solution to for being able to add an additional image per feature was most helpful and I got it working for the desktop view... not so much for the mobile view. I added my toggle buttons to InfoView.js and I grab the image source from tourImg which looks to be the image for the most current image but I can't get the image to change (like I do with the desktop view). Should I be modifying something else?