Playlist template toggle layer visibility

3647
9
Jump to solution
04-08-2015 10:08 AM
DylanBaier2
New Contributor II

Hi, I have been working with the Playlist template and want to create a toggle to change the visibility for categories like in this story map.

Wilderness Forever - Explore the Photos

I have created the checkboxes and am able to click them but they don't turn the categories on or off. I believe I have to add esri/layers/FeatureLayer to some of the javascipt files. I don't have much experience with javascript and have been trying to piece it together but am a little stuck.

Was just wondering if anyone could point me in the right direction. Thanks.

1 Solution

Accepted Solutions
StephenSylvia
Esri Regular Contributor

This functionality is already build into the playlist app. All you have to do is add a new field “filter” to you playlist points layer. Then set the filter title for each feature. For every unique filter, the app will add a checkbox that toggle those items on/off. Here’s an example that uses it: http://storymaps.esri.com/stories/2013/storylocator/. You’ll notice there is a filter icon next to the search box.

View solution in original post

0 Kudos
9 Replies
StephenSylvia
Esri Regular Contributor

This functionality is already build into the playlist app. All you have to do is add a new field “filter” to you playlist points layer. Then set the filter title for each feature. For every unique filter, the app will add a checkbox that toggle those items on/off. Here’s an example that uses it: http://storymaps.esri.com/stories/2013/storylocator/. You’ll notice there is a filter icon next to the search box.

View solution in original post

0 Kudos
DylanBaier2
New Contributor II

Thanks, I figured it out.

AnnIngerson1
New Contributor II

I am trying to use this filter function with the playlist template. My csv file has a filter field and each feature has a filter defined. But no filter option appears on the story map site.

This is a test site with only one feature in each filter category. Does that affect the function?

0 Kudos
StephenSylvia
Esri Regular Contributor

Can you post a link to your web map so we can investigate?

0 Kudos
AnnIngerson1
New Contributor II

Thanks,

So sorry – the story map site is not yet public – it resides only on my private computer. The map itself is at http://arcg.is/1KrqGiv . I also have the problem that thumbnails stored on a Google site do not display in Internet Explorer – they work fine in Chrome.

Ann Ingerson

Craftsbury Common, VT

802-586-9625

0 Kudos
StephenSylvia
Esri Regular Contributor

The issue is that the filter field must be named exactly “filter” (lowercase f). Alternatively, you should find a filterField option in the config section of the index.html file. If you set it to “Filter,” that should also add the filter correctly. Are your thumbnail images shared publicly? They do not work for me even in Chrome. They would come through in Chrome if that browser was logged into your Google account.

0 Kudos
AnnIngerson1
New Contributor II

Thank you for your speedy assistance. I changed the field name to filter - not capitalized – but the filter option still does not appear in the story map.

The thumbnails were stored on a Google site that is public for all content – I figured a way to host them on Google drive instead and that worked.

Ann Ingerson

Craftsbury Common, VT

802-586-9625

0 Kudos
StephenSylvia
Esri Regular Contributor

Sorry, you must explicitly put the field name into the config for the filter to show up in the app.

0 Kudos
AnnIngerson1
New Contributor II

Thank you – that worked! Might want to suggest updating the Readme file to indicate that.

Ann Ingerson

Craftsbury Common, VT

802-586-9625

0 Kudos