I have a Content Pane that contains an AccordionContainer and two content panes. One of the content panes contains a Legend for the map. I want the content pane that contains everything to be hidden when the map loads. I have a button that I've set up to click to open the outer Content Pane and show the Legend. When I set the visibility of the outer content pane to hidden and click the button, the Legend is not visible when it opens. However, if I set the visibility of the outer content pane to visible the Legend opens up and is visible when the map opens. I'm not sure what I'm missing. but I have code and a couple screen shots below.
Thanks,
George Hilton
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Identify with Popup</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<script src="https://js.arcgis.com/3.16/"></script>
<style>
html, body, #map {
height:100%;
width:100%;
margin:0;
padding:0;
}
#button{
position: absolute;
width: 50px;
height: 25px;
left: 10px;
top: 100px;
background-color:grey;
border: 1px black;
border-radius: 5px;
z-index: 6;
}
#button:hover {
background-color: green;
}
#zoomout{
position: absolute;
width: 50px;
height: 25px;
left: 10px;
top: 80px;
background-color:green;
z-index: 6;
}
#rightPane {
position: absolute;
//float: right;
right: 0px;
bottom: 50px;
height: 80%;
width: 20%;
background-color: white;
border: 1px solid grey;
border-radius: 5px;
z-index: 6;
}
#leftPane {
position: absolute;
//float: left;
left: 0px;
bottom: 10px;
height: 400px;
width: 300px;
background-color: white;
border: 1px solid green;
border-radius: 5px;
z-index: 6;
}
#legendPane {
border: solid #97DCF2 1px;
background-color: white;
}
.dijitAccordionTitle {
font-size: 1.25em;
font-family: Arial;
}
.dijitAccordionTitle:hover {
background-color: grey;
}
.dijitAccordionTitleSelected {
background-color: #ccffcc;
}
</style>
<script>
var map;
var pLayer;
var visibleLayerIds;
var legend;
require([
"esri/map",
"esri/InfoTemplate",
"esri/dijit/Legend",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/dijit/Popup",
"dojo/on",
"dojo/parser",
"dojo/_base/array",
"esri/Color",
"dijit/form/Button",
"dijit/layout/AccordionContainer",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/registry",
"dojo/domReady!"
], function (
Map, InfoTemplate, Legend, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup, on, parser,
arrayUtils, Color, registry
) {
parser.parse();
var identifyTask, identifyParams;
map = new Map("map", {
basemap: "topo",
logo: false,
slider: false,
showAttribution: false,
center: [-73.68, 43.35],
zoom: 11
});
var parcelsURL = "http://toqgis.queensbury.net/arcgis/rest/services/Web_App/MapServer";
pLayer = new ArcGISDynamicMapServiceLayer(parcelsURL);
map.addLayers([pLayer]);
map.on("load", mapReady);
map.on("layers-add-result", layersadded);
function layersadded() {
document.getElementById("layer0CheckBox").checked=true;
document.getElementById("layer1CheckBox").checked=true;
document.getElementById("layer2CheckBox").checked=true;
document.getElementById("layer3CheckBox").checked=true;
document.getElementById("layer4CheckBox").checked=false;
visibleLayerIds= [0,1,2,3]
legend = new Legend({
map: map,
layerInfos: [{
layer: pLayer,
hideLayers: [0,1],
title: "Interactive Map Layers"
}]
},"legendDiv");
legend.startup();
}
function mapReady () {
for (i=0; i < pLayer.layerInfos.length; i++) {
var lname = pLayer.layerInfos;
console.log(lname.name);
if (lname.defaultVisibility ==true) {console.log("vis" + lname.name)}
}
map.on("click", executeIdentifyTask);
identifyTask = new IdentifyTask(parcelsURL);
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 3;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [3,5,6];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
identifyParams.width = map.width;
identifyParams.height = map.height;
}
function executeIdentifyTask (event) {
identifyParams.geometry = event.mapPoint;
identifyParams.mapExtent = map.extent;
identifyTask.execute(identifyParams, function(results){
for (i = 0; i < results.length; i++) {
var layername = results.layerName;
console.log(layername);
}
});
}
});
function buttonclick() {
var legwin = document.getElementById("rightPane");
//**** THIS IS THE CODE TO SET THE OUTER CONTENT PANE VISIBLE FROM BUTTON CLICK
//legwin.style.visibility = 'visible';
var layercount = pLayer.layerInfos.length;
for (i = 0; i < layercount; i++) {
// console.log(pLayer.layerInfos.name);
}
require(["esri/toolbars/navigation"], function(Navigation) {
navToolbar = new Navigation(map);
navToolbar.activate(Navigation.ZOOM_IN); });
}
function updateVisibility(inbox) {
var inputs = document.getElementsByClassName("list_item");
//var inputCount = inputs.length;
// alert("Class Count" + incnt);
visibleLayerIds = [];
for (var i = 0; i < inputCount; i++) {
if (inputs.checked) {
visibleLayerIds.push(inputs.value);
}
}
if (visibleLayerIds.length === 0) {
visibleLayerIdsp.push(-1);
}
pLayer.setVisibleLayers(visibleLayerIds);
legend.refresh([{layer: pLayer}]);
}
</script>
</head>
<body class="claro">
<div id="map">
<div id="leftPane" >
<input type='checkbox' class='list_item' id='layer0CheckBox' value=0 onchange="updateVisibility(id)" />Municipal Boundaries<br>
<input type='checkbox' class='list_item' id='layer1CheckBox' value=1 onchange="updateVisibility(id)" />Town Boundary<br>
<input type='checkbox' class='list_item' id='layer2CheckBox' value=2 onchange="updateVisibility(id)" />Roads<br>
<input type='checkbox' class='list_item' id='layer3CheckBox' value=3 onchange="updateVisibility(id)" />Queensbury Parcels<br>
<input type='checkbox' class='list_item' id='layer4CheckBox' value=4 onchange="updateVisibility(id)" />Election Districts<br>
<input type='checkbox' class='list_item' id='layer5CheckBox' value=5 onchange="updateVisibility(id)" />Subdivisions<br>
<input type='checkbox' class='list_item' id='layer6CheckBox' value=6 onchange="updateVisibility(id)" />Zoning Districts<br>
<input type='checkbox' class='list_item' id='layer7CheckBox' value=7 onchange="updateVisibility(id)" />Sewerlines<br>
<input type='checkbox' class='list_item' id='layer8CheckBox' value=8 onchange="updateVisibility(id)" />Waterlines<br>
<input type='checkbox' class='list_item' id='layer9CheckBox' value=9 onchange="updateVisibility(id)" />Waterbodies<br>
<input type='checkbox' class='list_item' id='layer10CheckBox' value=10 onchange="updateVisibility(id)" />Streams<br>
<input type='checkbox' class='list_item' id='layer11CheckBox' value=11 onchange="updateVisibility(id)" />Flood Zones<br>
<input type='checkbox' class='list_item' id='layer12CheckBox' value=12 onchange="updateVisibility(id)" />Critical Environmental Areas<br>
<input type='checkbox' class='list_item' id='layer13CheckBox' value=13 onchange="updateVisibility(id)" />Mapped DEC Wetlands<br>
<input type='checkbox' class='list_item' id='layer14CheckBox' value=14 onchange="updateVisibility(id)" />Mapped APA Wetlands<br>
<input type='checkbox' class='list_item' id='layer15CheckBox' value=15 onchange="updateVisibility(id)" />NWI Wetlands<br>
</div>
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'" style="visibility: visible"> <!-- VISIBILITY SET TO HIDDEN TO HIDE ON MAP LOAD -->
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="layerList"
data-dojo-props="title:'Layer List'">
<div id="tabs" data-dojo-type="dijit/layout/TabContainer" style="width:200px; height:150px;">
<div id="bldgTab" data-dojo-type="dijit/layout/ContentPane" title="Buildings"></div>
<div id="parcelTab" data-dojo-type="dijit/layout/ContentPane" title="Tax Parcels"></div>
</div>
</div>
</div>
</div>
</div>
<div id="button" onclick="buttonclick()"></div>
</div>
</body>
</html>