Embedding Story Maps in websites and blogs

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:
http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid=01be34448b9046798cdc6378b9649a9d

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.

Embedding responsively

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.

The iframe markup you use can accommodate for responsive web pages. For example, this markup was used to embed A Nation of Drones into the Smithsonian.com website.


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

Live Examples

See Embed A Story Map to view examples in a blog post, or view the Story Maps Gallery showing embedded story maps.

This post was originally published on February 4, 2013, and has been updated.

This entry was posted in ArcGIS Online, Story Maps and tagged , , . Bookmark the permalink.

Leave a Reply

12 Comments

  1. lorimar says:

    Good information for those stuck in map portals!
    Maps should be in a context (even though a story map can create the context).
    But I must say, I like the last piece of information the most – responsive design!
    Most applications work really well out of the box but this is really welcoming news!

  2. Hi Bern,
    Here is a nice website of one of our clients where I used a customized story map to embed into their website.

  3. george_kipp says:

    Hi Bern,

    Thanks for the useful article. I was able to embed a story map into a website about historic railroad depots in the Ozarks.

    Thanks!

  4. sbunker says:

    I was having trouble embedding my Arc Gis maps and story maps into my Google site. I found that if I changed the beginning of the url from http to https, this fixed the problem.

  5. joa762 says:

    Hi -for the life of me neither I nor my IT team can embed a story map I’ve created in our news website for public viewing (it either eternally initializes or asks for the user to sign in when simply given the share URL). How can I solve this issue? Thanks!

  6. paulkel123 says:

    I am new to all of this so I’m not sure if your statement: “some templates work better than others when placed into constrained websites …” addresses my problem. I have created a story map with photos, and when i look at a photo inside arcgis online – where the story map is created – no matter the dimensions of the photo i can see the entire photo when i click on it. However, when i embed the story map into my website, the longer photos are truncated – to fit the fixed dimensions of the story map i guess. is there a command in html that will allow the entire photo to show up regardless of the size of the embedded story map? And would that command be put into the website, or in the creation stage inside arcgis online?

    • Bern Szukalski says:

      Sorry, I am not quite sure I understand what you are experiencing without more information. Which story map are you using? It seems you are storing your photos as items in your ArcGIS online account – is that the case? Is it wide aspect photos that are being truncated, or all? Can you share links? It may be easier if you just email me the details bszukalski@esri.com