Simple ArcGIS JavaScript Story Map Template

Share Button

I created a simple ArcGIS JavaScript Story Map template. It allows you to have as many story locations as you want, but the template is currently only setup showing three. However, it’s very easy to add more. All that’s needed for each story location is the center coordinates, a story title, the story description, and any markers that you want added. There are four files that are included:

1) index.html
2) style.css
3) script.js
4) story.js

The template is setup so that you only need to edit the story.js file, unless you want to change other behavior. To edit the story.js file, just open it with any text editor, such as Notepad++. I left a useful function in the code that allows you to click on the map and the latitude, longitude, and zoom level will print out to the browser console. You can then use these values when you are setting up the story.js file. If you aren’t familiar with the browser console, just Google, for example, “Firefox console” to find out how to open it. For Chrome you can press CTRL + SHIFT + I to open the console, and then when you click on the map, the coordinates and zoom level will be shown.

Click here to download the template.

Or to view it first, click the image below:

Story Map

Thanks for taking a look! I hope someone can put the template to good use. If you have any questions, please leave them in the comments below.

3 thoughts on “Simple ArcGIS JavaScript Story Map Template

  1. September 9, 2014 at 8:58 pm

    Absolutely great simple tutorial but very powerful!

    1. Ian
      September 9, 2014 at 9:58 pm

      Thanks, Will!

  2. Raimonds
    May 21, 2015 at 1:04 am

    Hello, i just startet to learn js and work whit arcgis. I stuck whit simple problem:
    i hawe created and placed image ower map but cant find any way to make that image to bookmark (specific extent, or coordinates on map. Any sugestions?

    Thx! 🙂

Leave a Reply

Your email address will not be published.