Story Map Crowdsource

Deprecated App (Mature Support)

This application is no longer in active development. For more information, read our blog post.

The Story Map Crowdsource℠ app enables you to publish and manage a crowdsourced story to which anyone can contribute photos with captions. Use it to engage a specific or general audience on the subject of your choice. To contribute to your story people can sign in with their Facebook, Google, or ArcGIS account, or use a guest option. A vetting function lets you review and approve contributions.

View it live | Download | Crowdsource page on Esri Story Maps website

Latest release is version 0.10.0. See the release page for release notes.

For more information about using and customizing Esri's Storytelling Apps follow the Story Maps Developers' Corner.

Help content

• Introduction
• Instructions
• Feedback / support
• FAQ
• Customize the look and feel
• Issues
• Contributing
• Licensing

Introduction

A Crowdsource application can be created from ArcGIS Online or from Esri Story Maps website. The story's data are stored in a Web Application Item (this includes the narrative content, reference to the web map and the settings). Contributions to the story are stored in a feature service with photos being stored as feature attachments. This repository provides the application source code for developers that want to customize Crowdsource.

For more information about the Crowdsource app, including a gallery of examples and a step-by-step tutorial, please see the Crowdsource page on the Esri Story Maps website.

Instructions

Production Version

First create your Crowdsource story in ArcGIS Online using the step-by-step tutorial. Once your story is ready, you have to find its ID in ArcGIS Online. The ID is a 32 character string that you will find in your web browser's address bar when you are viewing your series.

1. Download the application
2. Deploy the application on your webserver. See FAQ for details (Your server must be accessible over a secure https connection).
3. Edit index.html, find the configuration section on line 24 and paste in your application ID
4. Navigate to index.html (e.g., https://www.example.org/StoryMapCrowdsource/index.html)

Developer Version

First create your Crowdsource story in ArcGIS Online using the step-by-step tutorial. Once your story is ready, you have to find its ID in ArcGIS Online. The ID is a 32 character string that you will find in your web browser's address bar when you are viewing your series.

Customize

1. Fork this repo into your github account.
2. Edit index.swig under the src folder, find the configuration section on line 39 and paste in your application ID
3. Open the console/terminal, go to the uncompressed folder and:
   • Install npm dependencies: npm install (Node version 6 or 7 is Required).
   • Install bower dependencies: bower install (Bower is Required).
   • Run the grunt development server: grunt (Grunt is Required).

Build and Deploy

1. When you have finished making changes, run grunt test to build a production version of your app and test it with the include https server.
2. After testing your app, deploy it to your production server (Your server must be accessible over a secure https connection).

Enjoy! You can continue to use the builder in ArcGIS Online to modify your story.

Feedback / support

We would love to hear from you!

• StoryMaps Website
• Let us know about your application
• Story Maps forum on GeoNet
• @EsriStoryMaps
• ArcGIS Blog

When you contact us, don't hesitate to include a link to your application to make it easier for us to understand what you are working on.

FAQ

What should I check before publishing a Crowdsource?

We recommend that you perform the following checks before sharing your Crowdsource with your audience:

• Check that all your content is shared with your audience (webmaps, medias, ...). Typically you can use another computer than the one you have used to build your story to make sure everything is loading properly. Alternatively this article will show you how to configure your browser for an incognito session or you can just sign-out from ArcGIS Online and any service that you have used to host your resources.
• Try the application on different browsers, screen resolutions and mobile devices. You can emulate mobile devices inside your desktop browser.

What are the supported browsers?

Crowdsource is supported on Internet Explorer 11 and above, Chrome, Firefox, Safari and the most recent tablet and smartphone devices.

We actively test the application in all major browsers but if you experience difficulties especially with the builder, we recommend that you use Chrome.

Security

Can I keep my Crowdsource private?

Yes, the regular ArcGIS Online security model applies. By default your Crowdsource is private, you can share it through Crowdsource builder or ArcGIS Online. When you share your Crowdsource, it is your responsibility to make sure that all the resources of your Series (webmaps, images, videos) are accessible to your audience.

Who can edit my Crowdsource?

A Crowdsource can be edited by its owner (the named account that initially created the Crowdsource), organization administrators or users in a group that has been given update permissions if the app is shared into that group.

Can I use private web map or layer?

Yes.

When the Crowdsource is hosted in ArcGIS Online, users that don't have access to the Crowdsource or a webmap used in the Crowdsource will be redirected to the ArcGIS Online sign-in page. It is not possible to display an authentication dialog in the Story Map Crowdsource when the story is hosted in ArcGIS Online.

When the Crowdsource is hosted on your web server, an authentication dialog will appear inside the application.

If you are using secured services but don't want users to have to authenticate, you can use a proxy to store the username/password to be used, see Working with Proxy Services, and add a proxy rules to specify what services need to use the proxy by editing PROXY_RULES in app/config.js.

Deployment

Deploying a Story Map Crowdsource requires you to use ArcGIS Online. The story's content have to be created using the Crowdsource builder and will live in a Web Application Item.

Can I use the template without ArcGIS Online?

This is not a supported use case at that time. Please let us know if you are interested by such a scenario. Crowdsource relies heavily on the Portal for ArcGIS API but it is doable to modify the application to support other scenarios.

Where is the data stored?

The story's data are stored in a Web Application Item (this includes the narrative content, reference to the web map and the settings). Contributions to the story are stored in a feature service with photos being stored as feature attachments.

Can I use the builder with the downloadable?

Yes, when the template is configured with an application ID, adding the URL parameter 'edit' will open the builder. You will be prompted for user authentication through the Identity Manager.

How to deploy the application on a web server?

If you are not familiar with web servers here is three solutions:

• Use a free hosting service like Dropbox, you may have to configure Dropbox to enable webpage hosting
• Use the web server that comes with your server Operating System. On Windows this is Internet Information Services (IIS), if you have a C:\inetpub\wwwroot folder on your computer, you should be able to access it's content using http://localhost
• On Windows or Mac OS, use a simple web server like Mongoose (not recommended for production)

Can I use a single deployment of Story Map Crowdsource for multiple stories?

Yes. If you have customized the application and deployed it on your server, you don't need to copy it multiple times, edit index.html and paste a different application ID for each story you want to publish.

Instead edit index.html, locate the configOptions section and fill the authorizedOwners property with the ArcGIS Online login of the owner(s) of the Crowdsource you want to use. This make possible for the application to display any of the Crowdsource created by the specified user(s) through an URL parameter.

Example of the same application displaying two stories:

• http://example.com/StoryMapCrowdsource/index.html?appid=c7ad1a55de0247a68454a76f251225a4
• http://example.com/StoryMapCrowdsource/index.html?appid=d8j3g855de0247a68454a76f251225a5

Customize the look and feel

Custom color theme

As Crowdsource doesn't yet offer the ability to create a custom theme through the builder.

For example if you are using the tabbed layout and have kept the default theme, open app/config.js, locate the LAYOUT property and edit the following line with the desired colors.

Most of the look and feel customization can be done using the regular Application Download and including the css/html overrides directly into index.html.

As the application Javascript and CSS are minified, we don't recommend that you directly edit those files (e.g. main-app.min.css, main-app.min.js, ...). In addition to being hard to edit, this will make application update complex for you.

The easiest way to find the id or path of a DOM element that you want to customize is to use your browser developer tool, read documentation for Chrome, Safari, Firefox.

Customization can achieved through the style tag already present for you in index.html (search for /* CUSTOM CSS RULES */).

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2016 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's LICENSE.txt file.

Some open-source components of this project are licensed under other License terms, see src/lib/ folder for respective license files.