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)
Any thoughts on how they did it are welcome.
Solved! Go to Solution.
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.
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.
Thank you for saving me a trip down a rabbit hole.