nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

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

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:

Test

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.

CindyKamigaki

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

CindyKamigaki

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?

CindyKamigaki

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.

NathanHeickLACSD

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

NathanHeickLACSD

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.

rVeloz

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?

NathanHeickLACSD

Good Morning Rocio,

I am a little rusty with the Shortlist story map since I have not touched the app for a while. Also, I forgot the experience of loading the data in with a CSV file. However, I think I could probably figure out the issue if I had your CSV file. Could you post that? Each tab has a tab_id and I believe they start with 0. The tab order follows the tab_id numbering.

Thanks,

Nathan

rVeloz

Hi, Nathan. I appreciate your response and help. I am using the 'as-is' option obviously, which according to the included ReadMe, requires a specific template with specific fieldNames. One of the required fields is TAB_NAME, which is what the shortlist builder uses to create the tab names."TAB_NAME - the name of the tab the place will be displayed in. The Shortlist will create a tab for each unique value of this field, in the order in which the values occur in your data. A TAB_NAME field still has to be present and populated even if your Shortlist will only have one tab. If your Shortlist only has one tab, the tab name you include in this field does not appear to your end users. If the value of this field is blank for any place, that place will not be displayed if you create your Shortlist with the 'as-is' authoring option, so you can leave the field blank to temporarily hide a place."

the ReadMe also states: "The value of PLACENUMSL has no effect on the order of the tabs in your Shortlist:Tab order is determined solely by record order".

while i do include a PLACENUMSL field in my csv, i have the numbering option turned off in the settings. click here for csv

i hope you can see my file from that link. not sure how to attach it here.

NathanHeickLACSD

I would have to look at it after work. However, have you tried to edit the application itself? You should be able to click on the Organize Tabs button and drag the tabs up and down to change the order. From the item page, click on Configure App. When the Builder opens up, click on Organize Tabs.

rVeloz

Nathan, the 'as-is' option doesnt allow for much modification. The only edit it allows for the Tabs is to change the TabColor. All the data is grabbed from the csv.

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.