Hi,
Is it possible to customize the playlist story map to include another tab to display another web map and have another playlist?
HI Julie
You could customize the Playlist like that but we'd recommend using the Shortlist app if you want to present different sets of places of interest in different tabs in a story map.
Thanks for replying!!
I have seen the shortlist app but the thing is , every tab has many categories and we want the filter tool to have the ability to turn off different categories.
Is it possible to customize the shortlist app to include the Filter tool like in Playlist app?
You could have multiple tabs in the Shortlist, one for each of the categories you want people to be able to choose. Tabs are easier to use and more fun that having a control for turning categories on or off.
You could customize the Shortlist to add a filter for typing in a keyword filter but I've not seen an example I can point you at that does that specifically. Note that unlike the Playlist, the Shortlist applies a spatial filter to the places in each tab: so when the user zooms in the tabs update to show the places in that extent.
Here's a Shortlist example that adds a search function but it is a search on the map rather than a filter on the items:
Note this was created by the City Of Rancho Cucamonga, CA, who received the President's Award from Jack Dangermond at the User Conference this week in San Diego for their enterprise GIS implementation. Here's a picture from the UC Plenary with that team and their Shortlist app getting their award from Jack:
Thanks Rupert for replying. This is pretty cool !
In my scenario, I have multiple categories within each tab and a Shortlist story doesn't allow that which is why I am looking for help to customize the playlist storymap.
How do I go about customizing Playlist storymap to show another tab(webmap)? I have the developers download of Playlist but some guidance would really help here:) thanks so much.
This should actually be pretty easy to do in the playlist app if you have a little html/css/javascript knowledge. The playlist is populated with one or more point layers in your map. Normally, you would create a single point layer and add a field for both the filter and the icon color. In your case, you will want to add a new point layer for each tab that you want to create. Within each point layer, add an icon color field and filter name field as you want them to be displayed in the final version.
When you first load the map into the playlist, all the points from multiple layers will show up in a single list. If you inspect one of the playlist items wrappers in the side panel (e.g. the strip that contains the icon, thumbnail image, and title text) with a web debugger (make sure the element you are looking at has the class "playlist-item"), you should see the follow 3 data attributes: layer-id, object-id, and data-filter.
Now you can add tabs to the html and hook them up to a new event function within the "addEvents" function in the List.js file. For each tab, you should add a click event that will select all the "playlist-items" and add the class "hidden-layer" then select all the "playlist-items" that also have the "layer-id" that matches the layer you want to display and remove the class "hidden-layer." You'll also want to do something similar to update what checkboxes appear in the filter dropdown. At the end of this function, call "setItemResults()" to update the playlist and sync the points displayed on the map.
Once you have added the JavaScript, you'll need to add this line of CSS to the _list.scss file:
.hidden-layer{
display:none;
}
If you have done this correctly, when you click a tab, the app will hide all the playlist items that do not match that layer id, then the "setItemResults()" function will run and find all the hidden playlist items and also hide the corresponding points on the map.
Hi,
Thanks for replying!!
You are suggesting that I use a single webmap with two point layers for two tabs. When you click a tab, corresponding playlist items will be mapped and listed on the left. Is that what you meant?
I followed this guide (https://github.com/Esri/playlist-storytelling-template-js#developer-guide) to setup the playlist app on my machine.
Please help, before building the app I want to debug on my local machine.
Yes, you should use a single web map with multiple point layers.
In the developer download, the config is in the data > config.yml file