Add Interactive Buttons and Customize Map Series

Jennifer Bell
May 18, 2018 · 4 min read

With the recent release of ArcGIS Online, the Story Map Series now supports story actions and an HTML editor in the builder. Story actions are links that change what’s shown in the main stage (e.g., switching to a map, an image, a video, a website, or changing what happens in the map itself). This is super helpful for guiding your readers through an interactive narrative.

This blog will cover how to create buttons and customize the Map Series theme all in ArcGIS Online (no self-hosting needed!). You’ll create a Map Series with story actions, add buttons with hover effects, and modify the Map Series theme.

Note: This style was inspired by Owen Evans’ blog Create Buttons for Story Actions in Map Journal.

Click on the links below to view examples of this style in the Map Series:

· Malaria Prevalence among Children in Africa

· Homelessness in Los Angeles

· Millionaires of the World

Create a Map Series Story Map and Add a Story Action

Create a Map Series Story Map with the Side Accordion layout and add a story action to some text. The GIF below shows a map action added to “story action text”. When the reader clicks on this text action, the layer on the map will change.

Navigate to the HTML editor in the builder mode.

The HTML for the story action text is automatically created and looks like the code below. Note: The number next to MJ-ACTION will be different than what is shown here.

<p><a data-storymaps="MJ-ACTION-1530142428464" data-storymaps-type="media">story action text</a></p>

Add Button Definition

Copy and paste the following button definition anywhere in the Story Map HTML editor:

<style type="text/css">.btn-blue { display: inline-block; background-color: #79B1F3; border-color: #79B1F3 !important; color: #fff !important; padding: 3px 8px; border-radius: 5px; }
<style type="text/css">.btn-purple:hover {background-color: #7F58A1; border-color: #7F58A1 !important;}

Modify Story Action

In the previous step you set the definition for the button and hover color. Now it’s time to add the definition to the story action. In HTML editor, add class=“btn-blue” after the <a and before data-storymaps:

<p><a class="btn-blue" data-storymaps="MJ-ACTION-1530142428464" data-storymaps-type="media">story action text</a></p>

Your HTML should look like the below image with the exception of the MJ-ACTION number.

With just a few lines of code, your map series now has a blue button with a purple hover over. Change the values of the hex values to edit the color of the button and hover.

Modify Map Series Theme

Now you’ll modify the Map Series theme to give it a sleek look. In the JSON editor of ago-assistant, match your theme settings to the colors in the image below. This makes the title and side panel black which makes the Map Series look more modern and minimalist. This is helpful when you want to match your organization’s color scheme or when you want to match the side panel to the colors in your map.

Update URL of Registered App

The last step is optional. If you are embedding a web app in your site, you want it to be as minimalist as possible to highlight the most important part of the app- your story. One option is to add &embed to the end of the URL which removes the Map Series title bar.

To do this, navigate to the Update the URLs of Registered Apps and Services section in the ago-assistant.

Add &embed at the end and update the URL and select Update.

Another way to alter the URL is from the Story Map item page’s Settings tab.

Add &embed to the end of the URL and Save. When someone opens your app, it will hide the title bar.

Refresh the public facing view of your Map Series Story Map and admire your great work!

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:

Jennifer Bell

Written by

As a storyteller and mapmaker, I continually strive to find the art in cartography through innovative, thought-provoking, and eye-catching maps.

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