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>
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>
Thank you, I was able to tweak your suggestion and apply it to my situation.