Embedding Story Maps into websites and blogs

Story maps combine ArcGIS Online web maps with applications and templates that incorporate text, multimedia, and interactive functions. Story maps inform, educate, entertain, and inspire people about a wide variety of topics. You can view examples of these popular applications at the Esri Storytelling with Maps website.

Story maps are easy to create using a variety of downloadable templates. Just author your ArcGIS Online web map (some templates use multiple web maps), download the template, and follow the instructions to insert your web map ID(s) and other elements. Some of the story map templates are also hosted directly on ArcGIS Online, and you’ll find several to choose from in the template gallery. See About web application templates for more information.

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 the story map swipe template that compares two maps, in this case obesity and diabetes.

You can open the story map by clicking this URL: http://storymaps.esri.com/templates/swipe/

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. The URL to the story map is highlighted, and is used in the src attribute:

Here’s the embedded story map as it appears in our blog:

Bear in mind that some templates will work better than others when placed into constrained website or blog dimensions. So adjust your website accordingly to provide the best results, or choose templates that look best within small dimensions.

(Note: At the time of this post, all story map templates are undergoing revision using responsive design techniques to adapt to different sizes.)

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

Leave a Reply

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