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; } } }

Embed map tour in website

lindsayc

I'm trying to embed the map tour I made into my website, but I'm getting the following screen.

I've tried adding in iframe to the index.html, but I'm new to html/css/javascript, so it's likely I've put it in incorrectly. I've basically scanned articles like these and copy and pasted in the iframe code- Embedding Story Maps in websites and blogs | ArcGIS Blog . Also think I might be having file structure issues.

This is my repo on github, if that helps. I've copied index.html into because that will be the map page- elpinguinodev.github.io/elpinguinodev.github/io/_pages/map.md.

I am new to all of this, so do not be afraid to ask the obvious questions.

Lindsay

Encontre mais publicações marcadas com

Accepted answers

oevans_storymaps

Hi Lindsay,

The syntax for markdown and HTML are different, so unfortunately just changing the file extension won't work. If you have a working HTML page, then you just need to copy the <iframe> code into the <body> section of your page where you want the story map to appear.

It can be frustrating when you are just starting out working with HTML. I think it would be helpful for you to take a look at some of the free resources to learn HTML at Code Academy or Khan Academy. They have lots of great introductory lessons to help you understand the basics!

Owen

All comments

oevans_storymaps

Hi Lindsay,

Looks like you have valid iframe code in your map.md file, but markdown isn't a web page. You'll need to put it in the <body> of an HTML page like this.

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN> favorites / bookmark title goes here <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN> <SPAN class="attr-name token">bgcolor</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>white<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">text</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>blue<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>p</SPAN><SPAN class="punctuation token">></SPAN></SPAN>This test page simulates the embedded map. Size is 950px x 600px<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>p</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>iframe</SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>950<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>600<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">frameborder</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">scrolling</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">marginheight</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">marginwidth</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.arcgis.com%2Fapps%2FStorytellingSwipe%2Findex.html%3Fappid" target="_blank">http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid</A><SPAN class="punctuation token">=</SPAN>01be34448b9046798cdc6378b9649a9d<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>iframe</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

If you paste this code into a file named test.html and open it in a browser you'll see a simple web page with an embedded story map.

Owen

lindsayc

Hi Owen,

Thank you for providing the clear example above. I was able to get your example running.

I've changed map.md to map.html. It's still not able to load properly though. I've turned on the inspector, and I noticed the errors that pop up are due to it looking at elpinguinodev.github.io/map/app.... After first I thought it was looking at map because it's the map page, but I think it's actually looking for the map folder, which doesn't exist. How can I figure out why it looks to map/ or what is telling it to look at map/?

oevans_storymaps

Hi Lindsay,

Owen

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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