nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Embedding infographics in story maps

Anonymous User

I am looking to embed a dynamic HTML infographic into a storymap. Where is the best place to host the standalone html page on the web? I tried saving it to google drive but couldn't get it to work. If anyone can be of assistance that would be much appreciated. Thanks.

Encuentra más publicaciones etiquetadas con

Accepted answers

oevans_storymaps

Hi William -- you can host your page anywhere that can host static web pages like a standard web server, Amazon S3, Windows Azure, GoDaddy, etc. Just make sure to make your files public when you upload them or else you won't be able to see them inside the story map.

All comments

oevans_storymaps

Anonymous User

Yesss thank you so much. Worked perfectly with AWS

Rohit_Venkat_GandhiMendadhala3

Hi Owen,

For example, if we don't have access to servers. Can we place these exported dynamic HTML infographics on DropBox/Box/Google Drive and get a shareable link from them in order to use them in story maps?

Also, are these infographics interactive after we integrate them into our Story Maps or just static images?

I have tried the same but somehow it didnt work and it keeps on loading forever and says "refused to connect".

Would really appreciate if you could help me with this. Thank you.

AravindatStoryMaps

Hi Rohit,

The reason you're probably getting a "refused to connect" error after embedding content from Google Drive/Box/DropBox is that their server doesn't allow you to embed a content into another website like Story Maps. This might be because they might only allow content to embedded within places of the same domain/origin. So, you would have probably run into these errors: CORS errors - HTTP | MDN

If you don't have access to external servers, you can host using a web server that your organization uses to host content via their website where you can control CORS and other same-origin headers.

PraveenSrivastava

With the Business Analyst Web App release in a few weeks, this will be much simpler using a new workflow in BA Web App. You will be able to embed sites, maps, infographics, and reports in StoryMaps from right inside BA Web App. Learn more here: https://www.esri.com/arcgis-blog/products/bus-analyst/analytics/whats-coming-in-business-analyst/

dcrGIS_asimm

I know this is solved but I wanted to add that I was able to do this by using github pages to host the html through the embed element. I did have to play with the height a little to optimize the experience and limit scrolling in the embed element. You can do this by putting the link in an iframe instead of using the github pages link directly. This esri blog post last updated it 2021 has a good overview of when to use links versus iframes: Enrich your stories with embedded web content | Esri.com.

I work for a large state agency and we also have issues with our IT blocking cloud storage domains, however, github is not one of those.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.