Error de widget FeatureTable

vmvargas — Fri, 23 Apr 2021 20:18:42 GMT

Hello everyone,

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

Thank you

<!DOCTYPE html>

<head>

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

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

url: "https://sigimip.org.mx:6443/arcgis/rest/services/vialidad/FeatureServer",

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: [{

label: "Identificador",

direction: "asc"

}, {

label: "Calle 1"

}, {

label: "Calle 2"

}, {

label: "Distrito SSPM"

}, {

label: "No. de Expediente"

}, {

label: "Total de Eventos"

}, {

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>

<button class="esri-button" id="zoom">Zoom to selected feature(s)</button>

<button class="esri-button" id="fullextent">Full extent</button>

</div>

</body>

</html>

Re: Error de widget FeatureTable

Anonymous User — Fri, 23 Apr 2021 20:58:47 GMT

Hello,

I noticed the Spatial Reference of the layer has a wkid of 32613. The basemap you are using is "streets-night-vector" which has a wkid of 102100 (Web Mercator). If you comment out the basemap line of code in the Map constructor and refresh the app, you will notice the layer loads without a basemap, and if you select a record in the FeatureTable, you will now be able to highlight the feature and zoom to the selected feature. Can you verify this? This appears to be an issue caused by the spatial reference of the layer being distinct from the basemap's.

Re: Error de widget FeatureTable

UndralBatsukh — Fri, 23 Apr 2021 22:00:44 GMT

Hi there,

What Jose said is correct. The reason you are not able to zoom into selected features and full extent is because the feature layer has a different spatial reference than the view's spatial reference. To solve this issue a few things need to be done in your app.

In order to zoom to the selected features, please set the query.outSpatialReference to match the spatialReference of the view so that the returned results can be located on the map. See below:

query.objectIds = featureIds; query.returnGeometry = true; query.outSpatialReference = view.spatialReference;

As for the fullExtent of the FeatureLayer, I'd suggest that you pass in a predefined extent that matches the view's spatialReference. If that is not an option then you can use the projection module's project method to project the fullExtent of your layer to match the spatialReference of the view. But loading projection module for this case only maybe an overkill.

projection.load().then(function () { projectedFullExtent = projection.project( featureLayer.fullExtent, view.spatialReference ); });

Forgot to mention this initially... You have to reproject the fullExtent of your layer to match the spatial reference of the view because View.goTo does not project the geometries on the fly. We have an enhancement request for this. But for now, you have to project your geometry to match the spatial reference of the view before calling goTo.

Here is an updated simple test app that shows how to zoom to fullExtent and selected features.

Hope this helps,

-Undral

Re: Error de widget FeatureTable

vmvargas — Sat, 24 Apr 2021 02:59:51 GMT

Thank you UndralBatsukh, JoseBanuelos1and UndralBatsukh for taking the time to resolve my error

topic Re: Error de widget FeatureTable in ArcGIS JavaScript Maps SDK Questions

Error de widget FeatureTable

Re: Error de widget FeatureTable

Re: Error de widget FeatureTable

Re: Error de widget FeatureTable