I have a map with approx. 15 points and I would like to use the Story Journal template. Is there a way to jump from each marker to the section on the floating panel that talks about that specific marker?

[JazminVarela]

It seems like the map should be able to that just like in Shortlist Beta. 

[YorladyVela2]

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/

https://blogs.esri.com/esri/arcgis/2017/01/05/adding-links-to-sections-in-story-map-journal/

[JazminVarela]

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>

[RupertEssinger · Accepted solution]

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

[JazminVarela]

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?

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>

[RupertEssinger]

If your customized story is public, can you share the URL to the code installed on your server.

[JazminVarela]

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.

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>

[StephenSylvia]

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:

define(["dojo/topic"], function(topic) {
  
});‍‍‍

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:

define(["dojo/topic"], function(topic) {
  var WEBMAP_ID = "6c09c4842b6c4974bb91ea05aa6952bb";
  var LAYER_ID = "ProjectLocations_costum_6228";
  var clickHandlerIsSetup = false;

  topic.subscribe("story-loaded-map", function(result){
    if ( result.id == WEBMAP_ID && ! clickHandlerIsSetup ) {
      var map = app.maps[result.id].response.map;
      var layer = map.getLayer(LAYER_ID);

      if ( layer ) {
        layer.on("click", function(e){
          var index = e.graphic.attributes["Rank"];
          topic.publish("story-navigate-section", index);
        });
      }
    }
  });
  
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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.

[JazminVarela]

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 ...

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>

[StephenSylvia]

Ok, I've figured out what the issue is. When you added the appid to the index.html file, you did not use the appid. Instead, you used the web map id to the map you were working with. Web maps have a different data structure so the app was throwing errors when it didn't find the correct properties. Replace the web map id that you used in the index.html with your map journal appid to link your local code with the story hosted on ArcGIS Online. The map journal appid is shown in the URL when you are viewing the map journal.

Once you do that and you fix the issues in the comment above, you should be good to go.

Cooper is also adding further clarification to his blog post for others that may read it in the future.