Automatic scrolling to corresponding section on clicking point in the Main Stage?

4063
12
06-06-2016 10:58 AM
Highlighted
New Contributor II

In the Map Journal is there a way to automatically scroll to the corresponding section in the Side Panel when clicking the point on the map in the Main Stage?

Reply
0 Kudos
12 Replies
Highlighted
Occasional Contributor II

It takes a bit of configuring but it can be done.  Are you self hosting the story map or using ArcGIS Online?

Reply
0 Kudos
Highlighted
New Contributor II

Yes, were are self-hosting and have not been able to find a way yet in our map journal app.

Reply
0 Kudos
Highlighted
MVP Regular Contributor

I did this here Impressions de France

Eventually I will write a blog post to explain all my customization.

Highlighted
New Contributor II

That looks like exactly what we are trying to do. Can't wait to find out what you did!

Our map journal would seem much easier to navigate with this feature added.

Reply
0 Kudos
Highlighted
MVP Honored Contributor

Really nice story map, Tim Witt​!

Reply
0 Kudos
Highlighted
MVP Regular Contributor

Thanks Ken Buja , it took a long time to make all the customization

Reply
0 Kudos
Highlighted
MVP Regular Contributor

Here is a quick rundown:

In the feature service that you use in your map you need a field (call it Number) that has a number for each feature that corresponds with the section number it will be in.

In your code you need the following:

topic.subscribe("story-loaded-map", function(){

  setTimeout(clickmap, 1000);

  });

function clickmap (){

  app.map.on("click", function(evt) {

  //if (app.data.getCurrentSectionIndex() !== 0){

  if (evt.graphic == undefined) {

  console.log("no graphic");

  } else {

  if (evt.graphic._count > 0){

  // You need to have a Number attribute in your feature layer that corresponds to section number

  sectionID = evt.graphic.attributes.Number;

  topic.publish("story-navigate-section", sectionID);

  ///////////////////////////////////////////////////////

  } else {

  console.log("nothing");

  }

  }

  });

}

In my example the click will work not only in the mainstage map but in all the other maps as well. You can however construct an if statement  to check if the current section is 0 (the first map) to see if the click event should fire. You can see that on line 8.

Let me know if you have any questions.

Tim

Reply
0 Kudos
Highlighted
Occasional Contributor II

Another option is discussed on the map journal github page.  Scroll down to the section that starts with "You can also add that capability to map feature popups."

Here's a conversation detailing the process a little more thoroughly.  I had to use this method the find the layerID.  Also for some reason my feature class was having trouble with the OBJECT ID as the identifier so like Tim I created a new field with section number.  My app is here and my code looks like this:

<script type="text/javascript" src="app/main-config.js"></script>

  <script type="text/javascript">

  require(["dojo/topic"], function(topic) {

  /*

  * Custom Javascript to be executed while the application is initializing goes here

  */

  // The application is ready

  topic.subscribe("tpl-ready", function(){

  /*

  * Custom Javascript to be executed when the application is ready goes here

  */

  });

  //scott

  /*

      * Set up a click handler on the feature of the map to navigate the story

      */

     //

     // *************************************

     // Configure the webmap id and layer id

     // *************************************

     //

     // First find the webmap id through the URL when you open the map in Map Viewer

     // To get the layer id, paste the webmap id below and open the application,

     //   then open the developer console, all the layers ids will be listed,

     //   find the correct one and paste it below

     // After this setup, clicking the 3rd feature of your layer, will navigate to the third entry

     //

     var WEBMAP_ID = "c62e6684ad464af08922c040acd8e78b",

         LAYER_ID = "ZooTour_9137";

     var clickHandlerIsSetup = false;

     topic.subscribe("story-loaded-map", function(result){

         if ( result.id == WEBMAP_ID && ! clickHandlerIsSetup ) {

             var map = app.maps[result.id].response.map,

                 layer = map.getLayer(LAYER_ID);

             console.log(map.graphicsLayerIds);

             if ( layer ) {

                 layer.on("mouse-over", function(e){

                     map.setMapCursor("pointer");

                     map.infoWindow.setContent("<b>"+e.graphic.attributes.name.split(",")[0]);

                     map.infoWindow.show(e.graphic.geometry);

                 });

                 layer.on("mouse-out", function(e){

                     map.setMapCursor("default");

                     map.infoWindow.hide();

                 });

                 layer.on("click", function(e){

                     var index = e.graphic.attributes["SECTIONNUM"];

                     topic.publish("story-navigate-section", index);

                 });

             }

             clickHandlerIsSetup = true;

         }

     });

  });

  </script>

Highlighted
New Contributor

Tim Witt​ and Scott Aulen​,

Is it possible to use these methods with lines opposed to points?

Such as the section of a trail or river.

Reply
0 Kudos