Set order of layers?

MarkCunningham1 · ‎04-02-2014

I am trying to figure out the best way to set layers according to a specified order. The layers currently order themselves randomly( I assume in the order they load) this becomes more of an issue when I add multiple layers. Thank you for the help.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>RssToggle</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">

<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
  html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
  #map { height: 100%; margin: 0; padding: 0; }
  #metaLegend {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 20em;
    height: 5em;
    z-index: 40;
    background: #fff;
    color: #777;
    padding: 5px;
    border: 2px solid #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    font-family: arial;
    font-size: 0.9em;
  }
  #metaLegend h3 {
    color: #666;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
 #metac {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 20em;
    height: 5em;
    z-index: 40;
    background: #fff;
    color: #777;
    padding: 5px;
    border: 2px solid #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    font-family: arial;
    font-size: 0.9em;
  }
   #metac h3 {
    color: #666;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
  legendDiv {
    display:none;}
</style>

<script src="http://js.arcgis.com/3.8/"></script>
<script>
  var map;
  require([
    "esri/map", 
    "esri/layers/GeoRSSLayer",
    "esri/InfoTemplate",
    "dojo/parser", 
     "esri/layers/FeatureLayer",
    
    "dojo/_base/array",
              "esri/symbols/PictureMarkerSymbol", 
              "esri/renderers/SimpleRenderer",
        "esri/dijit/Legend",
        "dijit/form/CheckBox","dojo/dom", "dojo/dom-construct", 
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
  ], function(
    Map, GeoRSSLayer, InfoTemplate,
    parser, FeatureLayer,array, PictureMarkerSymbol, SimpleRenderer, Legend,CheckBox, dom, domConstruct
  ) {
    map = new esri.Map("map",{ 
      basemap: "oceans", 
      center: [-122.399, 37.78],
      zoom: 9
    });

    // create layout dijits
    parser.parse();
        
           var cities = new FeatureLayer(
                "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"]
                });

    // var georssUrl = "http://geocommons.com/overlays/116926.atom"; // S.F. and East Bay Breweries http://geocommons.com/overlays/116926
    var georss = new GeoRSSLayer("http://geocommons.com/overlays/116926.atom"); 
    georss.on("load", function() {
      //domStyle.set("loading", "display", "none");
      // create an info template
      var template = new InfoTemplate("${address}", "${zip}");
      // set the info template for the feature layers that make up the GeoRSS layer
      // the GeoRSS layer contains one feature layer for each geometry type
      var layers = georss.getFeatureLayers();
            var picRenderer = new PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Basic/RedShinyPin.png", 21, 21);
            var georssRenderer = new SimpleRenderer(picRenderer);
      array.forEach(layers, function(l) {
         l.setInfoTemplate(template);
         l.setRenderer(georssRenderer)
      });
    });
  ///////////////////////////////////////////////////////////////////////////  
    
    
    
    
 //////////////////////////////////////////////////////////   
    //add the legend
            map.on("layers-add-result", function (evt) {
                var layerInfo = array.map(evt.layers, function (layer,
                index) {
                    return {
                        layer: layer.layer,
                        title: layer.layer.name
                    };
                });
                if (layerInfo.length > 0) {
                    var legendDijit = new Legend({
                        map: map,
                        layerInfos: layerInfo
                    }, "legendDiv");
                    legendDijit.startup();
                }
                //add check boxes
                array.forEach(layerInfo,

                function (layer) {
                    var layerName = layer.title;
                    var checkBox = new CheckBox({
                        name: "checkBox" + layer.layer.id,
                        value: layer.layer.id,
                        checked: layer.layer.visible,
                        onChange: function (evt) {
                            var clayer = map.getLayer(this.value);
                            clayer.setVisibility(!clayer.visible);
                            this.checked = clayer.visible;
                        }
                    });
                    //add the check box and label to the TOC
                    domConstruct.place(checkBox.domNode, "toggle",
                        "after");
                    var checkLabel = domConstruct.create('label', {
                        'for': checkBox.name,
                        innerHTML: layerName
                    }, checkBox.domNode, "after");
                    domConstruct.place("<br />", checkLabel,
                        "after");
                });
            });
    
        
    map.addLayers([georss,cities]);
  });
</script>
</head>

<body class="tundra">
<div data-dojo-type="dijit/layout/BorderContainer" 
     data-dojo-props="design:'headline',gutters:false" 
     style="width: 100%; height: 100%; margin: 0;">
  <div id="map" 
       data-dojo-type="dijit/layout/ContentPane" 
       data-dojo-props="region:'center'"> 
    <div id="metaLegend"style="display: none;">
     
      <h3>Legend</h3>
      <br>
      <div id="legendDiv"></div>
     </div>
   
   <div id="metac">
     
      <h3>Layers</h3>
      <br>
       <div id="toggle" style="padding: 2px 2px;"></div>
    </div> </div> </div>
  </div>

</body>
</html>

TracySchloss · ‎04-02-2014

It's not random, they're laid down in the order you specify in map.addLayers. The one you want on top should be listed last, not first.

MarkCunningham1 · ‎04-03-2014

Thank you for your response.
I think that stands true when you only have feature layers, however I am using an rss feed. If you copy and past the code into the sandbox or even into a html document and put it on the web hit refresh a few times you will see the layers change order.

JonathanUihlein · ‎04-03-2014

I am seeing the behavior you describe.
After refreshing several times, sometimes Cities appears higher than Breweries in the Layers menu.

You are correct that they are added in the order that they load, because that's how your application is set up.

By using the "layers-add-result" event, you are waiting until all the layers are successfully added to the map, in the order that they are loaded. This is not wrong, but may not be exactly what you want.

If you want to guarantee the layers are added to the map in a specific order, you could use a deferred list to make sure all requests are resolved before adding the actual layers.