Is there anyway to create different zoom levels and areas of interest for Tabs in the Shortlist viewer.

2478
7
Jump to solution
01-24-2017 10:22 AM
deleted-user-tnw19YYLJ38d
Deactivated User

For example, in my screenshot I want to zoom into each municipality when you switch tabs. Has anyone succeeded in this? 

Thank you in advance.

Kyle M. Potts

regional Municipality of York

1 Solution

Accepted Solutions
MarkCooney
Frequent Contributor

Kyle,

There is a function in the MainView.js file called ActivateLayer that is called when you switch tabs.  You could add some custom code in that function that could change the map's extent to your desired extent for each tab.  Note that you will need to download the source code from the github repo, make your adjustments, and when ready, follow the instructions on how to build the application from the source code in order to get the production ready code (GitHub - Esri/shortlist-storytelling-template-js: The Shortlist story map application template by Es... ).

-Mark 

View solution in original post

7 Replies
MarkCooney
Frequent Contributor

Kyle,

There is a function in the MainView.js file called ActivateLayer that is called when you switch tabs.  You could add some custom code in that function that could change the map's extent to your desired extent for each tab.  Note that you will need to download the source code from the github repo, make your adjustments, and when ready, follow the instructions on how to build the application from the source code in order to get the production ready code (GitHub - Esri/shortlist-storytelling-template-js: The Shortlist story map application template by Es... ).

-Mark 

Aghyan
by
Occasional Contributor

Mark,

Could you please explain which specific code should we use to change map extent in each tab? Thank you.

0 Kudos
MarkCooney
Frequent Contributor

Fereshteh,

As described above, you would want to add the custom code to the method called this.activateLayer in the MainView.js file.  There, you would want to create an array of valid extents (Extent | API Reference | ArcGIS API for JavaScript 3.22 ), then using the index parameter that gets passed into activateLayer, call app.map.setExtent(extentsArray[index]).  Map | API Reference | ArcGIS API for JavaScript 3.22 

Mark

WarrenDavison
Regular Contributor

Hi Pottsk & f.aghyan‌,

I'm just curious if either of you ended up implementing the custom code additions that MCooney-esristaff‌ had suggested? I'm hosting my Story Map for the first time and am fairly new to editing the source code so I was looking for some pointers.

Thanks,

Warren

0 Kudos
deleted-user-tnw19YYLJ38d
Deactivated User

No I have not

Kyle M. Potts | Financial and Data Coordinator, York Region United Way Campaign

Business Services Branch, Corporate Services Department

0 Kudos
Aghyan
by
Occasional Contributor

I found custom coding very complicated, as I understand you also need to publish your new code on your local server. I ended up to use another way to do my project.

0 Kudos
RupertEssinger
Esri Alum

To configure a tabbed app where each tab shows a different extent, scale or content, you may have already looked at our Story Map Series app. Story Map Series isn't place driven like Story Map Shortlist, but if your maps show point features, and you are OK without the picture gallery that the Shortlist provides, you may find Story Map Series useful. In a Story Map Series each tab can show any area at any scale on the same web map, with any choice of layers turned on or off in that map. You can alternately have each tab show a different map. Plus tabs can also show images, videos, etc.

Here are a few Story Map Series tabbed examples in the Story Map Gallery filtered on Travel and Recreation

Gallery | Story Maps  (In that set, this one is a Story Map Series with each tab showing a different Story Map Journal: http://arcgis-content.maps.arcgis.com/apps/MapSeries/index.html?appid=fbf644cbbba441c7bd9b1a00d03c87...  )

Rupert

0 Kudos