How to add QueryTask result to map as a new Layer 4.10

685
5
Jump to solution
02-12-2019 01:36 AM
Vakhtang_Zubiashvili
Occasional Contributor II

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>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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?

Vakhtang_Zubiashvili
Occasional Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

Vakhtang_Zubiashvili
Occasional Contributor II

Thank you, for help, i did it

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

0 Kudos