topic Re: Automatic scrolling to corresponding section on clicking point in the Main Stage? in Classic Esri Story Maps Questions

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

SabineKrier — Mon, 06 Jun 2016 17:58:27 GMT

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?

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

deleted-user-OlpHy1NoMNug — Tue, 07 Jun 2016 13:45:57 GMT

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

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

TimWitt2 — Tue, 07 Jun 2016 15:53:29 GMT

I did this here Impressions de France

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

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

SabineKrier — Tue, 07 Jun 2016 22:32:37 GMT

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

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

SabineKrier — Tue, 07 Jun 2016 22:41:56 GMT

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.

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

TimWitt2 — Sat, 11 Dec 2021 13:37:14 GMT

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

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

deleted-user-OlpHy1NoMNug — Wed, 08 Jun 2016 12:32:44 GMT

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>

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

KenBuja — Wed, 08 Jun 2016 12:36:26 GMT

Really nice story map, Tim Witt!

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

TimWitt2 — Wed, 08 Jun 2016 12:42:46 GMT

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

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

AndrewMindermann — Wed, 08 Jun 2016 18:12:22 GMT

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.

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

TimWitt2 — Wed, 08 Jun 2016 18:16:31 GMT

Yes you should be able to do that with any feature type (point/line/polygon)

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

AracelyEsquer — Thu, 30 Jun 2016 01:36:34 GMT

Somebody can help me?....I already try with the two codes...and it doesn't work, I don't know if I having wrong the field of my feature....or What's going on

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

deleted-user-OlpHy1NoMNug — Tue, 05 Jul 2016 13:31:34 GMT

Aracely,

I had to create a new field and reference it. Did you try that?