I have problems with the FeatureTable widget with featureLayer, does not zoom to select feature and full extents the error that indicates is TypeError: Cannot read property 'targetGeometry' of null
Javascript ver. 4.19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#viewDiv {
height: 50%;
width: 100%;
}
#zoom {
margin-bottom: 5px;
}
#actions {
padding: 5px;
}
.container {
height: 50%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/core/watchUtils",
"esri/layers/FeatureLayer",
"esri/widgets/FeatureTable"
], function(Map, MapView, watchUtils, FeatureLayer, FeatureTable) {
const features = [];
const featureLayer = new FeatureLayer({
layerId: 15,
title: "incidentes viales 2019"
});
const map = new Map({
basemap: "streets-night-vector",
layers: [featureLayer]
});
let view = new MapView({
container: "viewDiv",
map: map,
zoom: 13,
center: [-106.4, 31.645],
constraints: {
minScale: 400000
},
popup: {
autoOpenEnabled: false
}
});
view.when(() => {
const featureLayer = map.layers.getItemAt(0);
featureLayer.title = "Ganador Elecciones 2019";
const featureTable = new FeatureTable({
view: view,
layer: featureLayer,
fieldConfigs: [{
name: "PUNTOS_ID",
label: "Identificador",
direction: "asc"
}, {
name: "NOMBRE1",
label: "Calle 1"
}, {
name: "NOMBRE2",
label: "Calle 2"
}, {
name: "DISTRITO",
label: "Distrito SSPM"
}, {
name: "EXPEDIENTE",
label: "No. de Expediente"
}, {
name: "ACCI2019",
label: "Total de Eventos"
}, {
name: "SECTOR",
label: "No. de Sector"
}],
container: document.getElementById("tableDiv")
});
view.ui.add(document.getElementById("actions"), "top-right")
featureLayer.watch("loaded", () => {
watchUtils.whenFalse(view, "updating", () => {
if (view.extent) {
featureTable.filterGeometry = view.extent;
}
});
});
featureTable.on("selection-change", (changes) => {
changes.removed.forEach((item) => {
const data = features.find((data) => {
return data.feature === item.feature;
});
if (data) {
features.splice(features.indexOf(data), 1);
}
});
changes.added.forEach((item) => {
const feature = item.feature;
features.push({
feature: feature
});
});
});
view.on("immediate-click", (event) => {
view.hitTest(event).then((response) => {
const candidate = response.results.find((result) => {
return result.graphic && result.graphic.layer && result.graphic.layer === featureLayer;
});
candidate && featureTable.selectRows(candidate.graphic);
});
});
const zoomBtn = document.getElementById("zoom");
const fullExtentBtn = document.getElementById("fullextent");
zoomBtn.addEventListener("click", zoomToSelectedFeature);
fullExtentBtn.addEventListener("click", fullExtent);
function zoomToSelectedFeature() {
const query = featureLayer.createQuery();
const featureIds = features.map((result) => {
return result.feature.getAttribute(featureLayer.objectIdField);
});
query.objectIds = featureIds;
query.returnGeometry = true;
featureLayer.queryFeatures(query).then((results) => {
view.goTo(results.features)
.catch((error) => {
if (error.name != "AbortError") {
console.error(error);
}
});
});
}
function fullExtent() {
view.goTo(featureLayer.fullExtent)
.catch((error) => {
if (error.name != "AbortError") {
console.error(error);
}
});
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="container">
<div id="tableDiv"></div>
</div>
<div id="actions" class="esri-widget">
<button class="esri-button" id="zoom">Zoom to selected feature(s)</button>
<button class="esri-button" id="fullextent">Full extent</button>
</div>
</body>
</html>
