topic Re: Checkbox Change Div _ TOC in ArcGIS JavaScript Maps SDK Questions

Checkbox Change Div _ TOC

CraigLinn — Mon, 25 Aug 2014 16:11:11 GMT

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>

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

var djConfig = {parseOnLoad: true, packages: [{"name": "agsjs","location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs" }] };

</script>

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>

<div id="title">Title Main

<div id="subfooter">SubTitle</div>

</div>

<div data-dojo-type="dijit/form/DropDownButton" region="top"> <span>Layers</span>

</div>

</div>

</div>

</div>

</body>

</html>

Re: Checkbox Change Div _ TOC

RobertScheitlin__GISP — Mon, 25 Aug 2014 17:06:01 GMT

Craig,

You have a lot of work to do here but here is your code working with turning your div off if there is no visible layers:

<!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/_base/html",
                "dojo/dom-construct",
                "dojo/fx",
                "dijit/form/DropDownButton", 
                "dijit/form/Button", 
                "dijit/layout/BorderContainer", 
                "dijit/layout/ContentPane", 
                "dojo/domReady!"], 
                function (connect, parser, urlUtils, on, TOC, Map, ArcGISDynamicMapServiceLayer, InfoTemplate, array, CheckBox, dom, html, domConstruct, fx) { 

                    //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///////////

        function showInfo(){
          var visibleLayers =  dynaLayer1.visibleLayers;
          dynaLayer1.layerIds = visibleLayers;
          html.setStyle(dojo.byId("layerTitle"), 'display', 'block');
          var visLayers = "Layer(s): ";
          dojo.byId("layerTitle").innerHTML = visLayers + visibleLayers.toString();
          if(dynaLayer1.visibleLayers[0] == -1){
            html.setStyle(dojo.byId("layerTitle"), 'display', 'none');
          }
        };
   
    }); // 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><!-- End Header --> 

    <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center"> 
      <div id="layerTitle"></div>
    </div> <!-- End Map-->
  </div>
</body> 
</html>

Re: Checkbox Change Div _ TOC

CraigLinn — Tue, 26 Aug 2014 14:35:00 GMT

Thank you, I was able to tweak your suggestion and apply it to my situation.