coaanalyst

Set order of layers?

Discussion created by coaanalyst on Apr 2, 2014
Latest reply on Apr 3, 2014 by JUihlein-esristaff
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>

Outcomes