Select to view content in your preferred language

Turn off visibility of line featurelayer

4201
14
Jump to solution
03-12-2014 08:29 AM
KeithGanzenmuller
Frequent Contributor
I'm putting together a self-hosted shortlist map for our Capital Improvment Program.
Can be found here temporarily

It has 2 point layers for the tabs and another layer of line features. The line features are from a hosted featureservice created from an uploaded shapefile. In the end I will use the line features so I can reduce the number of point locations in the Road Maintenance tab.

What I am trying to do is get a reference to that layer and conditionally turn its visibility off or on. I can loop through the operationalLayers like so to test:
 
var layers = response.itemInfo.itemData.operationalLayers;    for ( var x = 0; x < layers.length; x++){   alert(layers.id);   }


So the layer I am looking to hide or setVisibility to false shows up as layers[0] (shoes first in the alert statement) but I can't seem to get it to toggle off.

Thank you,
Keith
0 Kudos
14 Replies
KeithGanzenmuller
Frequent Contributor
Excellent, glad I could help.
0 Kudos
JuneAcosta
Frequent Contributor
Im trying to get this to work in my shortlist template. It seems like my variable to the reference layer is not getting set. The loading symbol just keeps spinning when it hits trailLayer.setVisibility(false) in the activateLayer function.

Does it matter where in the initMap(Layer) I set the variable to reference the layer?

-June
0 Kudos
KeithGanzenmuller
Frequent Contributor
Well, I'm sure the answer to that is "it depends" on what else you are doing in the initMap function.
For me, I set them the very first thing.
As stated previously up above, my biggest headache was getting the actual name of the layer, not the one that appears in the table of contents. For example, I have a layer named ADA_Ramps but I can't reference it by that name because AGS online refers to it as ADA_Ramps_5740.
Initially I looped through all the map layers and displayed the name. Then I did a 
  
                                  adaLayer = _map.getLayer('ADA_Ramps_5740');
                                    adaLayer.setVisibility(false);
0 Kudos
JuneAcosta
Frequent Contributor
I did loop through the map layers and got the AGOL name, 'Trail_Lines_7339'.

trailLayer.setVisibility(false) locks up the app, and alert(trailLayer) returns undefined.

Here's my initMap()- are you using the same shortlist template?
function initMap(layers) {
 
 trailLayer = _map.getLayer('Trail_Lines_7339');
 //trailLayer.setVisibility(false);
 alert(trailLayer);
 
 var supportLayers = [];
 var pointLayers = [];
 
 var arrExemptions = [];
 $.each(POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS.split("|"), function(index, value) {
  arrExemptions.push($.trim(value).toLowerCase());
 });
 
 var supportingLayersThatAreClickable = [];
 $.each(SUPPORTING_LAYERS_THAT_ARE_CLICKABLE.split("|"), function(index, value) {
  //alert(SUPPORTING_LAYERS_THAT_ARE_CLICKABLE);
  supportingLayersThatAreClickable.push($.trim(value).toLowerCase());
 });
 
 //trailLayer = _map.getLayer(SUPPORTING_LAYERS_THAT_ARE_CLICKABLE);
 //trailLayer.setVisibility(false);
 //alert(trailLayer);
  
 $.each(layers, function(index,value){
  if (value.url == null || value.type == "CSV") {
   if (
    getFeatureSet(value).geometryType == "esriGeometryPoint" && 
    $.inArray(value.title.toLowerCase(), arrExemptions) == -1
    ) {
    pointLayers.push(value);
   } else {
    supportLayers.push(value);
   }
  } else {
   // if the layer has an url property (meaning that it comes from a service), just
   // keep going...it will remain in the map, but won't be query-able.
  }  
 });

 //_trailLayer = _map.getLayer('Trail_Lines_7339');
 //_trailLayer.setVisibility(false);
 //alert(_trailLayer);
 _initExtent = _map.extent;
 
 var supportLayer;
 $.each(supportLayers,function(index,value) {
  supportLayer = _map.getLayer($.grep(_map.graphicsLayerIds, function(n,i){return _map.getLayer(n).id == getID(value)})[0]);
  /////alert(supportLayer);
  if (supportLayer == null) return;
  $.each(supportLayer.graphics,function(index,value) {
   value.attributes.getValueCI = getValueCI; // assign extra method to handle case sensitivity
  });
  if ($.inArray(value.title.toLowerCase(), supportingLayersThatAreClickable) > -1) {
   dojo.connect(supportLayer, "onMouseOver", baselayer_onMouseOver);
   dojo.connect(supportLayer, "onMouseOut", baselayer_onMouseOut);
   dojo.connect(supportLayer, "onClick", baselayer_onClick);
  } else {
   dojo.connect(supportLayer, "onClick", function(){unselect()});
  }
  
  
 });
 
 var contentLayer;
 var colorScheme;
 var colorOrder = COLOR_ORDER.split(",");
 var colorIndex;
 $.each(pointLayers,function(index,value) {
  _map.removeLayer(_map.getLayer($.grep(_map.graphicsLayerIds, function(n,i){return _map.getLayer(n).id == getID(value)})[0]));
  $.each(getFeatureSet(value).features, function(index,value) {
   value.attributes.getValueCI = getValueCI; // assign extra method to handle case sensitivity
   value.attributes[FIELDNAME_ID] = index; // assign internal shortlist id
  });
  /* color index assignment is a weird bit of voodoo.  first thing to consider
     is that layers names actually appear in tabs in reverse order (i.e. last layer in
     is leftmost tab).  this means that we have to invert the color index for things to match
     right.  also, using modulus to handle overflow -- when there are more layers
     than colors.  so, we end up re-using colors but keeping the sequence. */
  colorIndex = (pointLayers.length - index - 1) % colorOrder.length;
  colorScheme = $.grep(COLOR_SCHEMES, function(n,i){
   return n.name.toLowerCase() == $.trim(colorOrder[colorIndex].toLowerCase())
  })[0];
  contentLayer = buildLayer(
     getFeatureSet(value).features.sort(SortByNumber),
     colorScheme.iconDir,
     colorScheme.iconPrefix
     );
  contentLayer.color = colorScheme.color;
  contentLayer.title = value.title;
  dojo.connect(contentLayer, "onMouseOver", layer_onMouseOver);
  dojo.connect(contentLayer, "onMouseOut", layer_onMouseOut);
  dojo.connect(contentLayer, "onClick", layer_onClick);
 
  //alert(contentLayer.title); only the tab layers for this function
  _map.addLayer(contentLayer);
  _contentLayers.push(contentLayer);
 });

 _contentLayers.reverse();
 $.each(_contentLayers,function(index,value){
  $("#tabs").append('<div class="tab" onclick="activateLayer(_contentLayers['+index+'])">'+value.title+'</div>');
 });
 
 if ($(".tab").length == 1) $(".tab").css("display", "none");

 activateLayer(_contentLayers[0]);
 dojo.connect(_map.infoWindow,"onHide",infoWindow_onHide);
 $("#zoomToggle").css("visibility","visible");
 $("#whiteOut").fadeOut("slow");  


 //trailLayer = _map.getLayer('Trail_Lines_7339');
 //trailLayer.setVisibility(false);
 //alert(trailLayer);

}
0 Kudos
RupertEssinger
Esri Alum
One quick tip that is indirectly related to this. In the current version of the Shortlist released three weeks ago, we made a couple of changes that make it easier to work with supporting layers (i.e. layers containing features that you add into a Shortlist that are in addition to the numbered point features that are represented in the tabs):

1) You can now add supporting layers into a Shortlist. Previously it wasn't possible to add a point layer into a Shortlist without it being treated as defining one of the tabs. There's a new POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS variable in the index.html that lets you specify these layers. For example this new option lets you add features like trolley stations, bus stops or wells into your Shortlist that users can click on to get more information without them appearing as numbered points and defining a tab.

2) By default, supporting layers you add into a Shortlist from shapefiles (point, line or poly) or CSV files (points) are not clickable by the user. Previously these layers were always clickable and this wasn't great because you were perhaps just trying to add some some features into your map not intending them to be clickable, and users would get odd looking results if they clicked on the features if they didn't have all the Shortlist attributes. So shapefile and CSV file based layers are not clickable unless the author specifically opts in by specifying the names of the supporting layer(s) they want to be clickable in the new SUPPORTING_LAYERS_THAT_ARE_CLICKABLE variable in the Index.html.

You can see both of these variables at work in the example below via overrides specified as URL parameters (which is easier than editing the index.html file for showing examples because it saves me having to install the Shortlist specially just to show this particular example). In this example, I've added a shapefile layer called Stations into a test Shortlist containing all the trolley stations in San Diego. So via the URL parameters I've told the Shortlist not to use the Stations layer to define a tab and to also treat this layer, and several others in the web map, as clickable layers, so users can click on them to get a popup of information. The Stations layer is one I downloaded from the SANGIS website as a shapefile, and then all I had to do was add the attributes that the Shortlist expects, like the link to an image, to populate the popups:

http://storymaps.esri.com/templates/shortlist/?webmap=609cc1431cf94b9eb5a72427af6d3409&POINT_LAYERS_...

(The trolley lines were also downloaded from SANGIS and are actually a feature service in this map. I didn't want the trolley lines to be clickable in this Shortlist).

Note that this Shortlist also doesn't make use of the Details panel. This is another new feature. By default now, the Shortlist popups don't have a Details panel. This is a nice default because it means that authors who don't want to provide all of the Shortlist attributes that are used to populate the Details panel don't have to. (Not all Shortlist authors write as much as I do about places!). We noticed that a lot of Shortlists folks were making didn't have much info in the Details panel. So now you can make a Shortlist with just a few attributes for each place. If you do want to use the Details panel, you can simply opt in using the new DETAILS_PANEL variable in the Index.html file. Make that true instead of false and you'll have a Details panel. The link below launches the same Shortlist as the link above except that I enabled the Details panel by putting DETAILS_PANEL=true in the URL as an override:

http://storymaps.esri.com/templates/shortlist/?webmap=609cc1431cf94b9eb5a72427af6d3409&DETAILS_PANEL...

If you want to take advantage of these new features and don't see those variables in your index.html file, then you should download the Shortlist application again. The Readme.pdf in the download has the full details. I've put a copy of the Readme online here too: http://downloads.esri.com/blogs/places/shortlist/Readme.pdf
0 Kudos