Creating slides for story maps

Blog Post created by tbrenneman-esristaff Employee on Aug 19, 2016

I frequently create story maps for presentations. It is great for showing slides and maps. There is a great blog that describes the basic process for doing this. One thing that I have found challenging is getting the image centered and maximized. Plus I also like to have links on my images that open other web pages. To do this I found that the best solution I could find was to create a web page as a wrapper for the slide image. Since I was doing this a lot I created a web page that takes the image and url links as parameters. I called the page slide.html and it takes two parameters: slide and url. Slide is the path to the image for the slide. URL is the link for the image. If you don’t want to have a link for the image (click the image to open a web page) just leave the URL parameter off.


Here is the web page: http://esridotpublic.s3.amazonaws.com/screenshots/slide.html

As you can see I host my images using Amazon S3. So I just drop this web page in the same folder as my slide images and I can reference them by name. Here is an example:


I’m using both parameters here.




Notice when you view this page you can click it to open the Roads and Highways web page.


When you put this in a story map like a map journal, choose the option to insert a Web page and use the Fit option.



Here is a story map with the image above:



Feel free to reference this web page directly with links to your own images and web pages. But you can also download the source and host it directly with your images. You can download the source here.