Any way to allow users to toggle layer visibility?

[AliceJarvis]

I'm using the Storytelling Text and Legend template. I'd like to show several map layers on a tab and allow the user to turn them on and off - is there any way to do this? e.g. is it possible to use this kind of code: https://developers.arcgis.com/en/javascript/jssamples/map_explicitlayerlist.html

[StephenSylvia]

Yes, all of our templates are available for download and you are welcome to modify them as you wish. We have done something similar in the past with our solar power story map: http://storymaps.esri.com/stories/solarplants/.

[AliceJarvis]

Thanks for your reply.

I have been looking at this and can't see how I can do a similar thing on the Storytelling Text and Legend template. In the solarplants example, each layer seems to be hard-coded in the index file. If I do this e.g. put something in the DescriptionPanel or LegendPanel, it shows up for all tabs. How do I reference the panels for each tab independently? If I can't do this, I don't see how it can work. I'm not that good with javascript, sorry!

[StephenSylvia]

Unfortunately, you will not be able to hard code something in the index.html file because of the problems you previously mentioned but instead, you will have to modify the JavaScript to make sure these buttons are only displayed with their corresponding maps. At the beginning of the map load function in the JavaScript, there is a line that append's a map's specific description to the description-pane. Later in the change map function, the app will toggle the visibility of the different descriptions.

One way to accomplish this would be to append the new buttons within a map's specific description, then you will not have to worry about having the buttons appear all the time.

Once you have that, you will need to write a new function in the JavaScript to apply an action when someone clicks on these buttons. This is where you can use the map.getLayer("layer-id").hide() or map.getLayer("layer-id").show() methods.

[AliceJarvis]

Thanks again for your reply.

A few questions:

First, where (or how) do I put the button on each maps' description? As far as I can see there's not an html or source code option where you put the description for each layer on the arcgis.com site. It's just a WYSIWYG editor so if you put code there it is rendered as text even if you put it as javascript code using e.g. document.write.

If I dodge the first step for now by hard coding in the index.html file I can get buttons on the page, attribute an onClick event and get it to show which one was clicked (by putting this code in the map.js file at the bottom of the intiMap function) like so:

$("#baselayerToggles .radio").click(function(event){
  if ($(event.target).attr("id") == "toggle1")
  {
   alert('clicked 1');
   _maps[0].getLayer("layer1").hide();
  }
else if ($(event.target).attr("id") == "toggle2")
  {
   alert('clicked 2');
   _maps[0].getLayer("layer2").hide();
  }
});

The alert works but the code to hide the layers is not working. Is there a script or some other code I need to use in order to hide a map layer or to force the map to refresh, or does the code need to be somewhere else? The solarplants example puts it in the layout.js file and uses e.g. _maps[0].getLayer("csv_5010_0").show() - how do I know what is the correct way to identify each layer - is it simply the layer name in arcgis.com?

As I said, I'm not great at JavaScript and this is probably obvious...  but I have spent a while trying to figure this out and I really need to get this working. Thanks for your assistance.

[StephenSylvia]

Instead of using the description editor in ArcGIS Online, you will need to append the description from within the JavaScript file. In the map.js file within the mapCreate function, you will see:

if (i == 0) {
document.title = configOptions.title || response.itemInfo.item.title || "";
dojo.byId("title").innerHTML = configOptions.title || response.itemInfo.item.title || "";
dojo.byId("subtitle").innerHTML = configOptions.subtitle || response.itemInfo.item.snippet || "";
dojo.byId("description0").innerHTML = configOptions.description || response.itemInfo.item.description || "";
if (configOptions.webmaps.length > 1) {
dojo.byId("title0").innerHTML = response.itemInfo.item.title || "";
dojo.byId("description0").innerHTML = response.itemInfo.item.description || "";
}
}
if (configOptions.webmaps.length > 1) {
dojo.byId("tabText" + i).innerHTML = configOptions.tabTitles.title || response.itemInfo.item.title || "";
dojo.byId("title" + i).innerHTML = response.itemInfo.item.title || "";
dojo.byId("description" + i).innerHTML = response.itemInfo.item.description || "";
}

After this, you could add the following line of code:
$("#description" + i).append("add description content")
where the text in blue is the content you want to add to the bottom of the description. You will need to add the appropriate html tags.

In order to get the correct layer name, you can open the web browser's console (f12 in chrome) and log all the layer ids using these two commands:
_maps[0].layerIds
_maps[0].graphicsLayerIds

You will need to do this for every map. _maps[0] will refer to the map in the first tab, _maps[1] will refer to the map in the second tab, etc.

Replace the layer name (_maps[0].getLayer("layer1").hide(); ) with one of the layersIds until you find the correct Id.

[AliceJarvis]

Hi Stephen,

Thanks for all your help so far. I have got most things working the way I need.

One thing I haven't worked out yet:

I can hide a layer using code like $("#sagcot_2314_0_layer").hide(); but the pop-ups still show. I've tried substituting the .hide() with.style.visibility="hidden" or style.display = "none" but these don't turn off the map layer. So, is there a better way to turn off/hide map layers which would stop the pop-ups for those layers too or is there another way I can prevent the pop-ups showing?

My site-in-progress is temporarily here: http://members.mweb.com.na/tr_aj/

I'd appreciate any suggestions.

Thanks

[StephenSylvia]

When you toggle the layer visibility with Jquery like you have done here, $("#sagcot_2314_0_layer").hide(); you are only changing the visibility in the DOM but are not telling the JavaScript map object that you have hidden the layer. Therefore, the map will still show any features under the mouse where you clicked in the popup.

Instead, you will need to hide the layer with the JavaScript API. Replace the current line of code:
$("#sagcot_2314_0_layer").hide();
With this line:
_maps[0].getLayer("sagcot_2314_0").hide();

And so on with all the layers you need to hide. When you have done this the features will not show up in the popup.

[AliceJarvis]

Perfect, thank you.

[Honolulu_Land_Information_Syst]

Hello

I am also a novice at Java scripting as well.  I have been trying to do same thing Toggle layers with a Map I am working on for the City and County. I have been able to have the maps show but they are left panel. Is there a piece of code I am missing. I looked at the source code but still cant figure out what is missing. Your help would be most appreciated.

Sherwin Aquino
GIS Analyst
Honolulu Land Information System (HoLIS)
City and County of Honolulu