It seems like the map should be able to that just like in Shortlist Beta.
Hi Jazmin,
Your post made us realize that we haven't got any help info about how to set up a Story Map Journal so clicking on places on the map can take your users to specific sections. Story Maps team memberCooper Thomas has remedied that with the following blog post. This isn't an out-of-the-box option on Story Map Journal: it's a customization that requires downloading our source code and hosting it yourself so you can tweak the code a bit. So the blog post is on our Story Maps Developers' Corner blog:
> Navigate Map Journal Sections Using the Main Stage Map
Hope that helps
Rupert
Hi, In this link you can find how can you do it, I hope it helps you.
https://blogs.esri.com/esri/arcgis/2017/01/05/adding-links-to-sections-in-story-map-journal/
Thanks for the response. This is not exactly what i am looking for. This workflow is to jump between sections. I want to be able to click on any of the 15 markers on the main stage map and have the side panel automatically navigate to the section that corresponds to the marker (or project in my case). Does this make sense?
Jazmin Varela
Associate Director for Conservation Planning
and Integrative Services
The Conservation Fund
Office number: 919-951-0117
Email address: jvarela@conservationfund.org
www.conservationfund.org<http://www.conservationfund.org>
<http://www.conservationfund.org>
Thanks for the post. I followed your instructions and feel i am pretty close to but when i try to view the story i get a:
Map Journal is initializing
Thanks for waiting
The story map never loads. Any ideas?
If your customized story is public, can you share the URL to the code installed on your server.
Currently I have it here:
http://54.225.85.37/storymaps/cfs/
<http://54.225.85.37/storymaps/cfs/>
Story Map Journal<http://54.225.85.37/storymaps/cfs/>
54.225.85.37
This story map was created with the Story Map Journal application in ArcGIS Online.
Hi Jazmine, I took a look at the developer console of your app and it appears your app fails to load because there are JavaScript errors that get thrown which stops the execution of the rest of the code.
The first error occurs in your app/custom-scripts.js file. You are trying to use the topic module outside the scope that it has been defined. You need to add your scripts that use topic inside of these brackets where topic is scoped to:
<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"dojo/topic"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>topic<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
I've cleaned up that error and removed the unused topic event (app-load) so you can just replace the whole custom-scripts file with the following:
<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"dojo/topic"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>topic<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> WEBMAP_ID <SPAN class="operator token">=</SPAN> <SPAN class="string token">"6c09c4842b6c4974bb91ea05aa6952bb"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> LAYER_ID <SPAN class="operator token">=</SPAN> <SPAN class="string token">"ProjectLocations_costum_6228"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> clickHandlerIsSetup <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN> topic<SPAN class="punctuation token">.</SPAN><SPAN class="token function">subscribe</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"story-loaded-map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN> result<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">==</SPAN> WEBMAP_ID <SPAN class="operator token">&&</SPAN> <SPAN class="operator token">!</SPAN> clickHandlerIsSetup <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> app<SPAN class="punctuation token">.</SPAN>maps<SPAN class="punctuation token">[</SPAN>result<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>response<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> layer <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN>LAYER_ID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN> layer <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> index <SPAN class="operator token">=</SPAN> e<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"Rank"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> topic<SPAN class="punctuation token">.</SPAN><SPAN class="token function">publish</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"story-navigate-section"</SPAN><SPAN class="punctuation token">,</SPAN> index<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
You also have some additional errors in the core part of the app which you modified but it is hard to debug since you have already build and minified the code. Can you post the other changes you made to the app? It's easiest if you make the changes on a fork of the github repo so all the changes get highlighted inline.
Stephen,
The only changes i did to the code were the ones suggested in the post per my initial question. You can read that post at: https://developerscorner.storymaps.arcgis.com/navigate-map-journal-sections-using-the-mainstage-map-ab827a105d0c
<https://developerscorner.storymaps.arcgis.com/navigate-map-journal-sections-using-the-mainstage-map-ab827a105d0c>
Navigate Map Journal Sections Using the Main Stage Map<https://developerscorner.storymaps.arcgis.com/navigate-map-journal-sections-using-the-mainstage-map-ab827a105d0c>
developerscorner.storymaps.arcgis.com
The Map Journal interface contains two primary elements: the narrative panel (also referred to as the side/floating panel), and the main stage. As the reader scrolls ...
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
