Hello all, I came across an issue when I recently upgrade to v4.22 from v4.12 .
In v4.12 when I click on a point I was able to console.log out the information/attributes of all the fields. But since upgrade to v4.22, the console.log only output 1 field and that is the ID field, other fields did not get printed out. Not sure what have changed in the API that causes my problem, thanks in advance for any help.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Graphic HitTest</title>
<style>
#mapViewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/css/main.css">
<script src="https://js.arcgis.com/4.22/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/geometry/Point"
], function(Map, MapView, Graphic, GraphicsLayer, FeatureLayer, Point) {
let graphicArray = [];
let featureLayer;
let simpleRenderer = {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: [226, 119, 240],
outline: {
color: [0, 0, 0],
width: 1
}
}
};
let map = new Map({
basemap: "gray-vector"
});
let view = new MapView({
container: "mapViewDiv",
map: map,
center: [-90.674, 36.729],
zoom: 10
});
let ptData = [{"id":0,"lat": "36.7239","long":"-90.67514"},
{"id":1,"lat": "36.72839","long":"-90.6764"},
{"id":2,"lat": "36.74339","long":"-90.6674"},
{"id":3,"lat": "36.79336","long":"-90.62574"},
{"id":4,"lat": "36.72739","long":"-90.674"},
{"id":5,"lat": "36.78639","long":"-90.6654"},
{"id":6,"lat": "36.72366","long":"-90.6734"},
{"id":7,"lat": "36.76369","long":"-90.6644"},
{"id":8,"lat": "36.7276","long":"-90.6784"},
{"id":9,"lat": "36.7238","long":"-90.6714"},
{"id":10,"lat": "36.7233","long":"-90.6574"}];
view.when().then(function(){
for(let i = 0; i< ptData.length; i++){
let point = {
type: "point",
longitude: ptData[i].long,
latitude: ptData[i].lat
};
let pointGraphic = new Graphic({
geometry: point,
attributes: {
"id": ptData[i].id,
"latCoord": ptData[i].lat,
"longCoord": ptData[i].long,
},
symbol: simpleRenderer.symbol
});
graphicArray.push(pointGraphic);
}
featureLayer = new FeatureLayer({
fields: [{name: "id",alias: "id",type: "oid"},
{name: "latCoord",alias: "latCoord",type: "string"},
{name: "longCoord",alias: "longCoord",type: "string"}],
objectIdField: "id",
geometryType: "point",
spatialReference: { wkid: 4326 },
source: graphicArray,
renderer: simpleRenderer
});
map.add(featureLayer);
});
view.on("click", function (event) {
view.hitTest(event).then(function (response) {
if (response.results.length) {
let graphic = response.results.filter(function (result) {
return result.graphic.layer === featureLayer;
})[0].graphic;
console.log("Output ",graphic.attributes);
}
});
});
});
</script>
</head>
<body>
<div id="mapViewDiv"></div>
</body>
</html>
