topic Re: Setting Content Pane visible does not open Legend widget in ArcGIS JavaScript Maps SDK Questions

Setting Content Pane visible does not open Legend widget

GeorgeHilton__GISP — Mon, 25 Jul 2016 13:00:32 GMT

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>

<title>Identify with Popup</title>

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

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>

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

<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"

data-dojo-props="title:'Legend', selected:true">

</div>

<div data-dojo-type="dijit/layout/ContentPane" id="layerList"

data-dojo-props="title:'Layer List'">

</div>

</div>

</body>

</html>

Re: Setting Content Pane visible does not open Legend widget

TimWitt2 — Mon, 25 Jul 2016 13:06:19 GMT

When you click the button to make it visible, did you try to run the refresh method? Legend | API Reference | ArcGIS API for JavaScript 3.17

Re: Setting Content Pane visible does not open Legend widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:16:00 GMT

George,

I have tweaked your code a little to fix that issue:

<!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/registry",
            "esri/toolbars/navigation",
            "dijit/form/Button",
            "dijit/layout/AccordionContainer",
            "dijit/layout/ContentPane",
            "dijit/layout/TabContainer",
            "dojo/domReady!"
        ], function(
            Map, InfoTemplate, Legend, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
            SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup, on, parser,
            arrayUtils, Color, registry, Navigation
        ) {
            parser.parse();
            var identifyTask, identifyParams;

            on(document.getElementById("button"), "click", buttonclick);

            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';
                registry.byId("ac").selectChild("legendPane", true);

                var layercount = pLayer.layerInfos.length;

                for (i = 0; i < layercount; i++) {
                    // console.log(pLayer.layerInfos.name);
                }
                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: hidden">
            <!-- VISIBILITY SET TO HIDDEN TO HIDE ON MAP LOAD -->
            <div data-dojo-type="dijit/layout/AccordionContainer" id="ac">
                <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend'">
                    <div id="legendDiv"></div>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" id="layerList" data-dojo-props="title:'Layer List', selected:true">
                    <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"></div>
    </div>
</body>
</html>

Re: Setting Content Pane visible does not open Legend widget

GeorgeHilton__GISP — Mon, 25 Jul 2016 14:44:34 GMT

Thanks Robert !! The fix seems to be that you assigned an id to the AccordionContainer and then set the Legend visible with selectChild using the ContentPane's id (legendPane).

Thanks again for your quick response and your edits on the code !

George