AnsweredAssumed Answered

Checkbox Change Div _ TOC

Question asked by Linn_GIS on Aug 25, 2014
Latest reply on Aug 26, 2014 by Linn_GIS

I am trying to discover a way to hide my div "layerTitle" if no TOC check boxes are selected. Any suggestions would be awesome!!

 

 

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

 

#layerTitle {

font-family: "Times New Roman", Times, serif;

font-size: 18px;

font-style: bold;

color: rgb(255, 255, 255);

vertical-align: middle;

padding: 5px;

top: 10px;

right: 35%;

position: absolute;

z-index: 50;

height: auto;

width: auto;

background-color: rgb(72, 99, 160)!important;

border-style: solid;

border-width: 1px;

border-radius: 5px;

opacity: 0.8;

text-align: center;

}

   

     #RssLayers-wrapper { 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/InfoTemplate", 

       "dojo/_base/array", 

     

       "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, InfoTemplate,array,  CheckBox, dom, domConstruct) { 

 

                     //call the parser to create the layout dijits 

                     parser.parse(); 

 

 

                     map = new Map("map", { 

                         center: [-101.00, 45.768], 

                         zoom: 6, 

                         basemap: "streets" 

                     }); 

///Proxy  

  

// Dyanmic layer For Table of Contents  

                     dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://maps5.gisworkshop.com/ArcGIS/rest/services/McKenzieTaxDirector/MapServer", {

                       id:'dynaLayer1'

                      

                     }); 

 

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

 

 

  /////

 

  dojo.connect(dynaLayer1, "onUpdate", showInfo);

  

///////////// Check-Box Created////////////////////////////////////

 

 

        map.on('layers-add-result', function () {

          //add check boxes

          arrayUtils.forEach(legendLayers, function (layer) {

            var layerName = layer.title;

  

            var checkBox = new CheckBox({

              name: "checkBox" + layer.layer.id,

              value: layer.layer.id,

              checked: layer.layer.visible

            });

            checkBox.on("change", function () {

              var targetLayer = map.getLayer(this.value);

              targetLayer.setVisibility(!targetLayer.visible);

              this.checked = targetLayer.visible;

            });

 

 

            //add the check box and label to the toc

            domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");

            var checkLabel = domConstruct.create('label', {

                'for': checkBox.name,

                innerHTML: layerName

              }, checkBox.domNode, "after");

            domConstruct.place("<br /><hr>", checkLabel, "after");

          });

        });       

/////////////////////ENd CHeckBOx///////////

 

 

      

    

    

     }); // End Main Function /////// 

 

// Show TITLE based on CheckBox Selected

function showInfo(){

    var visibleLayers =  dynaLayer1.visibleLayers;

  dynaLayer1.layerIds = visibleLayers;

   

    if (dynaLayer1.visibleLayers =='0'){

  dojo.byId("layerTitle").innerHTML = ('Layer 0');

  }

  else if (dynaLayer1.visibleLayers =='1'){

  dojo.byId("layerTitle").innerHTML = ('Layer 1');

  }

  else if (dynaLayer1.visibleLayers =='2'){

  dojo.byId("layerTitle").innerHTML = ('Layer 2');

  }

  else if (dynaLayer1.visibleLayers =='3'){

  dojo.byId("layerTitle").innerHTML = ('Layer 3');

  }

   

  };

    

    

    </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><!-- End Header --> 

 

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

     

   <div id="layerTitle"></div>

  

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

    </div> 

     

</div>      

</body> 

</html> 

Attachments

Outcomes