topic Re: Looking For Story Map Template, Tabbed and Accordion in Classic Esri Story Maps Questions

Looking For Story Map Template, Tabbed and Accordion

BenjaminMittler — Sun, 12 Feb 2017 00:30:40 GMT

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

Re: Looking For Story Map Template, Tabbed and Accordion

AdrianWelsh — Sun, 12 Feb 2017 07:33:33 GMT

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.

Re: Looking For Story Map Template, Tabbed and Accordion

RupertEssinger — Mon, 13 Feb 2017 02:38:33 GMT

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

Re: Looking For Story Map Template, Tabbed and Accordion

RupertEssinger — Mon, 13 Feb 2017 03:28:11 GMT

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.

Re: Looking For Story Map Template, Tabbed and Accordion

BenjaminMittler — Mon, 13 Feb 2017 13:17:39 GMT

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

Re: Looking For Story Map Template, Tabbed and Accordion

MollyWatson1 — Thu, 19 Apr 2018 19:44:45 GMT

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

Re: Looking For Story Map Template, Tabbed and Accordion

MollyWatson1 — Tue, 01 May 2018 15:17:00 GMT

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.

Re: Looking For Story Map Template, Tabbed and Accordion

BenjaminMittler — Tue, 01 May 2018 15:33:42 GMT

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.

Re: Looking For Story Map Template, Tabbed and Accordion

RupertEssinger — Tue, 01 May 2018 22:30:43 GMT

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=1c32233ab04241a08f6bbc80f668d022

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=fbf644cbbba441c7bd9b1a00d03c8728

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

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=51657d2fb4694f74bfec5a42e32a9204

Hope that helps

Rupert

Re: Looking For Story Map Template, Tabbed and Accordion

RupertEssinger — Tue, 08 May 2018 19:31:35 GMT

Hi Molly

Here are new versions of the missing Story Map that I mentioned in an earlier comment above:

Demographics & Statistics Atlas

Story Map Series story using Tabbed layout with tabs featuring an embedded Story Map Series using Bulleted layout:

http://nation.maps.arcgis.com/apps/MapSeries/index.html?appid=33caf0001a484afea3b555acb0a199cd

Story Map Series story using Tabbed layout with tabs featuring an embedded Story Map Series using Side Accordion layout:

http://nation.maps.arcgis.com/apps/MapSeries/index.html?appid=829a63a3553048fa8025993a238fad78

Rupert

Re: Looking For Story Map Template, Tabbed and Accordion

MollyWatson1 — Wed, 09 May 2018 14:19:51 GMT

Thanks Rupert!