Hi guys
I am trying to select polygon features using sketchViewModel, using this sample code.
I removed CSV layer with FeatureLayer.
But now, when i select features, in table i see only OBJECTID, it applies column headers for other fields, but without data.
see Pic. for error and Code below.
Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Highlight features by geometry - 4.14</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.14/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#info,
#gridDisplay {
position: absolute;
bottom: 0;
left: 0;
height: 35%;
background-color: white;
border-color: grey;
width: 100%;
font-size: 14px;
}
#gridDisplay {
z-index: 80;
}
#info {
z-index: 90;
font-size: 16px;
padding-left: 20px;
}
#info * {
padding-right: 20px;
}
.info {
line-height: 20px;
padding-left: 5px !important;
}
.dgrid-header,
.dgrid-header-row {
background-color: #eee;
color: #57585a;
}
.dgrid-row-even {
background-color: #f7f8f8;
}
.dgrid-row-odd {
background-color: #efefef;
}
.dgrid-selected {
background: #b4daf5;
}
.dgrid-row {
border: none;
}
</style>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/widgets/FeatureForm",
"dgrid/OnDemandGrid",
"dgrid/extensions/ColumnHider",
"dojo/store/Memory",
"dstore/legacy/StoreAdapter",
"dgrid/Selection"
], function(
WebMap,
MapView,
FeatureLayer,
GraphicsLayer,
SketchViewModel,
Graphic,
Legend,
Expand,
FeatureForm,
OnDemandGrid,
ColumnHider,
Memory,
StoreAdapter,
Selection
) {
let map,
view,
flLayer,
csvLayerView,
polygonGraphicsLayer,
sketchViewModel,
highlight,
grid;
const gridDiv = document.getElementById("grid");
const infoDiv = document.getElementById("info");
setupTheView();
setUpSketchViewModel();
sketchViewModel.on("create", function(event) {
if (event.state === "complete") {
polygonGraphicsLayer.remove(event.graphic);
selectFeatures(event.graphic.geometry);
}
});
const gridFields = [
"OBJECTID",
"Req_Code",
"abonentebis_raodenoba",
"dasaxeleba",
"Semqmneli",
"statusi"
];
const dataStore = new StoreAdapter({
objectStore: new Memory({
idProperty: "OBJECTID"
})
});
csvLayer
.when(function() {
createGrid(csvLayer.fields);
view.whenLayerView(csvLayer).then(function(layerView) {
csvLayerView = layerView;
});
})
.catch(errorCallback);
function selectFeatures(geometry) {
view.graphics.removeAll();
if (csvLayerView) {
const query = {
geometry: geometry,
outFields: ["*"]
};
csvLayerView
.queryFeatures(query)
.then(function(results) {
const graphics = results.features;
if (graphics.length > 0) {
view.goTo(geometry.extent.expand(2));
gridDiv.style.zIndex = 90;
infoDiv.style.zIndex = 80;
document.getElementById("featureCount").innerHTML =
"<b>Showing attributes for " +
graphics.length.toString() +
" features </b>";
} else {
gridDiv.style.zIndex = 80;
infoDiv.style.zIndex = 90;
}
if (highlight) {
highlight.remove();
}
highlight = csvLayerView.highlight(graphics);
const data = graphics.map(function(feature, i) {
return (
Object.keys(feature.attributes)
.filter(function(key) {
return gridFields.indexOf(key) !== -1;
})
.reduce(function(obj, key) {
obj[key] = feature.attributes[key];
return obj;
}, {})
);
});
dataStore.objectStore.data = data;
grid.set("collection", dataStore);
})
.catch(errorCallback);
}
}
function selectFeatureFromGrid(event) {
view.popup.close();
const row = event.rows[0];
const id = row.data.OBJECTID;
const query = {
objectIds: [parseInt(id)],
outFields: ["*"],
returnGeometry: true
};
csvLayerView
.queryFeatures(query)
.then(function(results) {
const graphics = results.features;
view.graphics.removeAll();
const selectedGraphic = new Graphic({
geometry: graphics[0].geometry,
symbol: {
type: "simple-fill",
color: "yellow",
style: "solid",
outline: {
color: "red",
width: 1
}
}
});
view.graphics.add(selectedGraphic);
})
.catch(errorCallback);
}
function createGrid(fields) {
var columns = fields
.filter(function(field, i) {
if (gridFields.indexOf(field.name) !== -1) {
return field;
}
})
.map(function(field) {
if (field.name === "__OBJECTID") {
return {
field: field.name,
label: field.name,
sortable: true,
hidden: true
};
} else {
return {
field: field.name,
label: field.alias,
sortable: true
};
}
});
grid = new (OnDemandGrid.createSubclass([Selection, ColumnHider]))(
{
columns: columns
},
"grid"
);
grid.on("dgrid-select", selectFeatureFromGrid);
}
function setUpSketchViewModel() {
polygonGraphicsLayer = new GraphicsLayer();
map.add(polygonGraphicsLayer);
view.ui.add("select-by-polygon", "top-left");
const selectButton = document.getElementById("select-by-polygon");
selectButton.addEventListener("click", function() {
clearUpSelection();
view.popup.close();
sketchViewModel.create("polygon");
});
sketchViewModel = new SketchViewModel({
view: view,
layer: polygonGraphicsLayer,
pointSymbol: {
type: "simple-fill",
color: "yellow",
style: "solid",
outline: {
color: "red",
width: 1
}
}
});
}
function clearUpSelection() {
view.graphics.removeAll();
grid.clearSelection();
}
function setupTheView() {
const url =
"http://1ocalhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0";
csvLayer = new FeatureLayer({
title: "Hurricanes",
url: url,
copyright: "GWP",
});
map = new WebMap({
portalItem: {
id: "7d127cef99a44327b79f5185602b8b6b"
},
layers: [csvLayer]
});
view = new MapView({
container: "viewDiv",
map: map,
highlightOptions: {
color: "#2B65EC",
fillOpacity: 0.4
},
padding: {
bottom: infoDiv.clientHeight
}
});
const legendExpand = new Expand({
view: view,
content: new Legend({
view: view,
style: "card"
})
});
view.ui.add(legendExpand, "top-left");
view.popup.watch("visible", function(newValue) {
if (newValue) {
clearUpSelection();
}
});
}
function errorCallback(error) {
console.log("error:", error);
}
});
</script>
</head>
<body>
<div id="viewDiv">
<div
id="select-by-polygon"
class="esri-widget esri-widget--button esri-widget esri-interactive"
title="Select features by polygon"
>
<span class="esri-icon-checkbox-unchecked"></span>
</div>
<div id="info" class="esri-widget">
<span class="info"> <b>Instructions</b> </span> <br />
<ul>
<li>
Select features using select by polygon tool. Attributes of selected
features will be displayed here.
</li>
<br />
<li>
Click on a row to select a feature associated with it or click on a
feature to display its popup.
</li>
</ul>
</div>
<div id="gridDisplay">
<span class="info" id="featureCount"></span>
<div id="grid"></div>
</div>
</div>
</body>
</html>