Cannot get results from QueryTask to display

TimothyBrown7 · ‎06-08-2016

Good day all,

I am very very new to javascript but I am trying to learn some ArcGIS API to use with out ArcGIS Server REST API, and I wanted to try to set up a query filter using a drop down box so I found this example:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/sandbox.html?sample=tasks-query

I wanted to see if could alter it to take out the scene view and 3d options and have the results appear as just dots to later adapt to our rest api. After 2 days this is what I have. I have read through several articles, but cannot how this is supposed to be done I think if I can get an idea at this point I can start to put it all together, slowly.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Query Task - 4.0</title>

      "esri/tasks/QueryTask",
      "esri/tasks/support/Query",
      "dojo/_base/array",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function(
      Map, SceneView, GraphicsLayer, FeatureLayer, Graphic, Point,SimpleMarkerSymbol,
      QueryTask, Query, arrayUtils, dom, on
    ) {

      // URL to feature service containing points representing the 50
      // most prominent peaks in the U.S.
      var peaksUrl =
        "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";

      // Define the popup content for each result
      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "{MTN_PEAK}, {STATE}",
        fieldInfos: [{
          fieldName: "ELEV_ft",
          label: "Elevation (feet)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "ELEV_m",
          label: "Elevation (meters)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "PROMINENCE_ft",
          label: "Prominence (feet)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "PROMINENCE_m",
          label: "Prominence (meters)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "ISOLATION_mi",
          label: "Isolation (miles)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "ISOLATION_km",
          label: "Isolation (km)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }],
        content: "<b><a href='https://en.wikipedia.org/wiki/Topographic_prominence'>Prominence:</a>" +
          "</b> {PROMINENCE_ft} ft ({PROMINENCE_m} m)" +
          "<br><b>Prominence Rank:</b> {RANK}" +
          "<br><b>Elevation:</b> {ELEV_ft} ft ({ELEV_m} m)" +
          "<br><b><a href='https://en.wikipedia.org/wiki/Topographic_isolation'>Isolation:</a>" +
          "</b> {ISOLATION_mi} mi ({ISOLATION_km} km)"
      };

// Create graphics layer and symbol to use for displaying the results of query
var resultsLyr = new GraphicsLayer();

      /*****************************************************************
       * Point QueryTask to URL of feature service
       *****************************************************************/
      var qTask = new QueryTask({
        url: peaksUrl
      });
      var params = new Query({
        returnGeometry: true,
        outFields: ["*"]
      });

      var map = new Map({
        basemap: "osm",
        layers: [resultsLyr] // add graphics layer to the map
      });

      var view = new SceneView({
        map: map,
        container: "viewDiv",
        center: [-100, 38],
        zoom: 4
      });

      var attributeName = dom.byId("attSelect");
      var expressionSign = dom.byId("signSelect");
      var value = dom.byId("valSelect");

      // Executes each time the button is clicked
      function doQuery() {
        // Clear the results from a previous query
        resultsLyr.removeAll();
        /*********************************************
         *
         * Set the where clause for the query. This can be any valid SQL expression.
         * In this case the inputs from the three drop down menus are used to build
         * the query. For example, if "Elevation", "is greater than", and "10,000 ft"
         * are selected, then the following SQL where clause is built here:
         *
         * params.where = "ELEV_ft > 10000";
         *
         * ELEV_ft is the field name for Elevation and is assigned to the value of the
         * select option in the HTML below. Other operators such as AND, OR, LIKE, etc
         * may also be used here.
         *
         **********************************************/
        params.where = attributeName.value + expressionSign.value + value.value;

        // executes the query and calls getResults() once the promise is resolved
        // promiseRejected() is called if the promise is rejected
        qTask.execute(params)
          .then(getResults)
          .otherwise(promiseRejected);
      }

// Called each time the promise is resolved
function getResults(response) {

       var peakResults = arrayUtils.map(response.features, function(
          feature) {
          feature.symbol = new SimpleMarkerSymbol({
             color: [226, 119, 40],
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 2
        }
      });

          feature.popupTemplate = popupTemplate;
          return feature;
        });

resultsLyr.addMany(peakResults);

        // animate to the results after they are added to the map
        view.goTo(peakResults);
        // print the number of results returned to the user
        dom.byId("printResults").innerHTML = peakResults.length +
          " results found!";
      }
      function promiseRejected(err) {
        console.error("Promise rejected: ", err.message);
      }
      on(dom.byId("doBtn"), "click", doQuery);
    });
</script>
</head>

<body>
<div id="viewDiv"></div>
<div id="optionsDiv">
    <h2>Prominent Peaks in the U.S.</h2>
    <select id="attSelect">
      <option value="ELEV_ft">Elevation</option>
      <option value="PROMINENCE_ft" selected>Prominence</option>
    </select>
    <select id="signSelect">
      <option value=">">is greater than</option>
      <option value="<">is less than</option>
      <option value="=">is equal to</option>
    </select>
    <select id="valSelect">
      <option value="1000">1,000 ft</option>
      <option value="5000">5,000 ft</option>
      <option value="10000">10,000 ft</option>
      <option value="15000">15,000 ft</option>
      <option value="20000">20,000 ft</option>
      <option value="PROMINENCE_ft">Prominence</option>
    </select>
    <br>
    <br>
    <button id="doBtn">Do Query</button>
    <br>
    <p><span id="printResults"></span></p>
</div>
</body>

</html>

I *think* the issues is in the function getResults(response) and I have tried many variations but haven't gotten any where in the past few days. Its probably an easy fix for someone who knows what they are doing, but right now I am lost. any help would be great.

Thx in advance.

Tim

RobertScheitlin__GISP · ‎06-08-2016

Tim,

I am not sure I understand your issue. When I take your code and use it I get the returned results as simple marker symbols. What is it that you are wanting to do that you have not already accomplished?

View solution in original post

RobertScheitlin__GISP · ‎06-08-2016

Tim,

I am not sure I understand your issue. When I take your code and use it I get the returned results as simple marker symbols. What is it that you are wanting to do that you have not already accomplished?

TimothyBrown7 · ‎06-08-2016

Oh wait, I may have figured it out.. capitalization counts.. thanks.

YousefQuran · ‎06-09-2016

@Timothy Brown Could you please sign this issue as a Solved issue! this is help members.

Regards.

RobertScheitlin__GISP · ‎06-09-2016

Tim,

You will need to set the querys outSpatialReference to the 102100 as your data is in a different SR then the maps:

            var params = new Query({
                returnGeometry: true,
                outFields: ["*"],
                outSpatialReference : { wkid:102100 }
            });

In GeoNet when someone answers your question you click on the "Correct Answer" link on the thread that answered your question. You will not see this link when viewing the thread in your GeoNet inbox you actually have to open the thread and then you will see the link.

TimothyBrown7 · ‎06-09-2016

Thank you!