Hi Guys,
I am new in Java Scrip and got some problems to resolve! I have written code using SQL Query and now i want to display Query result on a map, i have tried a lot but no result, i get fields and XY in response payload, but could not display on a map.
Here is my code and help me please.
Tanks in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My Test Map for SQL Query </title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/geometry/geometryEngine",
"esri/layers/GraphicsLayer",
"esri/Graphic"
],
function(Map,
MapView,
FeatureLayer,
QueryTask,
Query,
geometryEngine,
GraphicsLayer,
Graphic
) {
var HeadWork = "http://localhost:6080/arcgis/rest/services/Melioracia_Geo_201801251705/MapServer/0";
var featurelayerHW = new FeatureLayer({
url: HeadWork,
outFields: ["*"],
visible: false
});
// Create graphics layer and symbol to use for displaying the results of query
var resultsLayer = new GraphicsLayer();
var map = new Map({
basemap: "dark-gray",
layers:[resultsLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
extent: { // Extent Chemi rukistvis()
xmin: 5278000,
ymin: 5147000,
xmax: 4377000,
ymax: 5247784,
spatialReference: 102100
}
});
var queryTask = new QueryTask({
url: HeadWork
});
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.where = "Irrigation_System LIKE 'Dus Ru I.S.'"; //Returns features and graphics that satisfy the query.
queryTask.execute(query).then(function(results){ console.log(results.features);
});
// view and print the number of results to the DOM
function displayResults(results) {
resultsLayer.removeAll();
var features = results.features.map(function (graphic) {
graphic.symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "diamond",
size: 6.5,
color: "darkorange"
};
return graphic;
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Solved! Go to Solution.
Vakhtang,
You never add the features to your graphicslayer in your code.
// view and print the number of results to the DOM
function displayResults(results) {
resultsLayer.removeAll();
var features = results.features.map(function(graphic) {
graphic.symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "diamond",
size: 6.5,
color: "darkorange"
};
return graphic;
});
resultsLayer.addMany(features); //This is what you are missing
}
Vakhtang,
Some issues I see in your code (lines 5 and 9 need to be added):
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.where = "Irrigation_System LIKE 'Dus Ru I.S.'"; //Returns features and graphics that satisfy the query.
query.outSpatialReference = view.spatialReference; //you should set the outSpatialReference
queryTask.execute(query).then(function(results) {
console.log(results.features);
// you need to call your displayResults function
displayResults(results);
});
I assume since you are using a simple-marker as the symbol, that your layer is a point feature type right?
I tried, but no results.
I have Displayed Results here:
function displayResults(results) {
resultsLayer.removeAll();
var features = results.features.map(function (graphic) {
graphic.symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "diamond",
size: 6.5,
color: "darkorange"
};
return graphic;
});
}
......
Yes My layer is a point feature...
Vakhtang,
You never add the features to your graphicslayer in your code.
// view and print the number of results to the DOM
function displayResults(results) {
resultsLayer.removeAll();
var features = results.features.map(function(graphic) {
graphic.symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "diamond",
size: 6.5,
color: "darkorange"
};
return graphic;
});
resultsLayer.addMany(features); //This is what you are missing
}
Thank you, for help, i did it
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.