Select to view content in your preferred language

Recreate Horizontal timeline in Storymap

375
2
Jump to solution
02-13-2024 08:38 AM
MollyEskelson_H-GAC
New Contributor

I'm trying to figure out how they created the interactive horizontal timeline in the example linked below.

Example: The lines that shape our cities (arcgis.com)

ESRI's standard timeline feature only works vertically. 

Using inspect- I can't tell if they use another application and then add it in an iframe or if its a secret mode in Storymaps.

Horizontal Timeline (esri.com)

<iframe role="application" src="https://storymaps.esri.com/stories/2020/redlining-timeline/timeline-horizontal.html?table=appbcUwhFA..." allow="autoplay" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" allowfullscreen="" title="" tabindex="0" loading="lazy" class="jsx-3625881117 "></iframe>

Example: The lines that shape our cities (arcgis.com)

MollyEskelson_HGAC_0-1707841537202.png

Any thoughts on how they did it are welcome.

0 Kudos
1 Solution

Accepted Solutions
PeterKnoop
MVP Regular Contributor

You are on the right-track. It was added using an Embed block in the story. In this specific story, the embed is hosted on the storymap web server; an option only available to Esri as far as I know. You would have to host your horizontal timeline code on your own webserver.

An example of how to build a horizontal timeline with HTML, CSS, and JavaScript can be found here. Once you've built your own, and hosted it on your own web server, then you can embed it into your StoryMap using an Embed block.

View solution in original post

2 Replies
PeterKnoop
MVP Regular Contributor

You are on the right-track. It was added using an Embed block in the story. In this specific story, the embed is hosted on the storymap web server; an option only available to Esri as far as I know. You would have to host your horizontal timeline code on your own webserver.

An example of how to build a horizontal timeline with HTML, CSS, and JavaScript can be found here. Once you've built your own, and hosted it on your own web server, then you can embed it into your StoryMap using an Embed block.

MollyEskelson_H-GAC
New Contributor

Thank you for saving me a trip down a rabbit hole.

0 Kudos