Map point section links

[rossthedevigner]

I've created a map with points in ArcGIS online, but I'm unable to link to different sections from that map. I see this in the Readme, but I'm not clear what this means:

ArcGIS Online Map Viewer doesn't allow to create those links from the editor but if those links are present in your layer attributes before you upload your data to ArcGIS Online, it will works.

What does "layer attributes" refer to?

I'm trying to duplicate the same section linking as seen here: http://storymaps.esri.com/stories/2014/bee-tour/

Thanks.

[glazou]

The idea is that ArcGIS Online does not allow you to insert the link that Map Journal require but if you are able to create your data outside of ArcGIS Online like for example in a CSV and insert to the webmap, those links will work. One way to do it is to have one attribute of the layer that contains those links and then to configure the popup to use that attribute.

Please see this thread for more https://geonet.esri.com/thread/118904
Note this works well for points geometry, we are using it all the time, but we don't have experience doing it for line and polygon and that user hasn't been able to do it.

[rossthedevigner]

I read through the forum post and it provided some good insight. Is there a sample CSV in creating those links? Can you create links on the actual marker and not within the popup for the marker (like in the Bee Story).

[glazou]

Great. Yes you can access the CSV here (a bit buried in the post) https://gist.githubusercontent.com/glazou/72900f70e6192bdb9dac/raw/5eae0bee65e197a055c4f7484bf27c4332324520/MapJournal-popup-section-nav.csv

Make the navigation by clicking the markers require to customize Map Journal.

[rossthedevigner]

I was able to successfully use the sample CSV to create the link from within the popup. I assume to be able to recreate the map point behavior links from the Bee Story, it would take a bit more customization to the app itself?

[glazou]

Great.
Yes directly clicking on the map marker would require to download, customize the application and host it yourself.

[glazou]

An updated procedure to do this is documented here https://github.com/Esri/map-journal-storytelling-template-js#link-between-sections

[mgrollinsdcr]

I'm a complete newbie with this app: trying also to implement the ability to navigate from the map back to a story section. I created an attribute in my webmap feature that has the code as shown in your sample CSV file as above. In the storymap popup, it shows as a hyperlinked phrase, but clicking on it does not advance to the section. I think after Mar 2015, this functionality was replaced by adding code to the index.html file of the sourcecode? However, I'm having trouble deciphering where to get my layer ID to add the click handler on the map feature. I have the webmap_ID. Your help explains:
/ Configure the webmap id and layer id
// To get the layer id, just configure the webmap and run the application,
// all the layer ids of your webmap will be printed in the console
Please elaborate on "configure the webmap and run the application". Do you mean run the mapstory after configuring the webmap it uses? or run the webmap?!

Can you explain where the 'console' is? Is this something i get from ArcGISOnline, or the java console?
I have tried entering various iterations of the layer name and am not being successful.
My webmap is a point layer.

[glazou]

I will try to help you but as you notice this unfortunately require developer skills as the procedure with CSV is not supported anymore :/

The steps are:

1. download the application, deploy it on a webserver and configure the application id
2. copy/paste the given code
3. copy/paste the webmap id at the mentioned spot (similarly that for the application id, the webmap id appear when you are viewing the map with the map viewer in ArcGIS Online)
4. in your browser, open the developer console (usually F12)
5. access the app and in the console you will see the list of layer id of the webmap appearing. Those name are a bit cryptic but usually if you are on a webmap with only couple of layers you will find the one you are looking for quickly
6. copy/paste the id of the layer you want to use at the mentioned spot

Good luck, let us know how it goes :)

[mgrollinsdcr]

Thank you!
Yes, I have previously downloaded the application sourcecode, deployed it on a webserver, and obtained the application ID. I built the initial story map using the builder, but when I realized I wanted to add this customization I downloaded the sourcecode.

So, I do already have my Application ID and my webmap ID, and I have cut/paste the entire bit of code into the index.html file, inserting those two pieces. Still cannot seem to find the layer_id’s though, even when looking at the console achieved by pressing F12 while looking at the home section of my storymap.

Perhaps if you look at the app it would help?
Unfortunately right now though, it is not publically shared as it is in development still…

Below is the webmap_id of my webmap which I have included in the index.html file . But in the console I cannot find anything that looks like layer_ids? I commented out the layer_id line for now since I didn’t know what to put in there…

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

  // Configure the webmap id and layer id
  // To get the layer id, just configure the webmap and run the application,
  // all the layer ids of your webmap will be printed in the console
  var WEBMAP_ID = "eff825ecea244997826d0de595fbbdd2",
  //LAYER_ID = "featureServer_0";

I’m not sure if this will be useful, but attached is a screen cap of what I see in the console when viewing the app and again, I don’t see anything that looks like layers referenced, though it does show the appID and the webmap_ids… There seem to be lots of error messages!

Thanks for trying to help!

[glazou]

Cool you should almost be there, is your map displaying in the app?

This error may indicate that one of the map layer is not accessible.

Your issue may just be that you have commented LAYER_ID.
Does it works if you don't comment it?

The layer ids should be displayed just before or after the second error.

Int he code if you can modify that line
console.log(map.graphicsLayerIds);
by
console.log('layers id', map.graphicsLayerIds);

it will help you see if that line is printed...

[mgrollinsdcr]

Yes, the webmap is displaying in the main panel, and I can see the layers, and click on the features to see the popups I have configured.
Previously, I didn’t comment out the layer_id line, and it still wasn’t working. It had the value in it that was in your sample code. What should I put in there if I don’t have the correct layer name yet?!
I tried editing the console.log line as shown, and see no difference when looking again…
So the error: “item does not exist or is inaccessible” which comes after where the webmapId is printed, do you think that is referring to the missing layer_id?
Perhaps it has something to do w/ my sharing permissions of the webmap; it is restricted to my_content and a group within my organizations account…

From: glazou [mailto:notifications@github.com]
Sent: Tuesday, June 23, 2015 5:26 PM
To: Esri/map-journal-storytelling-template-js
Cc: Rollins, Megan (DCR)
Subject: Re: [map-journal-storytelling-template-js] Map point section links (#23)

Cool you should almost be there, is your map displaying in the app?

This error may indicate that one of the map layer is not accessible.

Your issue may just be that you have commented LAYER_ID.
Does it works if you don't comment it?

The layer ids should be displayed just before or after the second error.

Int he code if you can modify that line
console.log(map.graphicsLayerIds);
by
console.log('layers id', map.graphicsLayerIds);

it will help you see if that line is printed...

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/23#issuecomment-114646053.

[glazou]

I think I found your issue, the documentation is not clear enough and you must have pasted the code at a wrong place, this is how it should looks like

i.e. from the sample of code the following is already present in index.html

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
         */
    });

[mgrollinsdcr]

Seems like we may be close!
This is what my index.html file looks like, but still no good!

---

<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
                                                                            */
                                                            });

                                            /*

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

  // Configure the webmap id and layer id
  // To get the layer id, just configure the webmap and run the application,
  // all the layer ids of your webmap will be printed in the console
  var WEBMAP_ID = "eff825ecea244997826d0de595fbbdd2",
  LAYER_ID = "featureServer_0";

  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('layers id', map.graphicsLayerIds);
  
      if ( layer ) {
          layer.on("mouse-over", function(e){
              map.setMapCursor("pointer");
              map.infoWindow.setContent("<b>"+e.graphic.attributes.name.split(",")[0]+"</b><br/><i>Click to zoom</i>");
              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["__OBJECTID"];
              topic.publish("story-navigate-section", index);
          });
      }
  
      clickHandlerIsSetup = true;
  }
  

  });
  });
  </script>
  

From: glazou [mailto:notifications@github.com]
Sent: Tuesday, June 23, 2015 7:00 PM
To: Esri/map-journal-storytelling-template-js
Cc: Rollins, Megan (DCR)
Subject: Re: [map-journal-storytelling-template-js] Map point section links (#23)

I think I found your issue, the documentation is not clear enough and you must have pasted the code at a wrong place, this is how it should looks like

[image]https://cloud.githubusercontent.com/assets/994078/8319176/c1b0fc3e-19c0-11e5-9b94-00bb8f655d79.png

i.e. from the sample of code the following is already present in index.html

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

     */

});

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/23#issuecomment-114667281.

[glazou]

You should see it in your console. Can you share a link to your app?

[mgrollinsdcr]

well, I seem to have gotten past this sticking point, and identified the layer_id. However, now the application is still throwing errors when I try to click on a point on the map, the app freezes and I get this error message:
"A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

Script: http://dswcapps.dcr.virginia.g…ymap/app/viewer-min.js?v=1.3.0:1"

If I stop the script, the app is no longer usuable and I have to restart it.

when i look at the console messages, the first error showing there is:
"common.core.Core - init" undefined viewer-min.js:1:158630
"common.core.Core - parsePortalConfig" viewer-min.js:1:170973
"common.core.Core - initStep2" viewer-min.js:1:161543
"common.core.Core - loadWebMappingApp - appId:" "7d3388e8b7da401dbe45118a3efab9c2" viewer-min.js:1:162060
Error: You do not have permissions to access this resource or perform this operation.
Stack trace:

My app is not shared as public yet, only to a group within my organization. There are other error messages further down, but this seems the first sticking point..

[glazou]

Do you get a new error message right after you click on the map? I never faced that, not sure if I can help if your app isn't public.

[mgrollinsdcr]

yes, the first error message about the script occurs immediately upon clicking a point on the layer. It pops up on screen, not in the console.
I understand w/o it being public you are quite limited in your ability to look; i appreciate you trying help anyway!

Notice it says "You do not have permissions to access this resource or perform this operation" in the first console message. The story map references another arcgisonline web map; i thought that both had the same access/sharing setup, but could something be going on there perhaps? Since this is in development i didn't want to make it public yet! Not sure what else I can do to get help at this point..

[glazou]

I see. I remember one thing now... I fixed a bug (fix to be released tomorrow) that was making the application freeze if the section index you are trying to navigate to was not existing. That should be your issue. Could you modify the click event to be

layer.on("click", function(e){
    var index = e.graphic.attributes["__OBJECTID"];
    console.log(index);
    //topic.publish("story-navigate-section", index);
});

If it doesn't freeze anymore, make sure that you have at least the number of section printed in the console.

With the patch I will release tomorrow, the application won't freeze but the navigation would not occur either as the section doesn't exist.

[mgrollinsdcr]

ok, yes, that stops it from freezing. I did make sure to click a point that has an associated section, but it doesn't do anything.

this appears to be the relevant error message in the console:
TypeError: e.graphic.attributes.name is undefined index.html:428:20
undefined index.html:439:5
TypeError: e.graphic.attributes.name is undefined index.html:428:20
undefined index.html:439:5
"exception in animation handler for:" "onEnd" init.js:45:0

TypeError: c is null

when your patch is applied tomorrow, do I uncomment out that line above? topic.publish("story-navigate-section", index);

again, I can't thank you enough for trying to help me!

[glazou]

You are welcome.
Great we find the source of the issue!
Uncommenting after the patch is not likely to make the app navigate to your section. I think what you need to do is to find what's the index you want to use. The following line var index = e.graphic.attributes["__OBJECTID"]; is using the __OBJECTID attribute which should be defined for all Feature Services in ArcGIS Online but maybe not for yours?

You could use console.log(e.graphic.attributes); to output the attributes and see what you can use.

[mgrollinsdcr]

ah yes, that makes sense! i had objectid as not visible in the featurelayer, and the popup...
I used a different field called MANAME, which is the name of the preserve I'm trying to click on, but it still doesn't work?!
is the syntax the same if it's a different field?
eg; my line reads:
var index = e.graphic.attributes["__MANAME"];

here again, is a portion of the console:

I'm clicking on MANAME= Crows Nest which corresponds to section 4 in the application. Does it matter that the value of MANAME as shown below "Crows Nest" is not the same as the title of the section, which displays as "Crow's Nest - Stafford County - 2,872 acres"

Note also, that the underlying web map with the two layers shown below are scale dependent; va_snap_link_5934 shows as a point layer in the main view, and that's the one I'm clicking on to try and jump to a section in the side panel. the va_snap_8756 is a polygon layer of the boundaries of preserves, that gets displayed once the user has selected one of the sections and is zoomed in...

Both layers have the same attribute names, at least for MANAME.

"layers id" Array [ "va_snap_8756", "va_snap_link_5934", "locateLayer" ] index.html:423:12
TypeError: e.graphic.attributes.name is undefined index.html:428:20
undefined index.html:439:5
Object { OBJECTID: 20, MANAME: "Crows Nest", pub_acc: "yes", section_li: "<a data-href='#' onclick='require([…" } index.html:440:5
TypeError: e.graphic.attributes.name is undefined index.html:428:20
undefined index.html:439:5
Object { OBJECTID: 20, MANAME: "Crows Nest", pub_acc: "yes", section_li: "<a data-href='#' onclick='require([…" } index.html:440:5
"tpl.core.MainView - navigateStoryToIndex - " 1 viewer-min.js:1:348357
"tpl.core.MainView - navigateStoryToIndex - " 2 viewer-min.js:1:348357
This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.[Learn More] player
"tpl.core.MainView - navigateStoryToIndex - " 3 viewer-min.js:1:348357
"tpl.core.MainView - loadWebMap - webmapId:" "2f3c3ae0fc90461a869c3d087e908a0d" viewer-min.js:1:351458
"tpl.core.MainView - navigateStoryToIndex - " 4

[mgrollinsdcr]

so, in the code i see
layer.on("mouse-over", function(e){
map.setMapCursor("pointer");
map.infoWindow.setContent(""+e.graphic.attributes.name.split(",")[0]+"
Click to zoom");
map.infoWindow.show(e.graphic.geometry);

the cursor DOES change to a pointer, but when mousing over a point, I don't get the attribute name and appended 'CLick to zoom' as a popup as expected. It appears that the value within the attribute name is supposed to be parsed into comma separated values, or is it looking for comma separated values already?, so for example, if my MANAME = Crows Nest, should the message be
Crows,Nest
Click to zoom

or is it looking for a value of Crows Nest?

[glazou]

Cool, getting there.

What the app is expecting is an index not a section name.
If your data don't have the same order than the section in your Journal you will need to match those two. I won't be able to do all the code for you but it should be something like

layer.on("click", function(e){
  var sectionMapping = [{ title: "The value of the attribute MANAME for the first section", index: 1}, { title: "Section 2", index: 2}];
  var sectionMatch = $.grep(sectionMapping, function(v){ return v.title == e.graphic.attributes["MANAME"] });
  if ( sectionMatch && sectionMatch.length ){
    console.log('Navigating to section', sectionMatch[0].index);
    topic.publish("story-navigate-section", sectionMatch[0].index);
  }
});

For the mouse-over, you probably want to replace with map.infoWindow.setContent(""+e.graphic.attributes.MANAME+" Click to zoom");

[mgrollinsdcr]

ok, I do have a javascript person here who might be able to help w/ the fine tuning, but to be clear,

if I made OBJECTID visible in the webmap application again, and went back to using that would it be easier? Although, I don't think the objectid values correspond to the journal sections either... I was just going to list those alphabetically by preserve name. Possibly complicating things more: I have 62 preserves, but only 21 will have corresponding sections, as they are the only preserves with public access.. but i wanted the default view for the "home section" to be a map zoomed out to whole state showing the preserves. User would hover over a point, and if it showed as public access = Y, they could click on it, and zoom to the corresponding section..

[glazou]

The sectionMapping logic may be the most simple but you can also think about having another attribute in your data that give you the corresponding section. If that attribute has a value of 0 you could skip navigating...

Glad to hear a developer can help you, good luck.
Thanks for taking the time, this will help me make the documentation better.

[mgrollinsdcr]

he's awesome w/ Javascript and Jquery, but doesn't know ArcGIS at all, so if we run into trouble making some edits can we still check in? And I'd like to thank you by name, but I don't know it! You've been above and beyond helping someone who's barely literate! I can almost follow along w/ what's happening, but am not a programmer by training...

[glazou]

You are welcome, our priority is to help our user succeed. I never promise to be help if it's not strictly related to the app and your data come into the game, but I will try. I'm Greg!

[mgrollinsdcr]

Thanks Greg!
what this seems to point out, is it would be VERY nice for this app to just have native interactivity b/n the main panel contents and the journal sections! I sure wish the old way of configuring an attribute in the table to be clickable still worked at least!I had that all set up for my test preserves.

Any chance the app will get this functionality some point in the future?

---

From: glazou [notifications@github.com]
Sent: Wednesday, July 08, 2015 5:32 PM
To: Esri/map-journal-storytelling-template-js
Cc: Rollins, Megan (DCR)
Subject: Re: [map-journal-storytelling-template-js] Map point section links (#23)

You are welcome, our priority is to help our user succeed. I never promise to be help if it's not strictly related to the app and your data come into the game, but I will try. I'm Greg!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/23#issuecomment-119736683.

[glazou]

it's not on our development list right now but hoping to do it soon!

[daFiter]

Is this possible in the current version?

I have used the code provided and it still does not work. I am not using a CSV though.
I am trying to make this possible:
https://storymaps.esri.com/stories/2017/marvel-origins/

UPDATE: I figured out how to do this. A feature layer is needed if hosting on your own server

How would one get this to work on mobile devices? Click does not work.

[dgoldb2]

I'm having trouble with the story-loaded-map event not being hit. The function(result) never runs.
topic.subscribe("story-loaded-map", function (result) { console.log("Result ID: " + result.id); //does not print to console ...