nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Turn off visibility of line featurelayer

KeithGanzenmuller

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

Find more posts tagged with

Accepted answers

KeithGanzenmuller

Ok, solved it.

My problem was, I believe, I was trying to get to the layers and setVisibility too soon.
I placed the code:

roadLayer = _map.getLayer('Road_Work_2014_7279'); roadLayer.setVisibility(false);

in the initMap function and it works now. When I activate a tab it turns on or off the line features as needed.

All comments

KeithGanzenmuller

Ok, solved it.

My problem was, I believe, I was trying to get to the layers and setVisibility too soon.
I placed the code:

roadLayer = _map.getLayer('Road_Work_2014_7279'); roadLayer.setVisibility(false);

in the initMap function and it works now. When I activate a tab it turns on or off the line features as needed.

RupertEssinger

Hi Keith
That's great you got that to work and it is a really nice customization of the Shortlist to make additional features appear when the user switches to a different tab.

A couple of suggestions from me:

- The road centerline features that you turn on via the Road Maintenance tabs are a bit hard to see on the map

- The road centerline features can be clickable if you want so users can get a popup about them and also hover over them to get the street name. To do that though they'd need to have the full set of attributes that the Shortlist template expects (same as the point features in your tabs) and would need to be added into your web map as a zipped up shapefile rather than a feature service). (Feature services currently aren't supported as clickable supporting layers in the Shortlist but can be added as non-clickable features like you have done).

- You've added behavior that auto-zooms when the user clicks on a point of interest either in the tabs or in the map. Nothing wrong with that technically but we would perhaps recommend against doing that in the Shortlist template because, as the tabs are context sensitive to the current extent of the map, it means that the contents of the user's tabs will change dramatically as soon as they click on anything, because they'll only see places listed that are inside their current extent, and they have to click the Home button to get back to the initial state where they can see all of the places

KeithGanzenmuller

Hey Rupert, thank you for the look and the suggestions.

I agree wholeheartedly about the road centerlines. I definitely have to make them more visible. At the time I copied the site over to the public server I wasn't sure if I could get it to work or not so I didn't bother with changing the symbology. I need to to enhance the centerlines and thin out the points now though.

As for the auto-zoom, good point. I am not sure whether to keep that set to automatically zoom or will add that as a choice on the infoWindow (or perhaps neither). The same goes for the aerial photography that appears when you zoom in far enough. So far there is only one project where the aerial is important. I could set it to come on only if the user selects that project also.

The Departments (and Commissioners) track the CIP Projects on a spreadsheet and they requested the ability to hyperlink from the line in the spreadsheet that contains the project to the CIP (Shortlist) Page so I have a version of it that accepts url parameters then centers and zooms the map to the project. Still in progress but the roughed in code works.

Thanks KG

RupertEssinger

We generally avoid auto-zoom in the story maps so that the user can control the map extent themselves. It can be frustrating for users we feel if they zoom to an extent and scale they are comfortable with only for the app to suddenly override their choice. We do pan the map automatically if the point the user has indicated they are interested in is not currently visible on the map, although that situation never happens in the Shortlist because the tabs don't display places that aren't in the current extent. The map tour has an auto-zoom option that lets the author choose to zoom the user to a specific scale once they start to proceed through the tour, which is nice because authors can start off showing an overview of all the points and then have the map zoom in as the user starts the tour. But even in that case we've built in a rule that if the user does choose to manually zoom the map as they proceed through the tour, the auto-zoom automatically turns itself off to put the end-user in charge of the zoom level.

CESPEDESLUISITD_2-1653682052757.png

LukeFawcett

Ahh - looking to do the exact same thing here. One of my tabs is "water CIP" and the other is "sewer CIP". I'd like to have linework for the sewer CIP projects appear with the sewer tab, and water linework appear with the water tab. No idea where to start...

Luke

KeithGanzenmuller

Hey Luke, I can tell you how I did it and you can easily modify it for more than one layer.

Created a variable for the CIP road layer, like this:

var roadLayer;

In the section for initializing the map i get a reference to the layer and set its visible property to false since my first tab is not for the road maintenance:

function initMap(layers) {

roadLayer = _map.getLayer('Road_Work_2014_7279');
roadLayer.setVisibility(false);

Then to toggle it on or off depending on the tab I do this in the activateLayer function:

function activateLayer(layer) {
 preSelection(); 
 _selected = null;
 postSelection();
 _layerCurrent = layer;

if(_layerCurrent.title == 'C.I.P. Projects') {
roadLayer.setVisibility(false);
} else 
{roadLayer.setVisibility(true);
}

Keith

LukeFawcett

Hi Keith - thanks much for your reply!

I see that your "Road_Work_2014_7279" is a FeatureServer layer from an SDE. Would that make a difference with this functionality? My line layer is pulling from a MapServer service. This is really the only difference I see so far. (Still trying to get the app to load with your added code. I may send you what I have if you are willing to give it a glance.)

Luke

KeithGanzenmuller

My road work layer was just a zipped up shapefile uploaded to ArcGIS Online, not directly to the Web Map but added as an item in My Contents.
I had a hard time getting a reference to it so I had the code loop through the layers to see what name was being used for each layer and discovered that what I called Road_Work_2014 was being called as Road_Work_2014_7279. I don't know where the _7279 came from but it may be a way for ArcGIS Online to uniquely identify its hosted feature services.

You should be able to turn on and off the visibility of any of the layers once you get a reference to them. If you add the layer in code you can use whatever name you gave it.

I'm far from an expert level programmer but I'll certainly have a look at anything for you.

LukeFawcett

Keith, finding the right reference to my polyline layer did the trick. Once I added the unique ID, it worked great! I also was able to restrict the visibility of several line layers depending on what tab was activated. Very nice, thanks again.
Luke

KeithGanzenmuller

Excellent, glad I could help.

JuneAcosta

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

KeithGanzenmuller

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);

JuneAcosta

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);

}

RupertEssinger

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_NOT_TO_BE_SHOWN_AS_TABS=Stations&SUPPORTING_LAYERS_THAT_ARE_CLICKABLE=Neighborhoods|Ferries|Beaches|Parks|Stations

(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=true&POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS=Stations&SUPPORTING_LAYERS_THAT_ARE_CLICKABLE=Neighborhoods|Ferries|Beaches|Parks|Stations

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.