Community
Select to view content in your preferred language

Dynamically Create Layer List Help

4744
13
Jump to solution
03-01-2014 01:40 PM
MichaelLisovich
by
New Contributor
‎03-01-2014 01:40 PM
I'm trying to use the script from https://developers.arcgis.com/javascript/jssamples/map_dynamiclayerlist.html in order to create checkboxes for the layers on the map. I've managed to get the script working, but can only add one array of layers. If I try to add another ArcGISDynamicMapServiceLayer line it overwrites the first one. Is there a way to add multiple arrays to the same script?
0 Kudos
13 Replies
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎04-08-2014 09:57 AM
This is one way of altering the checkbox name.
0 Kudos
MarkCunningham1
by
New Contributor III
‎04-09-2014 07:07 AM
Perhaps I should start a new Thread? I am wanting to add a label to a kml layer currently it displays as "undefined" I have tried to
add a {<title> </title> } element to the raw kml file without any success.  [ATTACH=CONFIG]32954[/ATTACH]

<!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/KMLLayer",
    "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, KMLLayer, 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 kmlUrl = "http://dl.dropbox.com/u/2654618/kml/Wyoming.kml";
    var kml = new KMLLayer(kmlUrl); 
        
        
           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, kml]);
  });
</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>
Preview file
684 KB
0 Kudos
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎04-09-2014 07:51 AM
In this example, I added an id to the KMLLayer and if the layer has that id, I change the layer name.

<!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/KMLLayer",
          "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, KMLLayer, 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 kmlUrl = "http://dl.dropbox.com/u/2654618/kml/Wyoming.kml";
            var kml = new KMLLayer(kmlUrl, {
                id: "KML"
            });


            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;
                    if (layer.layer.id === "KML") { layerName = "KML Layer";}
                    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, kml]);
        });
    </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>
0 Kudos
MarkCunningham1
by
New Contributor III
‎04-10-2014 04:41 AM
Thank you, exactly what I was needing.
0 Kudos