Add interactive buttons and customize a classic Series story map
This article covers a topic related to the classic Esri Story Maps templates. Story authors are encouraged to use the current-generation ArcGIS StoryMaps to create stories. However, Esri will continue to maintain the classic templates for your use. For more information, see the Product road map.
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
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>
<style type="text/css">.btn-purple:hover {background-color: #7F58A1; border-color: #7F58A1 !important;}
</style>
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!
