Esri Story Maps let you combine authoritative maps with narrative text, images, and multimedia content. They make it easy to harness the power of maps and geography to tell your story.*Story maps inform, educate, entertain, and inspire people about a wide variety of topics. 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.
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 inside our blog with dimensions of 720 pixels by 600 pixels. Note the URL to the story map used in the src attribute:
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:
http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid=01be34448b9046798cdc6378b9649a9d
The URL to the story map is:
http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid=01be34448b9046798cdc6378b9649a9d
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 inside our blog with dimensions of 720 pixels by 600 pixels. Note the URL to the story map used in the src attribute: