Hi,
I have based my Javascript api 3.17 code on the Info window with chart | ArcGIS API for JavaScript 3.17 sample. I am using a dynamicMapServiceLayer instead of a FeatureLayer and I have defined a layout in html. I have programmatically created a tab container within the popup so that the user can view info about the polygon and then see graphs and a table in the other tabs. My problem is that when I click on the map and the popup appears, the first tab appears selected but no content is shown. Other tabs clicked work appropriately. When the original tab is click, then the content is visible. I would like the content to be visible when the popup opens and not have to click back and forth on the tabs to see the first content pane. I've done a lot of searching and have seen one or two posts with a similar problem. The solution given is to do a resize, however that doesn't seem to work for me. Perhaps I did not put it in the correct place.
I have also inspected the elements and see that the div with role="tabpanel" has a class="dijitTabContainerTopChildWrapper dijitHidden" . When a tab in the tabcontainer is clicked and shows its contents then the class changes to "dijitTabContainerTopChildWrapper dijitVisible". I am at a loss on how to make my selected tab be visible.
Can anyone please help me? I have included my test code below.
<!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>Info Window with Chart</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
html,
body, #contentDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding: 0;
border-color: black;
border-width: 1px;
}
#header {
height: 60px;
}
#rightPane {
width: 20%;
}
.claro .tabStripButton {
display: none;
}
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map;
var theme = "Wetland";
require([
"esri/map", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/InfoWindow", "esri/InfoTemplate", "esri/dijit/Popup", "esri/layers/ImageParameters",
"esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
"dijit/layout/ContentPane", "dijit/layout/TabContainer",
"dojox/charting/Chart2D", "dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight", "dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip",
"dojox/charting/themes/" + theme,
"dojo/dom-construct", "dojo/dom-class",
"dojo/number", "dojo/parser", "dijit/layout/BorderContainer", "dojo/domReady!"
], function (
Map, FeatureLayer, ArcGISDynamicMapServiceLayer,
InfoWindow, InfoTemplate, Popup, ImageParameters,
SimpleFillSymbol, SimpleRenderer,
ContentPane, TabContainer,
Chart2D, Pie,
Highlight, MoveSlice, Tooltip,
dojoxTheme,
domConstruct, domClass,
number, parser
) {
parser.parse();
// Use the info window instead of the popup.
var popupOptions = {
marginLeft: "40",
marginTop: "100"
};
var vosaraPopup = new Popup(popupOptions, domConstruct.create("div"));
vosaraPopup.visibleWhenEmpty = false;
vosaraPopup.hideDelay = 0;
// InfoTemplate titles ....
var reefInfoTemplate = new InfoTemplate();
reefInfoTemplate.setTitle("<b>${NAME}: ${SQMI} sq miles</b>");
reefInfoTemplate.setContent(getWindowContent);
map = new Map("map", {
basemap: "streets",
center: [-76.6435, 37.3905],
infoWindow: vosaraPopup,
zoom: 10
});
map.infoWindow.resize(400, 350);
var imageParametersCen = new ImageParameters();
var layerDefsFP = [];
layerDefsFP[3] = "STATE_FIPS LIKE '51%'";
imageParametersCen.layerDefinitions = layerDefsFP;
imageParametersCen.layerIds = [2];
imageParametersCen.layerOption = ImageParameters.LAYER_OPTION_SHOW;
imageParametersCen.transparent = true;
var censusLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
"imageParameters": imageParametersCen,
"opacity": 1,
id: 'census'
});
censusLayer.setVisibility(true);
censusLayer.setVisibleLayers([2]);
censusLayer.setInfoTemplates({
2: {
infoTemplate: reefInfoTemplate
}
});
map.addLayer(censusLayer);
function getWindowContent(censusLayer) {
// Make a tab container.
var tc = new TabContainer({
style: "width:100%;height:100%;",
id: "tabc"
}, domConstruct.create("div"));
// Display attribute information.
var cp1 = new ContentPane({
title: "Details",
content: "<br>Description: <br><br><b>County/City Name:</b>" + censusLayer.attributes.NAME + "<br><b>2000 Population:</b>" + censusLayer.attributes.POP2000 + "<br><b>2007 Population:</b>" + censusLayer.attributes.POP2007 + "<br>"
});
var cp2 = new ContentPane({
title: "Oyster Graph",
content: "a graph here"
});
var cp3 = new ContentPane({
title: "Shell Graph",
content: "another graph"
});
var cp5 = new ContentPane({
title: "Harvest Table",
content: "a table here"
});
tc.addChild(cp1);
tc.addChild(cp2);
tc.addChild(cp3);
tc.addChild(cp5);
return tc.domNode;
}
});
</script>
</head>
<body class="claro">
<div id="contentDiv" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<p id="pTitle">Header</p>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden">
</div>
<div id="rightPane" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Map Contents:'">
<div id="bcrs" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', region: 'right', gutters: false">
<div id="tocDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
</div>
<div id="legDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom', splitter: true">
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/TabContainer" title="About" nested="true" selected="true">
<div id="introDiv1" data-dojo-type="dijit/layout/ContentPane" title="Intro" selected="true">
Help me figure this out! Click on a county and a popwindow appears. Notice that the first tab (Details) is selected but no content shows. Click another tab and content is visible. Click on the Details tab and now the content shows. How do I get the content to be visible without having to click back and forth?
</div>
<div id="methDiv" data-dojo-type="dijit/layout/ContentPane" title="Methods">
more text here
</div>
<div id="helpDiv" data-dojo-type="dijit/layout/ContentPane" title="Help">
still more text here.
</div>
</div>
</div>
</div>
</body>
</html>
Thank so much for any help that can be provided!
edit: sorry, I don't think inserting my code worked so I've added it as an attachment.
