Using different Webmapsp within one map

[JelleStuurman]

I am looking for a way where I have a map in which I can add different web map ID's. Each web map covers the same extent of a different area showing different data.

My question is if it is possible to load different maps within this storytelling playlist template instead of points which brings me to you to a new link (web map / application). Is the story telling playlist the closest solution to realize this or is there another standard template where it is possible to load more web map ID's int one webpage? Please note I do not have much programming experience and therefore I am looking for the simplest solution.

[StephenSylvia]

The playlist template does not have the ability to load a new web map for each item in the list but we do have a couple other templates that should do what you want.

The closest and best option would be to use our Side Accordion template. The templates features a list along the left side of the map that will load a new web map. The app also features responsive design so it will work on smartphones.

Another option is our text and legend template that will add tabs along the top of the map to open additional web maps. If you have any time enabled maps, you will want to use this template.

[JulieK]

Hi,

Is it possible to customize the playlist story map to include another tab to display another web map and have another playlist?

[RupertEssinger]

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.

See: Shortlist App | Story Maps‌

[JulieK]

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?

[RupertEssinger]

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:

RC Military Banners‌

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:

[JulieK]

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.

[StephenSylvia]

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.

[JulieK]

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.

When I do Step 1 &2 of ‘Preview and test development version’, it runs the default webmap (MPS Top 10 Visited Parks 2012) with no filter field. How do I change it to my webmap and set my filter field.  Of course, I am able to do it in index.html after I build it .

Please help, before building the app I want to debug on my local machine.

[StephenSylvia]

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