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

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

Vind meer berichten getagd met

Accepted answers

FrankFlynn

I was speaking with an ESRI employee and he said the layers added this way are actually graphic objects... so he suggested a small change to our code... which works! Thanks so much.

function mapLoaded() {

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

}

All comments

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

FrankFlynn

I also asked our developer to get a code snippet that would actually run, verbatim... He commented out the part that we tried to do the layer hiding. This should run as a html file for you if you wanted to try it. We could not get your statment ( esri.arcgisonline.map.main.mapLayers) to run. It through back the error we mentioned previously.

Sorry for taking your time, but thanks again for your previous responses.

This should as an html file... however we had to add a proxy line to our website config to get it to work.

<html>
<body>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
    <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/Popup.css'/>

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>

    <script type="text/javascript">
        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();
//}

        }

window.onload = function() {
                map_init();
    }

    </script>

<div id="map" style="border:1px solid #000;width: 978px;height: 600px;"></div>

</body>
</html>

FrankFlynn

Would it be possible for you to post a complete working set of your code example. That might help me understand why we could not get the statement: "esri.arcgisonline.map.main.mapLayers[0].layer.hide()" to be recognized.

Thanks again,

Frank

FrankFlynn

RosalindaGuzman

a few years later, this is simple and works perfectly for me, thank you!

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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