topic Embed map tour in website in Classic Esri Story Maps Questions

Embed map tour in website

lindsayc — Sun, 25 Sep 2016 18:03:14 GMT

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

Re: Embed map tour in website

OwenGeo — Fri, 10 Dec 2021 20:05:53 GMT

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

Re: Embed map tour in website

lindsayc — Wed, 28 Sep 2016 01:10:02 GMT

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

Re: Embed map tour in website

OwenGeo — Wed, 28 Sep 2016 14:17:25 GMT

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