Story Map Shortlist: showing all places on a tab with different colors

[CindyKamigaki]

Hi, I'm using the shortlist storymap for art in public places.  I've broken the art out into categories and created individual tabs for each category.  I would like to have a tab the encompasses all the art work and identifies them with their unique individual tab color, so those that visit the map can get an overview of all the art and visually see the breakdown in one tab.  Is there a way to do this or can it please be considered?

[RupertEssinger]

Hi Cindy

There's not an automatic way to make an "All" tab in Story Map Shortlist although it is a pattern that a lot of authors are using and that we may have to accommodate in future dev. We have sort of held off adding an easy way to make "All" because it means that your most busy and potentially slowest drawing tab will be the first one users see (if it is the first tab in your Shortlist).  If you are defining places iinteractively you'd currently have to add them twice to have them in an All tab as well. If you are creating your Shortlist from a CSV file or feature layer, you could duplicate the records to set up an All tab before creating your Shortlist.

So you can create an All tab without having to customize the source code of the app, but having the places in that tab use different colors for their marker symbol based on which tab they appear in (which I think is what you are after) requires a customization. A creative user nheick has done a very cool customization of Story Map Shortlist that implements this, along with a graphical header, basemap switcher, etc. So see what you think. This is a prototype and hasn't been officially published yet: Facilities - Test  

Rupert

[CindyKamigaki]

Hi Rupert,

This is exactly what I'm looking for.  How can I receive notification when it is released?

[RupertEssinger]

Hi Cindy, adding an automatic way to make an "All" tab isn't in our plans yet and it is one we'd have to weigh up. You can make one now but it requires duplicating your places. I'm also not sure if we'd do the color coding like in Nathan's customization. When new Story Map features get released we post about them here in this space on Geonet, and also on our Twitter account and our Planet Story Maps newsletter.

Rupert

[NathanHeick]

Hi Cindy,

From my experience, the easiest way to do this is to make a new tab called All in the story map builder and give it a neutral color.  Then, you need to add a field to the source data called color_id.  This field will store the index of the tab you want to use to set the color of the point.  Tabs are numbered starting at 0.  For the category tabs, color_id would be the same as tab_id .  Then, for the All tab you would make a copy of all of the points from the other tabs and set the tab_id to the index of the All tab, leaving the color_id field alone set to the source tab_id.  From this point on, I think the JavaScript changes are one line.  Instead of pulling the color from the current tab, you tell it to use the color from the tab with index color_id.

Let me know if you need any help on this.  You would have to customize the source code and host it on your own web server.

Nathan

[CindyKamigaki]

Nathan,

Thanks so much for the information. This is a great app and with your modification it will fit our need perfectly! We hope to launch this story map to our residents for Valentine’s Day to do activity.

Thanks again and have a great rest of the week!

[RupertEssinger]

Thanks Nathan Heick‌

For info about how to self-host a story map app in order to make changes to the source code, see: https://community.esri.com/community/gis/web-gis/storymaps/blog/2017/03/28/story-maps-developers-cor... 

Rupert

[NathanHeick]

Hi Cindy,

I actually wrote our app using a color field which stores hexadecimal color values.  I did this because of the way the rest of our customizations are designed.  The solution I proposed to you is what I would do if I only was doing that one customization.  Since I hadn't tested my recommendation and you are on a deadline, I took the time to actually build a story map from scratch using three points and I downloaded the latest source code and modified it.  The hardest part was actually updating the data.  I realized that all of the following fields need to be set appropriately for each feature on each tab when you copy the data to the All tab.

number - Typically, you would start counting at 1 on each tab.

shortlist_id - Unique ID for shortlist feature.  Just copy __OBJECTID.

tab_id - Tab number starting at 0.

color_id - Tab number whose color you want to use to color the point.

Once the data was set up properly, I made an All tab.  Finally, I downloaded the source code and modified it.  If you search for the file MainView.js in the source code, on line 884, you should see the following:

_this.buildLayer(
       theme.features.sort(SortByNumber),
       color
);

I replaced this with:

$.each(theme.features.sort(SortByNumber), function(j, feature) {
       _this.buildLayer([feature], themes[feature.attributes.color_id].color);
});

The final result was:

So, at least we know this approach works on version 2.5.0.

Thanks,

Nathan

[CindyKamigaki]

Nathan,

I’m having our developer help with this marker color coding. And he has discovered that “It seems that when it creates the copy of the map, it strips out anything that isn’t needed. So unless we add the color_id field to what you want displayed in the pop-up (you don’t), then the color_id field doesn’t come along.”

Did you encounter this issue? Did you use the shortlist template to add the color_id.

Any feedback would be greatly appreciated.

[NathanHeickLACSD]

Hi Cindy,

How did you create your features?  Did you use the Shortlist Builder in ArcGIS Online?  Did you use a feature service?  Did you use a CSV file?  It all depends on your data source.

I started with the Shortlist Builder and edited the web map JSON using the ArcGIS REST API.  The Shortlist Builder creates a web map with a shortlist layer defined by a feature collection.  A feature collection is just a representation of a feature class that contains a schema and the features.  In the schema is a "fields" property where the fields are defined.  You need to add the following field to this array:

"fields": [

    ...

    {

        "alias": "Color Index",

        "domain": null,

        "editable": true,

        "name": "color_id",

        "type": "esriFieldTypeInteger"

    },

    ...

]

If you want to do it this way, you can use the ArcGIS Online Assistant to view and edit the web map JSON.  You should make a backup of your web map before doing this.  Also, IE 11 has given me trouble with editing JSON, but Google Chrome works with the ArcGIS Online Assistant.  Basically, you need to add this field to the fields array, which defines the fields for the shortlist layer, and then you will need to add "color_id" to each of the features themselves.  After that, you need to duplicate all of the features for the All tab, update the necessary fields, and then move on to the source code.

If you are using a hosted feature service, it should be pretty easy.  All you should have to do is add the field in ArcGIS Online or Portal.  A long time ago, I tried replacing the shortlist layer from a CSV file and it wasn't too difficult.  I think I just deleted the shortlist layer and added a new layer from a CSV file.  The file had to have the required fields, but you can get those from the web map or the documentation.

If you are having trouble, I can probably help you with this provided that you have the web map shared publically.  I can copy it to my account, modify it, and then you can copy it back.  Either way, let's start with where your features are located.

Thanks,

Nathan