Story Maps let you combine maps with text, images, and multimedia content. They make it easy to harness the power of maps and geography to tell your story. You can view examples at the Story Maps Gallery. Story maps are easy to author using builders that are unique to each story map. Learn more at Story Map Apps, where you can find an overview and tutorial for each.
Once you’ve created a story map, or found one that’s publicly available, you can embed them in your website or blog. In this example we’ll use a publicly shared story map, one that uses Story Map Swipe and Spyglass that provides a view of Chicago using an historic map layer from the David Rumsey collection and current imagery.
The URL to the story map is:
The iFrame tag
To embed the story map in a website or blog we can use an iframe tag. The iframe tag is supported in all major browsers including Internet Explorer, Chrome, Firefox, Safari, and Opera.
The iframe tag has several attributes that we’ll use to embed our story map; the URL above will be placed in the src attribute and the height and width attributes will be used to size the embedded story map as needed to fit our website or blog. Other attributes are available, but not required, such as frameborder, scrolling, marginheight, and marginwidth. Once we create the HTML with our iframe and attributes, we can copy and paste it directly into our website or blog.
Here’s the completed HTML used to place the story map with fixed dimensions of 720 pixels by 600 pixels. Note the URL to the story map used in the src attribute:
<iframe width="720" height="600" scrolling="no" marginheight="0" marginwidth="0" src="http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid=01be34448b9046798cdc6378b9649a9d" </iframe>
The UI can be minimized for embedding by adding &embed to the end of the story map URL in the src attribute, as shown below.
<iframe width="720" height="600" scrolling="no" marginheight="0" marginwidth="0" src="http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid=01be34448b9046798cdc6378b9649a9d&embed" </iframe>
Both examples above are shown in the Embed A Story Map sample blog post
Tip: Omit http: in the src attribute string to enable the embedded story map to use the protocol of the page it is embedded within.
Story maps are responsive, so they will fit the available real estate, with elements moving around to adjust to the available space. Compare the Chicago Story Map as you open it via URL, and as viewed in the more constrained space of the blog post. Or just open any story map in a browser and adjust the size to see what happens.
<iframe width="100%" height="640px" src="http://storymaps.esri.com/stories/2015/nation-of-drones/" frameborder="0" scrolling="no"></iframe>
The markup above maintains the story map height of 640px, but allows the width of the story map to fit the page as it is resized. Other aspects of responsive embedding are beyond the scope of this post, see other resources for more information.
Tip: Some templates will work better than others when placed into constrained website or blog space. Adjust your website accordingly to provide the best results, or choose templates that look best within your specific dimensions.
This post was originally published on February 4, 2013, and has been updated.