I have a map on which I am loading a couple feature layers. Additionally, I am adding 2 feature tables, each one associated with one of the feature layers. Because the layers are scale-dependent, I am only showing one table at a time using jQuery's show() and hide() functions.
At the initial extent, only one table is shown. When a user zooms in a couple levels, that first table disappears and the second table appears. The show/hide function is working well, for the most part. The issue that I am encountering is that when the second table appears, the column headers are not present in the feature table. If I add/hide a column through the "Options" menu, then the column headers appear again.
An interesting twist...if I leave both tables visible at the initial extent and zoom in, when the second table re-appears, it shows with the column headers.
Any idea what could be causing this issue?
Thanks...Chris
Chris,
I have seen this before and the issue seems to be that the FeatureTable need to be created and added to the DOM to a div that is not "display: none" but visibility: hidden or just set to the outside bounds of the view display. If you share your code then I can provide more help.
Thanks for the reply, Robert. Please see the code below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Using FeatureTable</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
html, body, #map{
width:100%;
height:500px;
margin:0;
padding:0;
}
#divGrid {
width: 100%;
height: 200px;
margin-bottom: 20px;
}
.tableheight {
height: 300px;
}
</style>
<script>
require([
"esri/geometry/Extent",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters",
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"esri/renderers/SimpleRenderer",
"esri/renderers/ClassBreaksRenderer", "esri/tasks/GenerateRendererParameters", "esri/tasks/GenerateRendererTask",
"esri/tasks/ClassBreaksDefinition",
"esri/tasks/AlgorithmicColorRamp",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/geometry/webMercatorUtils",
"esri/map", "esri/layers/LayerDrawingOptions",
"dojo/dom-construct",
"dojo/dom",
"dojo/parser",
"dojo/ready",
"dojo/on",
"dojo/_base/lang",
"dijit/registry",
"esri/tasks/query",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/form/TextBox"
], function ( Extent,ArcGISDynamicMapServiceLayer, ImageParameters,
FeatureLayer, FeatureTable, SimpleRenderer, ClassBreaksRenderer, GenerateRendererParameters, GenerateRendererTask, ClassBreaksDefinition, AlgorithmicColorRamp,SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, webMercatorUtils, Map, LayerDrawingOptions,
domConstruct, dom, parser, ready, on,lang,
registry, Query, Button, ContentPane, BorderContainer, TextBox
) {
parser.parse();
ready(function(){
var initialExtent = new esri.geometry.Extent({
"xmin": -14901092.916080378,
"ymin": 2570827.677759068,
"xmax": -7382135.317726159,
"ymax": 7046980.0541378,
"spatialReference": { "wkid": 102100 }
});
var map, citypointFT, citypolyFT, tractpolyFT, citypointlayer, citypolygonlayer, tractpolygonlayer, fl_url;
var fieldsoutputted, fieldsarray, renderedField = "col1", MoreDetails = "col2";
var myFeatureLayer, renderer, DynamicMapServiceURL = "xxx";
// define the dynamic map service layer
var imageParameters = new ImageParameters();
imageParameters.format = "png";
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(DynamicMapServiceURL, {
"opacity": 1.0,
"imageParameters": imageParameters
});
map = new Map("map",{
basemap: "gray", extent: initialExtent
});
var pointSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setSize(8).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153, 153]));
var polygonSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_SOLID).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153, 153]));
// load the feature table and its accompanying data on map load
map.on("load", loadTable);
// show/hide table, based on scale
map.on("extent-change", showHideGridAndLegend);
// the function below displays an error message and hides the div in which the map is drawn
function showErr(err)
{
'use strict;'
console.log("Error Details: " + err);
}
function AddGrid(lyrid, gridloc)
{
var existingGrid = dijit.byId(gridloc);
if (existingGrid)
{
existingGrid.destroyRecursive(true);
}
if (lyrid === 4)
{
tractpolyFT = new FeatureTable({
"featureLayer": tractpolygonlayer,
"map": map,
"showStatistics": false,
"zoomToSelection": false,
"syncSelection": true,
"outFields": ["PlaceName", "StateAbbr", "plc_tract2010", renderedField, MoreDetails, "PlcTrPop2010"],
"fieldInfos": [{
name: 'PlaceName',
alias: 'City',
}, {
name: 'StateAbbr',
alias: 'State',
}, {
name: 'plc_tract2010',
alias: 'Census Tract ID',
}, {
name: renderedField,
alias: 'Column 1',
}, {
name: MoreDetails,
alias: 'More Details',
}, {
name: 'PlcTrPop2010',
alias: '2010 Census Population'
}]
//,
//"gridOptions": [{
// noDataMessage: "No Data",
// allowSelectAll: false,
// columnHider: false,
// sort: {
// field: "PlaceName", ascending: true,
// field: "StateAbbr", ascending: true,
// field: "plc_tract2010", ascending: true
// }
//}]
}, gridloc);
tractpolyFT.startup();
} else
{
if (lyrid === 0)
{
citypointFT = new FeatureTable({
"featureLayer": citypointlayer,
"map": map,
"showStatistics": false,
"zoomToSelection": false,
"syncSelection": true,
"outFields": ["NAME", "ST", renderedField, MoreDetails, MoreDetails2, MoreDetails3
],
"fieldInfos": [{
name: 'NAME',
alias: 'City',
}, {
name: 'ST',
alias: 'State',
}, {
name: renderedField,
alias: 'Column 1',
}, {
name: MoreDetails,
alias: 'More Details'
}, {
name: MoreDetails2,
alias: 'More Details 2',
}, {
name: MoreDetails3,
alias: 'More Details 3'
}
//, {
// name: 'POP2010',
// alias: '2010 Census Population'
//}
]
//,
//"gridOptions": [{
// noDataMessage: "No Data",
// allowSelectAll: false,
// columnHider: false,
// sort: {
// field: "NAME", ascending: true,
// field: "ST", ascending: true,
// }
//}]
}, gridloc);
citypointFT.startup();
}
else
{
citypolyFT = new FeatureTable({
"featureLayer": citypolygonlayer,
"map": map,
"showStatistics": false,
"zoomToSelection": false,
"syncSelection": true,
"outFields": ["NAME", "ST", renderedField, MoreDetails, MoreDetails2, MoreDetails3, "POP2010"],
"fieldInfos": [{
name: 'NAME',
alias: 'City',
}, {
name: 'ST',
alias: 'State',
}, {
name: renderedField,
alias: 'Column 1',
}, {
name: MoreDetails,
alias: 'More Details'
}, {
name: MoreDetails2,
alias: 'More Details 2',
}, {
name: MoreDetails3,
alias: 'More Details 3'
}, {
name: 'POP2010',
alias: '2010 Census Population'
}]
//,
//"gridOptions": [{
// noDataMessage: "No Data",
// allowSelectAll: false,
// columnHider: false,
// sort: {
// field: "NAME", ascending: true,
// field: "ST", ascending: true,
// }
//}]
}, gridloc);
citypolyFT.startup();
}
}
}
function showHideGridAndLegend()
{
console.log(map.getScale());
switch (true)
{
case (map.getScale() >= 36978595.474472):
$('#citypointgrid').show();
$('#citypolygongrid').hide();
break;
case (map.getScale() < 36978595.474472 && map.getScale() >= 6000000):
$('#citypointgrid').hide();
$('#citypolygongrid').show();
break;
case (map.getScale() < 6000000 && map.getScale() > 2311162.217155):
$('#citypointgrid').hide();
$('#citypolygongrid').show();
break;
case (map.getScale() <= 2311162.217155):
$('#citypointgrid').hide();
$('#citypolygongrid').hide();
break;
default:
$('#citypointgrid').hide();
$('#citypolygongrid').hide();
break;
}
}
// the functions below dynamically render the data
// the function below applies the renderer generated by the createRenderer function above to the featureLayer and adds labels.
function applyCPRenderer(citypointrenderer)
{
'use strict;'
citypointrenderer.defaultLabel = "Data unavailable";
citypointrenderer.defaultSymbol = pointSymbol;
citypointlayer.setRenderer(citypointrenderer);
citypointlayer.renderer.setOpacityInfo(0.7);
map.addLayer(citypointlayer);
}
function applyRenderer(renderer)
{
'use strict;'
renderer.defaultLabel = "Data unavailable";
renderer.defaultSymbol = polygonSymbol;
citypolygonlayer.setRenderer(renderer);
citypolygonlayer.renderer.setOpacityInfo(0.7);
map.addLayer(citypolygonlayer);
}
function createRenderer(lyr,field)
{
'use strict;'
var classDef = new ClassBreaksDefinition();
classDef.classificationField = field;
classDef.classificationMethod = "natural-breaks";
classDef.breakCount = 7;
classDef.baseSymbol = lyr === 0 ? pointSymbol : polygonSymbol;
var colorRamp = new AlgorithmicColorRamp();
colorRamp.fromColor = new Color.fromHex("#F0F9E8");
colorRamp.toColor = new Color.fromHex("#2b8cbe");
colorRamp.algorithm = "hsv";
classDef.colorRamp = colorRamp;
var params = new GenerateRendererParameters();
params.classificationDefinition = classDef;
var generateRenderer = new GenerateRendererTask(DynamicMapServiceURL + "/" + lyr);
if (lyr === 0)
{
generateRenderer.execute(params, applyCPRenderer, showErr);
}
else
{
generateRenderer.execute(params, applyRenderer, showErr);
}
}
function loadTable(){
fieldsoutputted = 'NAME,ST,' + renderedField + ',' + CI + ',' + renderedField.replace('CrudePrev', 'AdjPrev') + ',' + CI.replace('Crude95CI', 'Adj95CI') + ',POP2010';
fieldsarray = fieldsoutputted.split(",");
fl_url = DynamicMapServiceURL + "/0";
citypointlayer = new FeatureLayer(fl_url, {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: fieldsarray,
//infoTemplate: infotemp,
id: "citypointlayer"
, orderByFields: ["NAME"]
});
createRenderer(0, renderedField);
AddGrid(0, "citypointgrid");
fl_url = DynamicMapServiceURL + "/3";
citypolygonlayer = new FeatureLayer(fl_url, {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: fieldsarray,
//infoTemplate: infotemp,
id: "citypolygonlayer"
,orderByFields: ["ST"]
});
createRenderer(3, renderedField);
AddGrid(3, "citypolygongrid");
showHideGridAndLegend();
}
});
});
</script>
</head>
<body class="claro esri">
<div id="map"></div>
<div id="divGrid">
<!--<div id="citypt">-->
<!--<h3>City Point Grid</h3>-->
<div id="citypointgrid"></div>
<!--</div>
<div id="citypoly">-->
<!--<h3>City Poly Grid</h3>-->
<div id="citypolygongrid"></div>
<!--</div>-->
</div>
</body>
</html>
Christopher,
I removed the JQuery library as esri has a show hide class (and this was all you were loading that heavy library for) I also removed one legacy style line of code and changed where the on extent change handler was set. With the extent change handler setting changed I think it will take care of your issue.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Using FeatureTable</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 {
width: 100%;
height: 500px;
margin: 0;
padding: 0;
}
#divGrid {
width: 100%;
height: 200px;
margin-bottom: 20px;
}
.tableheight {
height: 300px;
}
</style>
<script>
require([
"esri/geometry/Extent",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters",
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"esri/renderers/SimpleRenderer",
"esri/renderers/ClassBreaksRenderer", "esri/tasks/GenerateRendererParameters", "esri/tasks/GenerateRendererTask",
"esri/tasks/ClassBreaksDefinition",
"esri/tasks/AlgorithmicColorRamp",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/geometry/webMercatorUtils",
"esri/map", "esri/layers/LayerDrawingOptions",
"dojo/dom-construct",
"dojo/dom",
"dojo/parser",
"dojo/on",
"dojo/_base/lang",
"dijit/registry",
"esri/tasks/query",
"esri/domUtils",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/form/TextBox",
"dojo/domReady!"
], function(Extent, ArcGISDynamicMapServiceLayer, ImageParameters,
FeatureLayer, FeatureTable, SimpleRenderer, ClassBreaksRenderer, GenerateRendererParameters, GenerateRendererTask, ClassBreaksDefinition, AlgorithmicColorRamp, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color,
webMercatorUtils, Map, LayerDrawingOptions,
domConstruct, dom, parser, on, lang,
registry, Query, domUtils, Button, ContentPane, BorderContainer, TextBox
) {
parser.parse();
var initialExtent = new Extent({
"xmin": -14901092.916080378,
"ymin": 2570827.677759068,
"xmax": -7382135.317726159,
"ymax": 7046980.0541378,
"spatialReference": {
"wkid": 102100
}
});
var map, citypointFT, citypolyFT, tractpolyFT, citypointlayer, citypolygonlayer, tractpolygonlayer, fl_url;
var fieldsoutputted, fieldsarray, renderedField = "col1",
MoreDetails = "col2";
var myFeatureLayer, renderer, DynamicMapServiceURL = "xxx";
// define the dynamic map service layer
var imageParameters = new ImageParameters();
imageParameters.format = "png";
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(DynamicMapServiceURL, {
"opacity": 1.0,
"imageParameters": imageParameters
});
map = new Map("map", {
basemap: "gray",
extent: initialExtent
});
var pointSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setSize(8).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153,
153
]));
var polygonSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_SOLID).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153, 153]));
// load the feature table and its accompanying data on map load
map.on("load", loadTable);
// the function below displays an error message and hides the div in which the map is drawn
function showErr(err) {
'use strict;'
console.log("Error Details: " + err);
}
function AddGrid(lyrid, gridloc) {
var existingGrid = dijit.byId(gridloc);
if (existingGrid) {
existingGrid.destroyRecursive(true);
}
if (lyrid === 4) {
tractpolyFT = new FeatureTable({
"featureLayer": tractpolygonlayer,
"map": map,
"showStatistics": false,
"zoomToSelection": false,
"syncSelection": true,
"outFields": ["PlaceName", "StateAbbr", "plc_tract2010", renderedField, MoreDetails, "PlcTrPop2010"],
"fieldInfos": [{
name: 'PlaceName',
alias: 'City',
}, {
name: 'StateAbbr',
alias: 'State',
}, {
name: 'plc_tract2010',
alias: 'Census Tract ID',
}, {
name: renderedField,
alias: 'Column 1',
}, {
name: MoreDetails,
alias: 'More Details',
}, {
name: 'PlcTrPop2010',
alias: '2010 Census Population'
}]
//,
//"gridOptions": [{
// noDataMessage: "No Data",
// allowSelectAll: false,
// columnHider: false,
// sort: {
// field: "PlaceName", ascending: true,
// field: "StateAbbr", ascending: true,
// field: "plc_tract2010", ascending: true
// }
//}]
}, gridloc);
tractpolyFT.startup();
} else {
if (lyrid === 0) {
citypointFT = new FeatureTable({
"featureLayer": citypointlayer,
"map": map,
"showStatistics": false,
"zoomToSelection": false,
"syncSelection": true,
"outFields": ["NAME", "ST", renderedField, MoreDetails, MoreDetails2, MoreDetails3],
"fieldInfos": [{
name: 'NAME',
alias: 'City',
}, {
name: 'ST',
alias: 'State',
}, {
name: renderedField,
alias: 'Column 1',
}, {
name: MoreDetails,
alias: 'More Details'
}, {
name: MoreDetails2,
alias: 'More Details 2',
}, {
name: MoreDetails3,
alias: 'More Details 3'
}
//, {
// name: 'POP2010',
// alias: '2010 Census Population'
//}
]
//,
//"gridOptions": [{
// noDataMessage: "No Data",
// allowSelectAll: false,
// columnHider: false,
// sort: {
// field: "NAME", ascending: true,
// field: "ST", ascending: true,
// }
//}]
}, gridloc);
citypointFT.startup();
} else {
citypolyFT = new FeatureTable({
"featureLayer": citypolygonlayer,
"map": map,
"showStatistics": false,
"zoomToSelection": false,
"syncSelection": true,
"outFields": ["NAME", "ST", renderedField, MoreDetails, MoreDetails2, MoreDetails3, "POP2010"],
"fieldInfos": [{
name: 'NAME',
alias: 'City',
}, {
name: 'ST',
alias: 'State',
}, {
name: renderedField,
alias: 'Column 1',
}, {
name: MoreDetails,
alias: 'More Details'
}, {
name: MoreDetails2,
alias: 'More Details 2',
}, {
name: MoreDetails3,
alias: 'More Details 3'
}, {
name: 'POP2010',
alias: '2010 Census Population'
}]
//,
//"gridOptions": [{
// noDataMessage: "No Data",
// allowSelectAll: false,
// columnHider: false,
// sort: {
// field: "NAME", ascending: true,
// field: "ST", ascending: true,
// }
//}]
}, gridloc);
citypolyFT.startup();
}
}
}
function showHideGridAndLegend() {
console.log(map.getScale());
switch (true) {
case (map.getScale() >= 36978595.474472):
domUtils.show(dom.byId('citypointgrid'));
domUtils.hide(dom.byId('citypolygongrid'));
break;
case (map.getScale() < 36978595.474472 && map.getScale() >= 6000000):
domUtils.hide(dom.byId('citypointgrid'));
domUtils.show(dom.byId('citypolygongrid'));
break;
case (map.getScale() < 6000000 && map.getScale() > 2311162.217155):
domUtils.hide(dom.byId('citypointgrid'));
domUtils.show(dom.byId('citypolygongrid'));
break;
case (map.getScale() <= 2311162.217155):
domUtils.hide(dom.byId('citypointgrid'));
domUtils.hide(dom.byId('citypolygongrid'));
break;
default:
domUtils.hide(dom.byId('citypointgrid'));
domUtils.hide(dom.byId('citypolygongrid'));
break;
}
}
// the functions below dynamically render the data
// the function below applies the renderer generated by the createRenderer function above to the featureLayer and adds labels.
function applyCPRenderer(citypointrenderer) {
'use strict;'
citypointrenderer.defaultLabel = "Data unavailable";
citypointrenderer.defaultSymbol = pointSymbol;
citypointlayer.setRenderer(citypointrenderer);
citypointlayer.renderer.setOpacityInfo(0.7);
map.addLayer(citypointlayer);
}
function applyRenderer(renderer) {
'use strict;'
renderer.defaultLabel = "Data unavailable";
renderer.defaultSymbol = polygonSymbol;
citypolygonlayer.setRenderer(renderer);
citypolygonlayer.renderer.setOpacityInfo(0.7);
map.addLayer(citypolygonlayer);
}
function createRenderer(lyr, field) {
'use strict;'
var classDef = new ClassBreaksDefinition();
classDef.classificationField = field;
classDef.classificationMethod = "natural-breaks";
classDef.breakCount = 7;
classDef.baseSymbol = lyr === 0 ? pointSymbol : polygonSymbol;
var colorRamp = new AlgorithmicColorRamp();
colorRamp.fromColor = new Color.fromHex("#F0F9E8");
colorRamp.toColor = new Color.fromHex("#2b8cbe");
colorRamp.algorithm = "hsv";
classDef.colorRamp = colorRamp;
var params = new GenerateRendererParameters();
params.classificationDefinition = classDef;
var generateRenderer = new GenerateRendererTask(DynamicMapServiceURL + "/" + lyr);
if (lyr === 0) {
generateRenderer.execute(params, applyCPRenderer, showErr);
} else {
generateRenderer.execute(params, applyRenderer, showErr);
}
}
function loadTable() {
fieldsoutputted = 'NAME,ST,' + renderedField + ',' + CI + ',' + renderedField.replace('CrudePrev', 'AdjPrev') + ',' + CI.replace('Crude95CI', 'Adj95CI') + ',POP2010';
fieldsarray = fieldsoutputted.split(",");
fl_url = DynamicMapServiceURL + "/0";
citypointlayer = new FeatureLayer(fl_url, {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: fieldsarray,
//infoTemplate: infotemp,
id: "citypointlayer",
orderByFields: ["NAME"]
});
createRenderer(0, renderedField);
AddGrid(0, "citypointgrid");
fl_url = DynamicMapServiceURL + "/3";
citypolygonlayer = new FeatureLayer(fl_url, {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: fieldsarray,
//infoTemplate: infotemp,
id: "citypolygonlayer",
orderByFields: ["ST"]
});
createRenderer(3, renderedField);
AddGrid(3, "citypolygongrid");
// show/hide table, based on scale
map.on("extent-change", showHideGridAndLegend);
showHideGridAndLegend();
}
});
</script>
</head>
<body class="claro esri">
<div id="map"></div>
<div id="divGrid">
<!--<div id="citypt">-->
<!--<h3>City Point Grid</h3>-->
<div id="citypointgrid"></div>
<!--</div>
<div id="citypoly">-->
<!--<h3>City Poly Grid</h3>-->
<div id="citypolygongrid"></div>
<!--</div>-->
</div>
</body>
</html>
Robert, as always, thanks for the response. Unfortunately, I am still seeing the same behavior. The column headers on citypolyFT do not appear when the table appears.
Thanks...Chris
Chris,
Strange. I would have to do some work changing your field names and url to be able to test your exact code. Have you tried to use citypolyFT.refresh()?
Hi, Robert. Yes, I have tried that.
Thanks...Chris