Latest Contributions by jaykapalczynski

I know this is not the way to do this although I don know of any other way to accomplish what I am looking for... This is how I put on a large band-aid I still have to clean up the CSS to hide the clumsiness of this approach...especially with nesting the accordion panes.. I still have to clean up my code so don't be too judgmental I repeated the code to build the legend layers in each of the accordion panes. I can put if then statements in this section to decrease the amount of code - map.on('layers-add-result', function () { This gives you something like this in your panel... I have a container for Weather, Incidents, Other Layers. If I do a little CSS work I can get ride of the frames and color backgrounds and make this look a little more appealing. The example below does not have all the layers in the image.  In my below example it would simply put one feature layer in each of the 3 accordions Follow the "legendLayers1.push" below from each FeatureLayer to the function below it. legendLayers1.push({ layer: WeatherImpactWashout, title: 'WeatherImpact Washout' }); legendLayers2.push({ layer: WeatherImpactWashout, title: 'WeatherImpact Washout' }); legendLayers2.push({ layer: WeatherImpactWashout, title: 'WeatherImpact Washout' }); <div id="IDAccordionPaneLayers" data-dojo-type="dijit.layout.AccordionContainer" style="color:black; height:90%; width:90%;">                          <div id="idLayers2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Weather'" >          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Natural Disasters'">           <div id="toggle2" style="padding: 2px 2px; color:Black;"></div>          </div>      </div>                <div id="idLayers3" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Incidents & Traffic'" >          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Natural Disasters'">           <div id="toggle3" style="padding: 2px 2px; color:Black;"></div>          </div>      </div>           <div id="idLayers1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Layers1'" >          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Natural Disasters'">           <div id="toggle1" style="padding: 2px 2px; color:Black;"></div>          </div>      </div>                     </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ var WeatherImpactPowerLines = new FeatureLayer("https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_WeatherImpactPoints/MapServer/4", {      mode: FeatureLayer.MODE_ONDEMAND,      visible: false,      outFields:["*"],      infoTemplate: infoWeatherImpact }); legendLayers1.push({ layer: WeatherImpactPowerLines, title: 'WeatherImpact Power Lines' }); var WeatherImpactOther = new FeatureLayer("https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_WeatherImpactPoints/MapServer/5", {      mode: FeatureLayer.MODE_ONDEMAND,      visible: false,      outFields:["*"],      infoTemplate: infoWeatherImpact }); legendLayers2.push({ layer: WeatherImpactOther, title: 'WeatherImpact Other' });           var WeatherImpactPassable = new FeatureLayer("https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_WeatherImpactPoints/MapServer/6", {      mode: FeatureLayer.MODE_ONDEMAND,      visible: false,      outFields:["*"],      infoTemplate: infoWeatherImpact }); legendLayers3.push({ layer: WeatherImpactPassable, title: 'WeatherImpact Passable' }); // ADD CHECK BOXES FOR LAYERS map.on('layers-add-result', function () {      //add check boxes      arrayUtils.forEach(legendLayers1, 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");           domConstruct.place(checkBox.domNode, dom.byId("toggle1"), "after");                   var checkLabel = domConstruct.create('label', {                    'for': checkBox.name,                    innerHTML: layerName                }, checkBox.domNode, "after");                domConstruct.place("<br />", checkLabel, "after");      });      arrayUtils.forEach(legendLayers2, 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");           domConstruct.place(checkBox.domNode, dom.byId("toggle1"), "after");                   var checkLabel = domConstruct.create('label', {                    'for': checkBox.name,                    innerHTML: layerName                }, checkBox.domNode, "after");                domConstruct.place("<br />", checkLabel, "after");      });                    arrayUtils.forEach(legendLayers3, 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");           domConstruct.place(checkBox.domNode, dom.byId("toggle1"), "after");                   var checkLabel = domConstruct.create('label', {                    'for': checkBox.name,                    innerHTML: layerName                }, checkBox.domNode, "after");                domConstruct.place("<br />", checkLabel, "after");      });                    });               //ADD THE LEGEND AND XY COORDINATES map.on("layers-add-result", function (evt) { // CYCLE through and grab all the layer names to add to the LEGEND PLUS // Remove layers not inteneted for the legend.      var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {           if (layer.layer.id === "PastLocations" || layer.layer.id === "District" || layer.layer.id === "weatherlayer") { return { }; } //Hides Layers in the Legend                 else { return { layer: layer.layer, title: layer.layer.name }; } //Else return All others      }); // CYCLE through and grab all the layer names to add to the LEGEND      if (layerInfo.length > 0) {           var legendDijit = new Legend({           map: map,           layerInfos: layerInfo,           }, "legend");           legendDijit.startup();              legendDijit.refresh();           } }); map.addLayers([ WeatherImpactPassable,WeatherImpactOther,WeatherImpactPowerLines ]);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more