Turning on and off layers on a Map

[FrankFlynn]

I am new to JavaScript API.  I have a map with a number of feature layers added.  I would like to be able to turn on and off these layers through the JavaScript API, yet I cannot seem to find a way to recognize the different layers on the map through the API.

Any help would be appreciated.

Thanks

[DianaBenedict]

You say you have FeatureLayers. How are you using/implementing these feature layers? What is their mode type? I ask this because in my case, I use FeatureLayers exclusively for editing. I also use the MODE_SELECTION so that the acutal features are not streamed across the network unitl a user has indicated what feature(s) they would like to edit .. therefore the user can not see them until I request the data from the server.  Since I use  MODE_SELECTION I have to add the respective MapServer service to display the data when users are not editing.  Here is the sample that ESRI has to explain how these two situations work:
http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/ed_selectionmode.html

With that said, most sample that ESRI uses for implementing FeatureLayers are either MODE_ONDEMAND or MODE_SNAPSHOT.  Refer to all the sample for FeatureLayers here is another common example:
http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/fl_ondemand.html

As for your LayerLists question and the ability to turn them on/off here is another sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/map_explicitlayerlist.html

Clear as mud ... It really does depend on your intent of the services that you have. Keep in mind that all FeatureLayers have a respective MapServer service. You will need to decide when to use the appropriate service for your task at hand. Good Luck.

[NiranjanBorawake]

Hi Frank,

Could you please be a bit more clear on what you mean by turning ON and OFF feature layers.

If you just want to hide and show them then its very simple.

featureLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/0",{
    mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
    infoTemplate: infoTemplate,
    outFields: ["*"]
});

featureLayer.hide(); // This will hide the layer
featureLayer.show(); // This will show the layer

Other option is to set min and max scales of feature layer, so the layer is automatically hidden or shown based on zoom level. For this you can have a look at this example. Check out how layerScales are set.

Good Luck.

[FrankFlynn]

Thank you for the responses.

Part of the problem maybe my lack of ArcGIS knowledge.  I took a very simple approach, crated a map on ArcGIS Onlne, then from the menu bar, choose to add layer from web.  I added a couple of layers, named them and then used JAVA SCript API to display the map by loading the generated map ID.

I would like to be able to recognize these layers using the API, and then provide options for users to tuen these layers on and off.  The problem is I cannot seem to get the API to recognize these layers.  It does recognize the topographic layer but not the other layers "added from the web". If I turned on the default table of contents... I can then turn them on and off, but that is not acceptable as it does not present very well.

Does this explanation help any? Would a subset of code help?

Thanks

[NiranjanBorawake]

Hi Frank,

OK. Have a look at following code, if this serves your purpose.

var myMap = new esri.Map("mapDiv"); // Say you have your map declared and assigned to myMap variable
var layerIdsArr = myMap.layerIds; // This gives ids of all layers added to map.
var layer = myMap.getLayer(layerIdsArr[0]);// Say you want layer with an id at first index of layerIdsArr
layer.hide();// Will hide layer
layer.show(); Will show layer

Is this helpful?

~ Niranjan

[FrankFlynn]

Hi, this is helpful, but we did something like that previously.  When I use this code:

var layerIdsArr = map.layerIds;
var layer;
for (var i=0; i < layerIdsArr.length; i++) {
  layer = map.getLayer(layerIdsArr);
  console.log(layer.url);
  layer.hide();
}

We see on the console log
http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer

The basemap layer is easily turned off, (layer 0).  However the 2 important layers are the Service Territory (highlighted in light blueon the example map) and the symbols that identify different types of power outages.  For some reason, they are not recognized as layers?

If I add another ESRI "default" layer such as Map Notes... same problem, the API does not recognize this layer.  If I could get that layer recognized, I think I could have the answer to my problem.

I am stumped on this one.

The example map can be found at:
http://bit.ly/W31ZTh

Thank you very much for the help provided...

[NiranjanBorawake]

Hi Frank,

I think this would definitely help. Below code to hide/show layers is based on your example link.

I could open fire-bug and run below statements to hide these layers, for your example link.

var allLayersArr = esri.arcgisonline.map.main.mapLayers; //This gives you array of all layers object, log this to get the details of layers

esri.arcgisonline.map.main.mapLayers[0].layer.hide(); // Will hide base layer
esri.arcgisonline.map.main.mapLayers[1].layer.hide(); // Will hide layer at index 1, highlighted in light blue in your example
esri.arcgisonline.map.main.mapLayers[2].layer.hide(); // Will hide layer at index 2, the symbols that identify different types of power outages

Regards,

Niranjan

[FrankFlynn]

LOL... I am glad you got it to work 🙂  Thank you for sticking with this.

Your code statement returns an error for me.  It maybe the way I have the map defined.  I stripped out some code for you to have a look at.  If I use the statement: arcgisonline, I see an error in firebug:

TypeError: esri.arcgisonline is undefined
var layerIdsArr = esri.arcgisonline.map.main.mapLayers;

Here is some of our code:

        dojo.require("esri.map");
        dojo.require("esri.arcgis.utils");
        dojo.require("esri.dijit.Popup");

var map, mapIsLoaded, maxExtent, popup;

   function map_init() {
            esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx";
            var lods = [{ "level": 7, "resolution": 1222.99245256249, "scale": 4622324.434309 },
                        { "level": 8, "resolution": 611.49622628138, "scale": 2311162.217155 },
                        { "level": 9, "resolution": 305.748113140558, "scale": 1155581.108577 },
                        { "level": 10, "resolution": 152.874056570411, "scale": 577790.554289 }
                        ];

            var webmap = "c5468a0851e14f529a4fa034d7a3b5b2";

            maxExtent = new esri.geometry.Extent({ "xmin": -6850000, "ymin": 5820000, "xmax": -5630000, "ymax": 6554000, "spatialReference": { "wkid": 102100} });

            popup = new esri.dijit.Popup({ fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 255, 255]), 2), new dojo.Color([255, 0, 0, 0.1])) }, dojo.create("div"));

            mapDeferred = esri.arcgis.utils.createMap(webmap, "map", {
                mapOptions: {
                    infoWindow: popup,
                    extent: maxExtent,
                    lods: lods,
                    slider: true,
                    sliderStyle: "small",
                    nav: false,
                    showAttribution: false,
                    logo: false
                }
            })

            mapDeferred.addCallback(function (response) {
                map = response.map;

                if (map.loaded) {
                    mapLoaded();
                }
                else {
                    dojo.connect(map, "onLoad", mapLoaded);
                }
            });
        }

        function mapLoaded() {

//var layerIdsArr = esri.arcgisonline.map.main.mapLayers;

var layerIdsArr = map.layerIds;
var layer;
for (var i=0; i < layerIdsArr.length; i++) {
  layer = map.getLayer(layerIdsArr);
  console.log(layer.url);
  layer.hide();
}

        }

Thanks again

[NiranjanBorawake]

Could you please post part of the code that creates those layers which you want to hide or show.

[FrankFlynn]

Unfortunately no, because we don't add them through code.

We add them directly on ArcGIS online using the add layer menu.  But I was very hopeful when you mentioned you could turn them off through your code. I was wondering are you including something that we are not or is it the way we get the API to recognize our map?

Thanks