Toggle Feature Layers with ArcGIS JavaScript API

The ArcGIS JavaScript API is full of useful functionality for the web GIS developer. In this blog entry, I’ll show you how to toggle a set of feature layers, showing only one at a time while hiding all others. The code can become unwieldy for large numbers of feature layers, but for an application with only a handful of layers, it should work fine.

The difference between this method and ArcGIS’s setVisibleLayers command is that this is used with individual feature layers as needed, not with an entire ArcGIS Dynamic Map Service.

To begin, set the extent and any base maps you wish to use for the application, as well as the map Div for your application. This example uses Dojo, so add the following to your script section:

dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");

The starting extent and base map should be together under an initialization function (i.e, function init() {} ). Each feature layer is added in its own initialization function. In this example, we’re going to toggle layers of a building footprint. Let’s start with the first floor:



function initUphamOne() //Name of the function
{
featureLayerB = new esri.layers.FeatureLayer("http://studentgisserver.uww.edu/ArcGIS/rest/services/uphamhall2/MapServer/2", { //Unique name of the feature layer, and the URL for the feature layer
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
});
map.addLayer(featureLayerB);
}

This function loads the feature layer, gives it a unique name in the document, sets its mode (ONDEMAND), and adds the layer to the map when the function is called.

The code for this function can be copied and changed for each feature layer you wish to toggle. Only the function name, variable name (e.g, featureLayerB) and the URL need to be changed for each layer.

Now, create the function to hide all layers but the layer you wish to show. This is a relatively easy task, since we can use functions for ESRI’s Layer class that are not explicitly for the Feature Layer class. Let’s say we have 4 feature layers, B through D. To hide all layers except layer B, create the following function:



function hideElseB() {
featureLayerA.hide();
featureLayerC.hide();
featureLayerD.hide();
}

Since we only want to show featureLayerB when this function is called, layers A, C, and D need to be set to hidden. Note that this function does not call featureLayerB to be visible- the feature’s initialize function does this. Both of these functions will be combined in the next step.

In your HTML body, create a div to hold the buttons to toggle your layers. I used Dojo buttons for this example. Add a button for each layer you want to toggle, using the following code:


button dojoType=”dijit.form.Button” onClick=”initUphamOne(),hideElseB();”>First Floor</button

dojoType=”dijit.form.Button” calls styling and code to use a Dojo button. OnClick is where both functions are combined. The first function, seen earlier, calls the feature layer into the map. The second function, separated by a comma, hides all other layers. The ‘First Floor’ text is what appears on the button itself.

The example application can be found here: Toggle Function Sample

Just a note: the feature layers are accurate, but the basemap is a somewhat inaccurate test service. We are aware of the discrepancy. The sample also features mouseover tooltips, which were not covered in this sample.

Posted in Uncategorized
One comment on “Toggle Feature Layers with ArcGIS JavaScript API
  1. Kendall Griggs says:

    Thank you, Mr. Reilly. Your layering illustration helped solve a problem that’s been vexing me for some time. Hats off to you!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>