# Story Map Journal Generator
[Story Map Journal](http://storymaps.arcgis.com/en/app-list/map-journal/) is ideal when you want to combine narrative text with maps and other embedded content.
The typical Map Journal creation involve using the integrated WYSIWYG builder. This application let you generate a Map Journal through a simple JSON document, without using that builder.
The resulting application is hosted in ArcGIS Online, you can edit it later as if you had used the builder.
[Live demo](https://rawgit.com/glazou/story-map-journal-generator/master/index.html) |
[Map Journal GitHub repository](https://github.com/Esri/map-journal-storytelling-template-js) |
[Map Journal page on Esri Story Maps website](http://storymaps.arcgis.com/en/app-list/map-journal/)
## Instructions
The usage scenarios are:
* as a node.js application with ArcGIS Online credentials defined in the configuration file
* as a web application with authentication through ArcGIS Online OAuth dialog
* as a web application with authentication through ArcGIS Online credentials defined provided in the configuration file
### As a Node.js application
1. Install [Node.js](http://nodejs.org/)
2. Download the application
3. Run `npm install` in the application root
4. Edit app/app.js with your credentials
5. Optionally, if you are going to use the `webmap-x-y` type, edit app/app.js with a webmap ID
6. Run `node index`
### As a web application with OAuth authentication
1. Download the application
2. Deploy on a web server
4. Edit app/app.js with an ArcGIS Online OAuth App ID, see [adding apps for ArcGIS Online for Organizations users](http://doc.arcgis.com/en/arcgis-online/share-maps/add-items.htm#ESRI_SECTION1_0D1B620254F745AE84F394289F8AF44B) or [registering your application for ArcGIS for Developers users](https://developers.arcgis.com/authentication/signing-in-arcgis-online-users/#registering-your-application)
5. Optionally, if you are going to use the `webmap-x-y` type, edit app/app.js with a webmap ID
6. Access the application over the web server
### As a web application with ArcGIS Online credentials
1. Install [Node.js](http://nodejs.org/)
2. Download the application
3. Run `npm install` in the application root
4. Edit app/app.js with your credentials
5. Optionally, if you are going to use the `webmap-x-y` type, edit app/app.js with a webmap ID
6. Access the application over the web server
**Make sure to not deploy the application on a public server to avoid exposing your credentials.**
## JSON configuration
The JSON defining the Map Journal to be generated can be edited through `data/map-journal-sample.json`.
The general JSON structure is:
```
{
title: 'Journal title',
sections: [
{
// First
},
{
// Second section
},
// ... limited to 99 sections ...
]
}
```
With a section being defined by a title a `Main Stage` (larger area) and `Panel` (smaller scollable area intended for the narrative).
```
{
"title": "",
"mainstage": {
// Image, video, webpage or map configure goes here
},
"panel": {
// Text, can include images, videos, webpage and map
}
}
```
See some examples below.
**Section with an image in the Main Stage**
```
{
"title": "
First section
",
"mainstage": {
"type": "image",
"url": "http://farm8.static.flickr.com/7373/13429795365_f57595be16_b.jpg"
},
"panel": {
"text": "
Image in main stage
"
}
}
```
**Section with a web map in the Main Stage**
```
{
"title": "
Second section
",
"mainstage": {
"type": "webmap",
"id": "ea8e4e1f70014f3a8919dc3d8c08a29e"
},
"panel": {
"text": "
A Map of world volcanoes.
Open the Map in ArcGIS Online Map Viewer.
"
}
}
```
**Section with a web page in the Main Stage and an image in the panel**
```
{
"title": "
Third section
",
"mainstage": {
"type": "webpage",
"url": "http://story.maps.arcgis.com/home/webscene/viewer.html?webscene=fd3b56***4801434aa71f75b1926bde5b&ui=min"
},
"panel": {
"text": "
Embed of ArcGIS Online scene viewer, link to the scene.
"
}
}
```
**Section with a map in the Main Stage and in the panel configured as an x/y**
```
{
"title": "
Fourth section
",
"mainstage": {
"type": "map-x-y",
"x": -116.538019,
"y": 33.8258***,
"mapScale": "block",
"mapSymbolUrl": "http://static.arcgis.com/images/Symbols/Shapes/PurplePin2LargeB.png",
"popupContents": "Hello Palm Springs!"
},
"panel": {
"text": "
Map in the main stage + map in the panel
",
"map": {
"x": -116.538019,
"y": 33.8258***,
"mapScale": "continent"
}
}
}
```