Embed map tour in website

lindsayc · ‎09-25-2016

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

OwenGeo · ‎09-28-2016

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

Owen Evans
Lead Product Engineer | StoryMaps

View solution in original post

OwenGeo · ‎09-26-2016

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.

<html>

<head>
<title> favorites / bookmark title goes here </title>
</head>

<body bgcolor="white" text="blue">

<p>This test page simulates the embedded map. Size is 950px x 600px</p>
<br>
<br>

<iframe width="950" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid=01be34448b9046798cdc6378b9649a9d"></iframe>

</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

Owen Evans
Lead Product Engineer | StoryMaps

lindsayc · ‎09-27-2016

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/?

OwenGeo · ‎09-28-2016

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

Owen Evans
Lead Product Engineer | StoryMaps