Adding links to sections in Cascade
You may already know that you can add links to sections of your Story Map in either the Map Journal or Map Series templates. These were welcome additions that allow a reader to jump to a specific section from within the story. While this functionality is not yet available in the Cascade Builder, it is something you can achieve by adding a bit of code. Who says Map Journal & Series get to have all the fun?!
Since you will be adding custom code to a Story Map template, you’ll need to host the app on your own web server. For more information on this setup, you can review this blog post.
Adding the links in your story
This will look weird, but stay with me and it’ll all make sense when you get the dropping in the code in the next section. When you are building your story, the panel on the left lists all of your sections. Those sections have an numerical index, starting at 0. Let’s say you want to add a link in your story that will go directly to section 8. In your story, add some text, highlight it, and then choose the link button to turn it into a hyperlink. For the address, add inlink-index-8. Using this syntax will make sure that the code catches and understands you want that text to link to the section with an index of 8.
That’s a very flexible way to link to different sections or even sub-sections of your story. But there’s an even easier way if you only want to use the Bookmarks you have setup in your story.
When you set the address for your link, use inline-bookmark-<bookmarkName> where <bookmarkName> is the exact name as you have it setup in your story settings. Take a look below to see how I’m linking to a bookmark named “Mexico”.
Still with me? Great! Save your Cascade Story Map and let’s drop in our code to see it all come to life!
To GitHub!
The Cascade template is open-source on GitHub and is well-documented with steps to download/clone and get setup. I won’t go into detail on that process here, but once you get your development environment up and running, you’ll want to head to Application life cycle section of the documentation. This section will point you right where you need to go to add in the code that will give us our “internal links”. Once you have that file open in your favorite code editor, you can drop in the code below to wire up the the internal linking.
Once you have this code in your app, save, and then give it a refresh and try out your links! As a bonus, you can also hand a link to someone with URL parameters that will send them directly to that section! This can be done using bookmark or sectionIndex as the URL parameters. Here’s a couple examples:
- Link directly to the Mexico title section: https://sdg.esri.com/cascade-links/index.html?appid=b568c3ff90484a49ad22f47454758805&bookmark=Mexico
- Link directly to the Philippines SDG Data Hub section: https://sdg.esri.com/cascade-links/index.html?appid=b568c3ff90484a49ad22f47454758805§ionIndex=9
I’m by no means a full-time programmer, so please let me know if & when you come across something that may not work as expected.
Have fun!
