Looking For Story Map Template, Tabbed and Accordion

BenjaminMittler · ‎02-11-2017

Hi all,

I'm trying to put together an ArcGIS Story map and I would like to use the Story Map Series template but use both tabbed and accordion as seen in the example I found below. I can't seem to figure out how to do this, anyone have any tips?

http://moval.maps.arcgis.com/apps/MapSeries/index.html?appid=41004835d28c4546800c4288b7dbf6b6

Thanks!!

AdrianWelsh · ‎02-11-2017

Benjamin,

Maybe I am not seeing the same thing that you're seeing but I just see the tabbed map layout. I am not seeing the accordion style. Can you direct to where you are seeing this (I likely am just missing it).

I see the tabs at the top. The left hand side shows me that this particular tab is from a Map Journal story map that is embedded into this tab.

View solution in original post

AdrianWelsh · ‎02-11-2017

Benjamin,

Maybe I am not seeing the same thing that you're seeing but I just see the tabbed map layout. I am not seeing the accordion style. Can you direct to where you are seeing this (I likely am just missing it).

I see the tabs at the top. The left hand side shows me that this particular tab is from a Map Journal story map that is embedded into this tab.

RupertEssinger · ‎02-12-2017

Hi Benjamin,

Adrian beat me to it. That City of Moreno Valley Industrial story map uses the tabbed layout of the Story Map Series, and then in each tab, the author has embedded a Story Map Journal (using the web page option for each tab's content). So it looks a bit like the story has side accordions for each tab but they are Map Journals. This pattern is being quite popular because it lets you convey a lot of information (because the Map Journal presented by each Map Series tab can have as many sections as you like) without overwhelming your reader. It keeps all your content nice and organized. This link opens our Gallery with some other nice examples of the same pattern. For example here is a lovely one created by Andrew Skinner‌ at Esri. He has a Map Journal for each theme of places he wants to show, and he uses the Map Series tabs to let people choose the theme.

Notice how in the City of Moreno Valley example and others that the author has done some nice refinements, like not showing a logo or any header info in the embedded Map Journals, because that would be redundant with the header at the top of the Story Map Series.

Rupert

RupertEssinger · ‎02-12-2017

Actually, talking about embedded Side Accordions, here's an example we added into the Story Maps Gallery recently in which the author (also Andrew Skinner at Esri) embedded a Story Map Series (Side Accordion layout) story into each tab (apart from the first one) of a Story Map Series (tabbed) app. Depending on the info you are presenting, this may work better than embedding Story Map Journals into each tab.

Did you spot the tweak that Andrew did to make embedding his Side Accordions look really great? He manually appended the &embed parameter to the end of the URL to each Side Accordion he added so that they are displayed headless in his story:

http://nation.maps.arcgis.com/apps/MapSeries/index.html?appid=5449a3da82fb4fceba67101a39023f14&embed

Otherwise the header (with the title and logo) of each Side Accordion would appear as well, taking up space and duplicating the logo, etc.

http://nation.maps.arcgis.com/apps/MapSeries/index.html?appid=5449a3da82fb4fceba67101a39023f14

For more about that, see this ArcGIS blog post.

Note that &embed doesn't apply if you embed a Map Journal, so instead with a Map Journal you'd just turn off the logo, sharing, etc in the header to avoid clutter.

One drawback to embedding Story Map Journals or Story Map Series apps into a Story Map Series is that at small display sizes, like on a phone, when the responsive UI pivots, things can get a bit odd looking because your readers see similar looking UI controls for both apps. This is something we would like to improve in the future.

MollyWatson1 · ‎04-19-2018

Hi Rupert,

I am trying to find examples of story maps that embed accordions into series. You list a link in your reply, but it does not work. I get an error message that the story map is not accessible or does not exist. Could you post the link that works? This is the link that does not work for me to view: http://nation.maps.arcgis.com/apps/MapSeries/index.html?appid=9dbd84b6f54541a4a5a12009c9982a87

BenjaminMittler · ‎02-13-2017

Awesome, this is exactly what I need. I'm trying to use the Story Map platform to build myself a GIS Portfolio and this should work perfectly. Somewhere deep in my bookmarks folder I already had that blog post containing &embed saved but was unaware that it didn't apply to Map Journals. Embedding the Map Series seems like the way to go!

Thanks

Ben

MollyWatson1 · ‎05-01-2018

Hi Benjamin,

Do you still have the link to the story map example? It doesn't work for me and I can't find it on the story map gallery or by searching by Andrew Skinner's name.

BenjaminMittler · ‎05-01-2018

Molly,

Looks like that story map may have been removed. Is it that specific story map you are interested in or are you interested in embedding an accordion story map within a tabbed? I may be able to find you another example.

RupertEssinger · ‎05-01-2018

Hi Molly,

Yeah, that story I referenced has been unshared.

I just wanted to check that you know that the Side Accordion layout is one of the layout options in the Story Map Series app template. Click here for a visual guide to the Map Series layouts.

Here's a Story Map Series using the Tabbed layout in which a Story Map Series using the Side Accordion layout has been embedded into one of the tabs ("Transit Tools"). The other tabs embed a Story Map Cascade, and Story Map Journals!:

http://urbanobservatory.maps.arcgis.com/apps/MapSeries/index.html?appid=1c32233ab04241a08f6bbc80f668...

In general, we tend to suggest keeping story maps simple and not embedding story maps inside story maps, but it is a technique that is used a lot especially for more in-depth stories where authors like the extra storytelling bandwidth they can get. For example, this story by George Washington's Mount Vernon is a Story Map Journal with two Side Accordion Map Series and a Swipe story embedded in it:

http://mountvernon.maps.arcgis.com/apps/MapJournal/index.html?appid=3ca8ba42c90a41d39df64b9cd4f25f58

Embedding a big variety of different apps inside a story map, or multiple levels of embedding may be a bit disorienting for casual readers and may be a bit harder to use on mobile devices (because readers will see the mobile UI of the embedded app inside the mobile UI of the host app), but that depends on what is being embedded.

We don't see a lot of Story Map Series stories embedded inside Story Map Series stories. The most common pattern is to embed Story Map Swipe/Spyglass stories into Map Series or Map Journal, in order to provide a swipeable map as part of a larger story. Another pattern that we see a lot is Story Map Journals embedded into Story Map Series, which works especially nicely if each of your embedded Map Journals has the same look and feel. For example see:

https://arcgis-content.maps.arcgis.com/apps/MapSeries/index.html?appid=fbf644cbbba441c7bd9b1a00d03c8...

https://icfgeospatial.maps.arcgis.com/apps/MapSeries/index.html?appid=58f90c5a5b5f4f94aaff93211c45e4...

Some authors are getting nice results embedding Story Map Cascade stories inside tabbed Story Map Series, often as a way to present a set of Cascades in one interactive flow. For example see:

https://icfgeospatial.maps.arcgis.com/apps/MapSeries/index.html

http://eastduncouncil.maps.arcgis.com/apps/MapSeries/index.html?appid=51657d2fb4694f74bfec5a42e32a92...

Hope that helps

Rupert