Skip to content

Create a Story Map

Jump to bottom Edit New page
Jim Barry edited this page Jul 31, 2017 · 16 revisions

Create a Story Map

You can use any of the Configurable Apps to build different types of focused HTML, CSS, JS apps. All apps are developed on top of an existing web map and are shared out as a web application. By default, these apps are stored and hosted in ArcGIS Online, but you can also download all of the code locally and host and customize them yourself.

In this exercise, we're going to build a specific type of configurable web app, called a "Story Map".

  1. Click this map to open the map in the Map Viewer. If you have your own map, you can try to use that too.

  2. Click Share > Create a Web App > Configurable Apps.

  3. Under the What do you want to do? column, click Build a Story Map.

  4. In the thumbnail list of templates on the right, click to choose the Story Map Basic template.

  5. On the right side popout of the page, click the blue button CREATE WEB APP.

  6. set the following properties:

Title: Health and Social Services
Tags: health, social, NYC
Summary: A NYC map containing health and social services along with other related layers of data.

Click DONE to launch the configuration page. (You may need to scroll down slightly to see the button.)

  1. Change the following properties:
Choose Swipe Layer: Neighborhoods
Details: 
 Application Title: 2015 Portland Population Density
 Application Summary: 2015 Portland Population Density
Configuration Options:
 Uncheck Enable Basemap Toggle
Splash Screen: 
 Check Enable Dialog Modal
 Dialog Title: 2015 Portland Population Density Map
 Dialog Content: Welcome to Portland! Explore neighborhoods and where people live.
Twitter Options
 Check Enable Twitter Layer
 Search Keyword: train
Webcams.travel Options
 Check Enable Webcams Layer
NOTE: Disable other layers
Search Settings:
 Enable the Neighborhoods layer
 Edit the Neighborhoods layer
 Name: Neighborhoods
 Check Enable Suggestions
 Display Field: Name
 Search Fields: Name
 Click save

Click Save and View > Close.

  1. Click View Application to test-drive your app.

Your app should look something like this.

Bonus

  • Go back to the app and try to change and save some of the configuration settings.
  • View the JSON for the web app by using the REST API to access the item in your account. Try formatting the JSON with try this JSON Editor tool.
https://www.arcgis.com/sharing/rest/content/items/09ed800aca42450c89278c3c6a3815dc/data

NOTE: Replace the item ID above with yours.

  • Get the source code for the public information configurable app here.
Add a custom footer
Add a custom sidebar
Clone this wiki locally