Accepted Solutions
@ken Buja thanks for reply this example is use csvLayerView but i am using FeatureLayer. so anyone know how to implemented with FeatureLayer. and also when i use my FeatureLayer url that it show me error message
query failed:
{…}details: undefinedmessage: "Invalid query"name: "esri.layers.graphics.QueryEngine"AND when i usefeatureLayerView.queryFeatures(query).then(function(graphics)Error ismessage: "Unsupported polygon intersection"name: "feature-store:unsupported-query"AND when i usefeatureLayer.queryFeatures(query).then(function(graphics)Error isTypeError: graphics.map is not a function Stack trace:
<!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.7</title><script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
};
</script><link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></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-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
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/Map",
"esri/WebMap",
"esri/views/MapView",
"esri/layers/CSVLayer",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/config",
"esri/widgets/Legend",
"esri/widgets/Expand",
"dgrid/OnDemandGrid",
"dgrid/extensions/ColumnHider",
"dojo/store/Memory",
"dstore/legacy/StoreAdapter",
"dgrid/Selection",
"dojo/_base/declare",
"dojo/domReady!"
],
function(
Map,
WebMap, MapView, CSVLayer, FeatureLayer,GraphicsLayer,
SketchViewModel, Graphic, esriConfig, Legend, Expand,
OnDemandGrid, ColumnHider, Memory, StoreAdapter, Selection, declare
) {let map, view, csvLayer, csvLayerView,
sketchViewModel, highlight, grid,featureLayer,featureLayerView,graphics;
const gridDiv = document.getElementById("grid");
const infoDiv = document.getElementById("info");// create new map, view and csvlayer
// setupTheView();
const popupTemplate = { // autocasts as new PopupTemplate()
title: "Marriage in NY, Zip Code: {ZIP}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "MARRIEDRATE",
label: "% Married",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "MARRIED_CY",
label: "Total Married",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "NEVMARR_CY",
label: "Never Married",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "DIVORCD_CY",
label: "Total Divorced",
format: {
places: 0,
digitSeparator: true
}
}]
}]
};
// Create the FeatureLayer using the popupTemplate
featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
outFields: ["*"],
popupTemplate: popupTemplate
});
//bhumin code start
map = new Map({
basemap: "dark-gray",
layers: [featureLayer]
});view = new MapView({
container: "viewDiv",
map: map,
zoom:13,
center: [-73.950, 40.702],
highlightOptions: {
color: "#2B65EC",
fillOpacity: 0.4
},
padding: {
bottom: infoDiv.clientHeight // Same value as the #infoDiv height in CSS
}
});
// Create the PopupTemplate
//bhumin code end
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();
}
});// create a new sketchviewmodel, setup it properties
// set up the click event for the select by polygon button
setUpSketchViewModel();
sketchViewModel.on("draw-complete", function(evt) {
console.log('drow cmplt');
// this polygon will be used to query features that intersect it
selectFeatures(evt.geometry);
});const gridFields = ["ZIP", "MARRIEDRATE", "MARRIED_CY"
];// create a new datastore for the on demandgrid
// will be used to display attributes of selected features
const dataStore = new StoreAdapter({
objectStore: new Memory({
idProperty: "ZIP"
})
});// create a grid with given columns once the csvlayer is loaded
featureLayer.when(function() {
// create a grid with columns specified in gridFields variable
createGrid(featureLayer.fields);// get a reference the csvlayerview when it is ready. It will used to do
// client side queries when user draws polygon to select features
view.whenLayerView(featureLayer).then(function(layerView) {
featureLayerView = layerView;
});
})
.catch(errorCallback);/****************************************************
* Selects features from the csv layer that intersect
* a polygon that user drew using sketch view model
****************************************************/
function selectFeatures(geometry) {
console.log('ftgm',geometry);
view.graphics.removeAll();
if (featureLayerView) {// create a query and set its geometry parameter to the
// polygon that was drawn on the view
var query = {
geometry: geometry,
outFields: ["*"]
};
console.log('query',query);
// query graphics from the csv layer view. Geometry set for the query
// can be polygon for point features and only intersecting geometries are returned
featureLayer.queryFeatures(query).then(function(graphics) {
// if the grid div is displayed while query results does not
// return graphics then hide the grid div and show the instructions div
if (graphics.length > 0) {
// zoom to the extent of the polygon with factor 2
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;
}// remove existing highlighted features
if (highlight) {
highlight.remove();
}// highlight query results
highlight = featureLayerView.highlight(graphics);
console.log('highlight',highlight);
// get the attributes to display in the grid
var data = graphics.map(function(feature, i) {
return Object.keys(feature.attributes)
.filter(function(key) {
// get fields that exist in the grid
return (gridFields.indexOf(key) !== -1);
})
// need to create key value pairs from the feature
// attributes so that info can be displayed in the grid
.reduce((obj, key) => {
obj[key] = feature.attributes[key];
return obj;
}, {});
});// set the datastore for the grid using the
// attributes we got for the query results
dataStore.objectStore.data = data;
grid.set("collection", dataStore);
})
.catch(errorCallback);
}
}/************************************************
* fires when user clicks a row in the grid
* get the corresponding graphic and select it
*************************************************/
function selectFeatureFromGrid(event) {
// close view popup if it is open
view.popup.close();
// get the ObjectID value from the clicked row
var row = event.rows[0]
var id = row.data.__OBJECTID;// setup a query by specifying objectIds
var query = {
objectIds: [parseInt(id)],
outFields: ["*"],
returnGeometry: true
};// query the csvLayerView using the query set above
featureLayerView.queryFeatures(query).then(function(graphics) {
// remove all graphics to make sure no selected graphics
view.graphics.removeAll();// create a new selected graphic
var selectedGraphic = new Graphic({
geometry: graphics[0].geometry,
symbol: {
type: "simple-marker",
style: "circle",
color: "orange",
size: "12px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 2 // points
}
}
});// add the selected graphic to the view
// this graphic corresponds to the row that was clicked
view.graphics.add(selectedGraphic);
})
.catch(errorCallback);
}/************************************************
* Creates a new grid. Loops through poverty
* csvLayer's fields and creates grid columns
* Grid with selection and columnhider extensions
*************************************************/
function createGrid(fields) {
var columns = fields.filter(function(field, i) {
if (gridFields.indexOf(field.name) !== -1) {
return field;
}
}).map(function(field) {
if (field.name === "ZIP") {
return {
field: field.name,
label: field.name,
sortable: true,
hidden: true
};
} else {
return {
field: field.name,
label: field.alias,
sortable: true
};
}
});// create a new onDemandGrid with its selection and columnhider
// extensions. Set the columns of the grid to display attributes
// the hurricanes cvslayer
grid = new(declare([OnDemandGrid, Selection, ColumnHider]))({
columns: columns
}, "grid");// add a row-click listener on the grid. This will be used
// to highlight the corresponding feature on the view
grid.on('dgrid-select', selectFeatureFromGrid);
}/************************************************************************
* Sets up the sketchViewModel. When user clicks on the select by polygon
* button sketchViewModel.create() method is called with polygon param.
************************************************************************/
function setUpSketchViewModel() {// polygonGraphicsLayer will be used by the sketchviewmodel
// show the polygon being drawn on the view
var polygonGraphicsLayer = new GraphicsLayer();
map.add(polygonGraphicsLayer);// add the select by polygon button the view
view.ui.add("select-by-polygon", "top-left");
var selectButton = document.getElementById("select-by-polygon");// click event for the button
selectButton.addEventListener("click", function() {
clearUpSelection();
view.popup.close();
// ready to draw a polygon
sketchViewModel.create("polygon");
});// create a new sketch view model set its layer
sketchViewModel = new SketchViewModel({
view: view,
layer: polygonGraphicsLayer,
pointSymbol: {
type: "simple-marker",
color: [255, 255, 255, 0],
size: "1px",
outline: {
color: "gray",
width: 0
}
}
});
}function clearUpSelection() {
view.graphics.removeAll();
grid.clearSelection();
}
/******************************************************
* Sets up the view. WebMap with winkel III projection
* basemap and hurricanes CsvLayer is added to the view.
******************************************************/
function setupTheView() {
}/*********************************************************
* Used to create uniques values for the csvlayer renderer
*********************************************************/
function errorCallback(error) {
console.log("error:", error)
}
});
</script>
</head><body>
<div id="viewDiv">
<div id="select-by-polygon" class="esri-widget-button esri-widget esri-interactive"
title="Select features by polygon">
<span class="esri-icon-checkbox-unchecked"></span>
</div>
<div id="info">
<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>
@ken Buja thanks for reply this example is use csvLayerView but i am using FeatureLayer. so anyone know how to implemented with FeatureLayer. and also when i use my FeatureLayer url that it show me error message
query failed:
{…}details: undefinedmessage: "Invalid query"name: "esri.layers.graphics.QueryEngine"AND when i usefeatureLayerView.queryFeatures(query).then(function(graphics)Error ismessage: "Unsupported polygon intersection"name: "feature-store:unsupported-query"AND when i usefeatureLayer.queryFeatures(query).then(function(graphics)Error isTypeError: graphics.map is not a function Stack trace:
<!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.7</title><script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
};
</script><link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></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-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
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/Map",
"esri/WebMap",
"esri/views/MapView",
"esri/layers/CSVLayer",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/config",
"esri/widgets/Legend",
"esri/widgets/Expand",
"dgrid/OnDemandGrid",
"dgrid/extensions/ColumnHider",
"dojo/store/Memory",
"dstore/legacy/StoreAdapter",
"dgrid/Selection",
"dojo/_base/declare",
"dojo/domReady!"
],
function(
Map,
WebMap, MapView, CSVLayer, FeatureLayer,GraphicsLayer,
SketchViewModel, Graphic, esriConfig, Legend, Expand,
OnDemandGrid, ColumnHider, Memory, StoreAdapter, Selection, declare
) {let map, view, csvLayer, csvLayerView,
sketchViewModel, highlight, grid,featureLayer,featureLayerView,graphics;
const gridDiv = document.getElementById("grid");
const infoDiv = document.getElementById("info");// create new map, view and csvlayer
// setupTheView();
const popupTemplate = { // autocasts as new PopupTemplate()
title: "Marriage in NY, Zip Code: {ZIP}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "MARRIEDRATE",
label: "% Married",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "MARRIED_CY",
label: "Total Married",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "NEVMARR_CY",
label: "Never Married",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "DIVORCD_CY",
label: "Total Divorced",
format: {
places: 0,
digitSeparator: true
}
}]
}]
};
// Create the FeatureLayer using the popupTemplate
featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
outFields: ["*"],
popupTemplate: popupTemplate
});
//bhumin code start
map = new Map({
basemap: "dark-gray",
layers: [featureLayer]
});view = new MapView({
container: "viewDiv",
map: map,
zoom:13,
center: [-73.950, 40.702],
highlightOptions: {
color: "#2B65EC",
fillOpacity: 0.4
},
padding: {
bottom: infoDiv.clientHeight // Same value as the #infoDiv height in CSS
}
});
// Create the PopupTemplate
//bhumin code end
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();
}
});// create a new sketchviewmodel, setup it properties
// set up the click event for the select by polygon button
setUpSketchViewModel();
sketchViewModel.on("draw-complete", function(evt) {
console.log('drow cmplt');
// this polygon will be used to query features that intersect it
selectFeatures(evt.geometry);
});const gridFields = ["ZIP", "MARRIEDRATE", "MARRIED_CY"
];// create a new datastore for the on demandgrid
// will be used to display attributes of selected features
const dataStore = new StoreAdapter({
objectStore: new Memory({
idProperty: "ZIP"
})
});// create a grid with given columns once the csvlayer is loaded
featureLayer.when(function() {
// create a grid with columns specified in gridFields variable
createGrid(featureLayer.fields);// get a reference the csvlayerview when it is ready. It will used to do
// client side queries when user draws polygon to select features
view.whenLayerView(featureLayer).then(function(layerView) {
featureLayerView = layerView;
});
})
.catch(errorCallback);/****************************************************
* Selects features from the csv layer that intersect
* a polygon that user drew using sketch view model
****************************************************/
function selectFeatures(geometry) {
console.log('ftgm',geometry);
view.graphics.removeAll();
if (featureLayerView) {// create a query and set its geometry parameter to the
// polygon that was drawn on the view
var query = {
geometry: geometry,
outFields: ["*"]
};
console.log('query',query);
// query graphics from the csv layer view. Geometry set for the query
// can be polygon for point features and only intersecting geometries are returned
featureLayer.queryFeatures(query).then(function(graphics) {
// if the grid div is displayed while query results does not
// return graphics then hide the grid div and show the instructions div
if (graphics.length > 0) {
// zoom to the extent of the polygon with factor 2
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;
}// remove existing highlighted features
if (highlight) {
highlight.remove();
}// highlight query results
highlight = featureLayerView.highlight(graphics);
console.log('highlight',highlight);
// get the attributes to display in the grid
var data = graphics.map(function(feature, i) {
return Object.keys(feature.attributes)
.filter(function(key) {
// get fields that exist in the grid
return (gridFields.indexOf(key) !== -1);
})
// need to create key value pairs from the feature
// attributes so that info can be displayed in the grid
.reduce((obj, key) => {
obj[key] = feature.attributes[key];
return obj;
}, {});
});// set the datastore for the grid using the
// attributes we got for the query results
dataStore.objectStore.data = data;
grid.set("collection", dataStore);
})
.catch(errorCallback);
}
}/************************************************
* fires when user clicks a row in the grid
* get the corresponding graphic and select it
*************************************************/
function selectFeatureFromGrid(event) {
// close view popup if it is open
view.popup.close();
// get the ObjectID value from the clicked row
var row = event.rows[0]
var id = row.data.__OBJECTID;// setup a query by specifying objectIds
var query = {
objectIds: [parseInt(id)],
outFields: ["*"],
returnGeometry: true
};// query the csvLayerView using the query set above
featureLayerView.queryFeatures(query).then(function(graphics) {
// remove all graphics to make sure no selected graphics
view.graphics.removeAll();// create a new selected graphic
var selectedGraphic = new Graphic({
geometry: graphics[0].geometry,
symbol: {
type: "simple-marker",
style: "circle",
color: "orange",
size: "12px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 2 // points
}
}
});// add the selected graphic to the view
// this graphic corresponds to the row that was clicked
view.graphics.add(selectedGraphic);
})
.catch(errorCallback);
}/************************************************
* Creates a new grid. Loops through poverty
* csvLayer's fields and creates grid columns
* Grid with selection and columnhider extensions
*************************************************/
function createGrid(fields) {
var columns = fields.filter(function(field, i) {
if (gridFields.indexOf(field.name) !== -1) {
return field;
}
}).map(function(field) {
if (field.name === "ZIP") {
return {
field: field.name,
label: field.name,
sortable: true,
hidden: true
};
} else {
return {
field: field.name,
label: field.alias,
sortable: true
};
}
});// create a new onDemandGrid with its selection and columnhider
// extensions. Set the columns of the grid to display attributes
// the hurricanes cvslayer
grid = new(declare([OnDemandGrid, Selection, ColumnHider]))({
columns: columns
}, "grid");// add a row-click listener on the grid. This will be used
// to highlight the corresponding feature on the view
grid.on('dgrid-select', selectFeatureFromGrid);
}/************************************************************************
* Sets up the sketchViewModel. When user clicks on the select by polygon
* button sketchViewModel.create() method is called with polygon param.
************************************************************************/
function setUpSketchViewModel() {// polygonGraphicsLayer will be used by the sketchviewmodel
// show the polygon being drawn on the view
var polygonGraphicsLayer = new GraphicsLayer();
map.add(polygonGraphicsLayer);// add the select by polygon button the view
view.ui.add("select-by-polygon", "top-left");
var selectButton = document.getElementById("select-by-polygon");// click event for the button
selectButton.addEventListener("click", function() {
clearUpSelection();
view.popup.close();
// ready to draw a polygon
sketchViewModel.create("polygon");
});// create a new sketch view model set its layer
sketchViewModel = new SketchViewModel({
view: view,
layer: polygonGraphicsLayer,
pointSymbol: {
type: "simple-marker",
color: [255, 255, 255, 0],
size: "1px",
outline: {
color: "gray",
width: 0
}
}
});
}function clearUpSelection() {
view.graphics.removeAll();
grid.clearSelection();
}
/******************************************************
* Sets up the view. WebMap with winkel III projection
* basemap and hurricanes CsvLayer is added to the view.
******************************************************/
function setupTheView() {
}/*********************************************************
* Used to create uniques values for the csvlayer renderer
*********************************************************/
function errorCallback(error) {
console.log("error:", error)
}
});
</script>
</head><body>
<div id="viewDiv">
<div id="select-by-polygon" class="esri-widget-button esri-widget esri-interactive"
title="Select features by polygon">
<span class="esri-icon-checkbox-unchecked"></span>
</div>
<div id="info">
<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>
