Story Map Crowdsource: Advanced Configuration

We just launched a new update to our Story Map Crowdsource app. This rollout includes many new enhancements that you have been asking for including:

• Map tooltips to highlight the active points
• New “selected” point display which will allow viewer to quickly navigate though all points in the current map extent
• Updated photo uploader which rejects low resolutions photos, geocodes the photo’s location, and automatically rotates the image
• Improved location picker with “Find on Map” functionality and latitude/longitude parsing (include DMS)
• Enhanced mobile layout

We know with all these enhancements, there are still missing features that some users have requested to help tell their story. Some of these features include: enabling popups on reference layers, collecting full resolution images, and restricting min/max zoom of the map. The code to support some of these features has already been included in the viewer portion of the app but due to time constraints or to keep the configuration simple for most authors, we have not added them to the online builder.

Sample disaster response Story Map Crowdsource app

As an example, I’ve created the mock disaster assessment crowdsource story above that showcases all the changes that I’ll demonstrate in this post. We changed the basemap and added a reference layer that shows the earthquake risk through popup. We’ve also restricted the zoom to help the reader not get lost when navigating the story, and are collecting the full resolution image for analysis later. This post is similar to an earlier post we did about customizing the crowdsource form labels. If you missed it, you can find it here:

How to personalize your Crowdsource story even more

Warning! these tips involves editing the JSON of your story and carries a risk that you will corrupt your story if you are not careful. Unless you are comfortable with this process, it’s recommended that you only do this on a new story, not one where you’ve already started collecting photos.

Instructions

Ok, here’s what you need to do…

1. Go to the ArcGIS Online Assistant and log in with your ArcGIS Online account.
2. In the header, click I want to… View an item’s JSON.
3. Find your Crowdsource story application item in the left side bar.
4. Scroll down to the Data section in the right panel and click the pencil icon to start editing the JSON.
5. Find the parameters you want to change (as described below) and edit them.
6. Once you have finished one of the changes below, click the save button, and open your crowdsource story to test the change.

Be careful not to remove any quotes or commas or you will invalidate your JSON and break your story.

Add popups to a reference layer

Before you can enable popups on your web map, you first need to add a layer to your web map using the ArcGIS Online map viewer and configure the popup using the layer options. Then in the ArcGIS Assistant, change the following options under the webmapOptions object.

1. Set ignorePopups to false
2. Set usePopupManager to true

Note: You can find additional web map options here: https://developers.arcgis.com/javascript/3/jsapi/esri.arcgis.utils-amd.html#createmap

Set the min and max zoom for the map

Add these new variables to the mapOptions object under the web map options object we just edited:

1. Set minZoom to the smallest scale zoom level you want your map to show (Usually between 0 and 19).
2. Set maxZoom to the largest scale zoom level you want your map to show (Usually between 0 and 19).

Note: You can find additional map options here: https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#map1

Collect original size photos

Because the Story Map Crowdsource app is a web hosted application, we make sure to optimize all photos before uploading them. This makes sure photos still load quickly even if you view it on a smartphone and on a slower internet connection. By adding an additional photo setting, we can tell the crowdsource form to collect the full resolution photo and upload it as a third attachment to the feature service. This photo will not be used in the app but can be opened by using the data tab in the ArcGIS Online item page of the feature service or any other attachment viewer. By setting the quality to 1 we keep the app from compressing the photo. Leaving out any size options like the other photo settings have makes sure the app won’t resize the photo.

Once you have completed your edits, click the save button in the AGO Assistant. If the save button is red, your JSON is not valid. After you have saved, be sure to test your changes by viewing the crowdsource app.