topic Re: Story Map Shortlist: showing all places on a tab with different colors in Classic Esri Story Maps Questions

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

CindyKamigaki — Wed, 31 Jan 2018 15:18:24 GMT

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?

Re: Default map locations

RupertEssinger — Wed, 31 Jan 2018 19:57:18 GMT

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

Re: Default map locations

CindyKamigaki — Wed, 31 Jan 2018 20:07:32 GMT

Hi Rupert,

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

Re: Default map locations

RupertEssinger — Wed, 31 Jan 2018 20:36:59 GMT

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

Re: Default map locations

NathanHeick — Thu, 01 Feb 2018 03:54:49 GMT

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

Re: Default map locations

CindyKamigaki — Thu, 01 Feb 2018 12:57:27 GMT

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!

Re: Default map locations

RupertEssinger — Thu, 01 Feb 2018 17:35:34 GMT

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-corner-an-introduction-to-hosting-your-own-story-map

Rupert

Re: Default map locations

NathanHeick — Thu, 01 Feb 2018 21:26:11 GMT

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

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

CindyKamigaki — Wed, 07 Feb 2018 21:11:57 GMT

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.

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

NathanHeickLACSD — Wed, 07 Feb 2018 23:00:42 GMT

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

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

NathanHeickLACSD — Fri, 09 Feb 2018 18:22:50 GMT

Hi Cindy,

Did everything work out okay? I can help if you need it.

Thanks,

Nathan

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

CindyKamigaki — Mon, 12 Feb 2018 12:58:07 GMT

Hi Nathan,

Still working on it. Discovered that you have to upload a shapefile and cannot use the published map on the server. I'm going to continue to work on it this week and will let you know how it goes. Once it's up, I'll share it with you to see what you think. Thanks so much for sharing your information!

Thanks

Cindy

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

CindyKamigaki — Wed, 21 Feb 2018 16:11:22 GMT

Hi Nathan,

So, we made changes to the code and here's the link http://gis.frederickco.gov/PublicArt/. It still is in test mode, cleaning up text, colors, etc. One thing I have been noticing is the pictures in the Bronze tab are slow to appear in Chrome and FoxFire. Seem to do ok in IE. Have you experienced this issue? Once I click on the second tab (Community Canvas) and go back to Bronze the pictures then appear. I have the pictures as thumbnails no bigger than 55KB, so that should be hanging it up. Any thoughts?

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

CindyKamigaki — Wed, 21 Feb 2018 17:23:58 GMT

Hi Nathan,

Update...it must have been a data issue. I switched data around and now it is working just fine. I have no idea why that would cause issues, but it seems to be resolved.

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

NathanHeickLACSD — Wed, 21 Feb 2018 17:46:09 GMT

Hi Cindy,

Looks good! For your information, the points on the first two tabs after number 1 don't have the same color as the tab. Points numbered 1 are fine. Otherwise, you can add support layers to your web map underneath the Shortlist layer and they will show up in the map. That way you could add the city limits, for example. Furthermore, you can use whatever basemaps suit your style. You might want to use the imagery layer with reference data like street names. Next, if you want to, you can put the All tab on the left by reordering the tabs in the Shortlist Builder and editing the tab_id and color_id values in the data. These are all more ideas for you to have at your disposal.

It's exciting to see your work! You have a lot of carved wood sculptures.

Nathan

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

NathanHeickLACSD — Wed, 21 Feb 2018 18:07:01 GMT

Just now, I did see some issues on the pictures on the detail slides. Sometimes the pictures would show up partially in rectangular patches of different sizes. Clicking back and forth through the slides caused them to refresh and then finally show up, but the pictures do sometimes load funny. I hope that helps.

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

AndreaMcIntosh1 — Thu, 22 Mar 2018 18:41:26 GMT

Hi Nathan I am trying to give this a go. I was wondering can all of this be done in the JSON through the online assistant or do you have to host it yourself?

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

NathanHeickLACSD — Thu, 22 Mar 2018 20:08:20 GMT

Hi Andrea,

The application has three main components, a web map item with a point feature layer, a web app item that includes the tab definitions, and the builder/viewer application. The process I described above requires changes to all three, which requires you to download the source code and modify it. The changes to the code are pretty simple and Esri has good instructions on how to download the source code and deploy it. I think you can also add the color_id to the feature layer multiple ways. You could use the ArcGIS Online Assistant to edit the feature collection created by the Shortlist Builder in the web map. You could start with a feature service with that field as your data source for the point features. Finally, you probably could build the data in Excel and add it to the web map. That should make a feature collection in the map. I would probably recommend going with the feature service approach. That option wasn't available when I started my app.

Nathan

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

AndreaMcIntosh1 — Thu, 22 Mar 2018 20:12:58 GMT

I cant host it myself so I guess I will not be able to do it. Thanks so much for your reply.

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

rocioveloz — Thu, 04 Apr 2019 16:23:13 GMT

Hi, all. We want to include the ALL tab in our shortlist, so i duplicated our records in the csv and set the tab_name for the second half of my records to All, because i want the ALL tab to be last. but once i uploaded the csv onto my shortlist, the ALL tab appeared in the middle and i cant figure out why. Any ideas?