AnsweredAssumed Answered

Rss Checkbox  / Table of Contents  map.on issue???

Question asked by coaanalyst on May 1, 2014
Latest reply on Jul 10, 2014 by coaanalyst
[ATTACH=CONFIG]33521[/ATTACH]I currently have a Table of Contents working from a Dynamic Map Service under the Layers button. I would like to add a few RSS layers under the RSS Layers Button with a check box and name.  I can't figure out why the checkbox is not appearing for my rss layer. I assume has to do with map.on("layers-add-result",......
<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <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">
    <link rel="stylesheet" type="text/css" href="http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/css/agsjs.css" />
    <style>
        html, body {
            height: 100%;
            width: 100;
            margin: 0;
            padding: 0;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
   color: #00151; 
        }
       #map {
            padding: 0;
   overflow: hidden;
   background-color:#0072AF; color:#0072AF;
        }
   #header {
      margin:0px;
      padding: 0px;
   text-align:right;
    background: -webkit-gradient(linear, left top, left bottom, from(#005b8c), to(#1980b7));
       background-color:#0072AF; color:#0072AF;
      border: solid 1px #000000;
      height: 56px;
    }
 #bookmarks-wrapper {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 30px;
        background: transparent;
        font-size: 12pt;
        color: #444;
      }
   
   #Search-wrapper {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 140px;
        background: transparent;
        font-size: 12pt;
        color: #444;
      }
   
     #RssLayers-wrapper {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 265px;
        background: transparent;
        font-size: 12pt;
        color: #444;
      }
 #title {
      font-size:150%;
      color: #ffffff;
      text-align:center;
   margin: 2px;
    }
    #subfooter {
      font-size:small;
      color: #ffffff;
   font-size:13px;
      text-align:center;
   margin: 2px;
    }
    .esriControlsBR {
   display: none;
 }
 
 
        /* this line hides layers when out of scale for the inline TOC 
        .agsjsTOCOutOfScale {
            display: none
        }*/
    </style>
    <script type="text/javascript">
        var djConfig = {parseOnLoad: true, packages: [{"name": "agsjs","location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs" }] };
    </script>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script type="text/javascript">
        var map, toc, dynaLayer1;

        require(["dojo/_base/connect",
                 "dojo/parser",
      "esri/urlUtils",
      "dojo/on",
      "agsjs/dijit/TOC",
                 "esri/map",
     "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/dijit/Geocoder",
       "esri/layers/GeoRSSLayer",
       "esri/InfoTemplate",
       "dojo/_base/array",
       "esri/symbols/PictureMarkerSymbol",
       "esri/renderers/SimpleRenderer",
                 "dijit/form/CheckBox", 
       "dojo/dom", 
       "dojo/dom-construct",
      "dijit/form/DropDownButton",
      "dijit/form/Button",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      
                 "dojo/fx",
                 "dojo/domReady!"],
                 function (connect, parser,urlUtils, on, TOC, Map, ArcGISDynamicMapServiceLayer, Geocoder,GeoRSSLayer,InfoTemplate,array, PictureMarkerSymbol, SimpleRenderer, CheckBox, dom, domConstruct) {

                     //call the parser to create the layout dijits
                     parser.parse();


                     map = new Map("map", {
                         center: [-93.00, 35.768],
                         zoom: 4,
                         basemap: "streets"
                     });
///Proxy 
 
// Dyanmic layer For Table of Contents 
                     dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://maps5.gisworkshop.com/ArcGIS/rest/services/McKenzieTaxDirector/MapServer");

                     map.on('layer-add-result', function (e) {
                         dynaLayer1.setVisibleLayers([0]);
                         toc = new TOC({
                             map: map,
                             layerInfos: [{
                                 layer: dynaLayer1,
                                 title: "McKenzie Parcels",
                                 collapsed: true,
                                 slider: false
                             }]
                         }, 'tocDiv');
                         toc.startup();
                     });
                     map.addLayer(dynaLayer1);
///Geocoding Service  
  var geocoder = new Geocoder({
   placeholder: "",
   url: "",
   map: map,
   autoComplete: true,
   },"search");
   geocoder.startup();     
     

    // var georssUrl = "http://geocommons.com/overlays/116926.atom"; // S.F. and East Bay Breweries http://geocommons.com/overlays/116926
           var rssBeer = new GeoRSSLayer("http://geocommons.com/overlays/116926.atom", {id: "Beer"}); 
            rssBeer.on("load", function () {
                //domStyle.set("loading", "display", "none");
                // create an info template
                  var template = new InfoTemplate("${title}", "<tr><td></td><td>${description}</td></tr><br/><br/><tr><td>  <a href=${link} target=_blank> BeerLine </a></td></tr></br>");
    // 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 = rssBeer.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
                    };
      
                });
              
                //add check boxes
                array.forEach(layerInfo,

                function (layer) {
                    var layerName = layer.title;
                    if (layer.layer.id === "Beer") { layerName = "My Beer";}
                  
                    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([rssBeer]);
   
   
   
     }); // End Main Function ///////
    </script>
</head>
<body class="tundra">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
  
   <div id="title">Title Main
       <div id="subfooter">SubTitle</div> 
    
    </div> 
 <!-- Bookmarks widget inside a Drop Down Button -->
        <div id="bookmarks-wrapper">
   <div data-dojo-type="dijit/form/DropDownButton" region="top"> <span>Layers</span>
    <div data-dojo-type="dijit/TooltipDialog">
    <div id="tocDiv"></div>
    </div>
    </div>
  </div>
  
 <!-- Search widget inside a Drop Down Button -->
        <div id="Search-wrapper">
   <div data-dojo-type="dijit/form/DropDownButton" region="top"> <span>Address</span>
    <div data-dojo-type="dijit/TooltipDialog">
    <div id="search"></div>
    </div>
    </div>
  </div>
 <!-- Search widget inside a Drop Down Button -->
        <div id="RssLayers-wrapper">
   <div data-dojo-type="dijit/form/DropDownButton" region="top"> <span>Rss Layers</span>
    <div data-dojo-type="dijit/TooltipDialog">
     
     <h3>Layers</h3>
                <br>
    <div id="toggle" style="padding: 2px 2px;"></div>
    </div>
    </div>
  </div> 
 </div><!-- End Header -->

   <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center">
    

 
        </div> <!-- End Map-->
    </div>
    
</div>     
</body>
</html>

Attachments

Outcomes