Adding links to sections in Cascade

Adam Pfister
May 30, 2018 · 3 min read

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.

Use this syntax to link to the section with an index of 8 in your story

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.

Setting up your Bookmarks in the Cascade Builder

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”.

Link directly to sections by their Bookmark name

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:

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!

Adam Pfister

Written by

People don't talk that way anymore. Maybe we should. have macbook. will travel.

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade