story-map-journal-generator

所属分类:内容生成
开发工具:JavaScript
文件大小:67KB
下载次数:0
上传日期:2015-03-26 17:45:50
上 传 者sh-1993
说明:  以编程方式生成故事地图日志
(Generate your Story Map Journal programmatically)

文件列表:
LICENSE (11325, 2015-03-27)
app (0, 2015-03-27)
app\app.css (338, 2015-03-27)
app\app.js (15121, 2015-03-27)
data (0, 2015-03-27)
data\map-journal-item-data-template.json (13214, 2015-03-27)
data\map-journal-item-template.json (837, 2015-03-27)
data\map-journal-sample.json (3195, 2015-03-27)
index.html (1678, 2015-03-27)
index.js (24, 2015-03-27)
lib (0, 2015-03-27)
lib\bootstrap.min.css (117150, 2015-03-27)
lib\jquery-2.1.3.min.js (84320, 2015-03-27)
package.json (665, 2015-03-27)

# 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" } } } ```

近期下载者

相关文件


收藏者