How to make a zoom to selected in query task.?

Rocky_ — Tue, 14 Aug 2018 18:39:22 GMT
I am trying to zoom the specific record selected from the query task grid.
I tried to use the "esri/tasks/locator" but not sure about it.. can anyone please help me with this.
Thanks..
Re: How to make a zoom to selected in query task.?

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:57:40 GMT
RAJ,
Like this:
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>QueryTask - 4.8</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    #viewDiv.withGrid {
      height: 65%;
    }

    .esri-widget {
      padding-left: 8px;
      padding-right: 4px;
    }

    #paneDiv {
      position: absolute;
      top: 10px;
      left: 62px;
      padding: 0 12px 0 12px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
    }

    #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;
      display: none;
    }

    #gridDisplay {
      z-index: 80;
    }

    .dgrid {
      height: 22em !important;
    }

    .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>
    var dojoConfig = {
      has: {
        "esri-featurelayer-webgl": 1
      }
    };
  </script>

  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
  <script src="https://js.arcgis.com/4.8/"></script>

  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Home",
        "esri/widgets/Legend",
        "esri/widgets/Search",
        "esri/layers/GraphicsLayer",
        "esri/tasks/QueryTask",
        "esri/tasks/support/Query",
        "dojo/_base/array",
        "dojo/dom",
        "dojo/on",
        "dgrid/OnDemandGrid",
        "dgrid/extensions/ColumnHider",
        "dojo/store/Memory",
        "dstore/legacy/StoreAdapter",
        "dgrid/Selection",
        "dojo/_base/declare",
        "dojo/dom-class",
        "dojo/domReady!"
      ],

      function(
        Map, MapView, Home, Legend, Search, GraphicsLayer, QueryTask, Query, arrayUtils, dom, on,
        OnDemandGrid, ColumnHider, Memory, StoreAdapter, Selection, declare, domClass
      ) {
        let map, view, grid;

        let RUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";
        let FUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/2015_06_26_active_fires_USA_contiguous_and_Hawaii_24h/FeatureServer/0";

        let gridFields = ["OBJECTID", "RANK", "MTN_PEAK", "STATE",
          "ELEV_ft", "ELEV_m", "PROMINENCE_ft", "PROMINENCE_m"
        ];

        // create a new datastore for the on demandgrid
        // will be used to display attributes of selected features
        let dataStore = new StoreAdapter({
          objectStore: new Memory({
            idProperty: "OBJECTID"
          })
        });

        const gridDis = document.getElementById("gridDisplay");

        // Define the popup content for each result
        const 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)"
        };

        // Define the popup content for each result
        const popupTemplate2 = { // autocasts as new PopupTemplate()
          title: "{TRACK}",
          fieldInfos: [{
            fieldName: "TRACK",
            label: "Track"
          }, {
            fieldName: "BRIGHT_T31",
            label: "Brightness",
            format: {
              places: 0,
              digitSeperator: true
            }
          }, {
            fieldName: "CONFIDENCE",
            label: "Confidence"
          }, {
            fieldName: "SCAN",
            label: "Scan",
            format: {
              places: 0,
              digitSeperator: true
            }
          }],
          content: "Brightness: {BRIGHT_T31}" +
            "<br><b>Prominence Rank:</b> {RANK}" +
            "<br><b>Confidence:</b> {CONFIDENCE}" +
            "<br><b>Scan: {SCAN}"
        };

        let resultsLayer = new GraphicsLayer();
        let resultsLayer2 = new GraphicsLayer();

        let qTask = new QueryTask({
          url: RUrl
        });
        let qTask2 = new QueryTask({
          url: FUrl
        });

        let params = new Query({
          returnGeometry: true
        });

        map = new Map({
          basemap: "streets",
          layers: [resultsLayer, resultsLayer2]
        });

        view = new MapView({
          map: map,
          container: "viewDiv",
          zoom: 11,
          popup: {
            highlightEnabled: true
          },
          highlightOptions: {
            color: [255, 255, 0, 1],
            haloOpacity: 0.9,
            fillOpacity: 0.2
          }
        });

        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: 'ID',
                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
          grid = new(declare([OnDemandGrid, Selection, ColumnHider]))({
            bufferRows: Infinity,
            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);
        }

        function selectFeatureFromGrid(event) {
          resultsLayer.graphics.some(function(gra){
            if(gra.attributes.OBJECTID === event.rows[0].id){
              view.goTo(gra);
              view.popup.open({
                features:[gra],
                location: gra.geometry
              })
            }
          })
        }

        view.when(function() {
          view.ui.add("optionsDiv", "bottom-right");
          on(dom.byId("doBtn"), "click", doQuery);
          on(dom.byId("clrBtn"), "click", doClear);
          //Query to get unique vals
          let opt_ = document.createElement('option');
          opt_.value = "";
          opt_.innerHTML = "select State";
          let opt__ = document.createElement('option');
          opt__.value = "";
          opt__.innerHTML = "select Peak";
          statedd.appendChild(opt_);
          peakdd.appendChild(opt__);
          let qUVState = new Query({
            returnGeometry: false,
            where: '1=1',
            returnDistinctValues: true,
            outFields: ['STATE'],
            orderByFields: ['STATE ASC']
          });
          qTask.execute(qUVState).then(function(results) {
            results.features.map(function(feat) {
              let opt = document.createElement('option');
              opt.value = feat.attributes.STATE;
              opt.innerHTML = feat.attributes.STATE;
              statedd.appendChild(opt);
            });
          });
          let qUVPeak = new Query({
            returnGeometry: false,
            where: '1=1',
            returnDistinctValues: true,
            outFields: ['MTN_PEAK'],
            orderByFields: ['MTN_PEAK ASC']
          });
          qTask.execute(qUVPeak).then(function(results) {
            results.features.map(function(feat) {
              let opt2 = document.createElement('option');
              opt2.value = feat.attributes.MTN_PEAK;
              opt2.innerHTML = feat.attributes.MTN_PEAK;
              peakdd.appendChild(opt2);
            });
          });
        });

        const attributeName = dom.byId("attSelect");
        const expressionSign = dom.byId("signSelect");
        const value = dom.byId("valSelect");
        const wlayer = dom.byId("lyrSelect");
        const statedd = dom.byId("stateSelect");
        const peakdd = dom.byId("peakSelect");

        function doClear() {
          if (grid) {
            dataStore.objectStore.data = {};
            grid.set("collection", dataStore);
          }
          resultsLayer2.removeAll();
          gridDis.style.display = 'none';
          domClass.remove("viewDiv", 'withGrid');
        }

        function doQuery() {
          doClear();
          // Clear the results from a previous query
          resultsLayer.removeAll();
          resultsLayer2.removeAll();
          let whereC = [];
          if(statedd.value !== ''){
            whereC.push("STATE = '" + statedd.value + "'");
          }
          if (peakdd.value !== ''){
            whereC.push("MTN_PEAK = '" + peakdd.value + "'");
          }
          whereC.push(attributeName.value + expressionSign.value + value.value);

          params.where = whereC.join(' AND ');

          if (wlayer.value === 'peaks') {
            params.outFields = gridFields = ["OBJECTID", "RANK", "MTN_PEAK", "STATE",
              "ELEV_ft", "ELEV_m", "PROMINENCE_ft", "PROMINENCE_m"
            ];
            qTask.execute(params)
              .then(getResults)
              .catch(promiseRejected);
          } else if (wlayer.value === 'fires') {
            params.outFields = gridFields = ["OBJECTID", "BRIGHTNESS", "SCAN", "TRACK",
              "ACQ_DATE", "ACQ_TIME", "SATELLITE", "CONFIDENCE", "VERSION"
            ];
            params.where = 'BRIGHTNESS > 320';
            qTask2.execute(params)
              .then(getResults)
              .catch(promiseRejected);
          }
        }

        function getResults(response) {
          let graphics = response.features;

          if (graphics.length > 0) {
            gridDis.style.display = 'block';
            domClass.add("viewDiv", 'withGrid');
            document.getElementById("featureCount").innerHTML =
              "<b>Showing attributes for " +
              graphics.length.toString() + " features </b>"
          } else {
            gridDis.style.display = 'none';
          }
          createGrid(response.fields);

          // 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);


          var RResults = arrayUtils.map(response.features, function(
            feature) {
            feature.symbol = {
              type: "simple-marker",
              color: "red",
              size: 5,
              outline: {
                color: "black"
              }
            };
            if (wlayer.value === 'peaks') {
              feature.popupTemplate = popupTemplate;
            } else if (wlayer.value === 'fires') {
              feature.popupTemplate = popupTemplate2;
            }
            return feature;
          });
          if (wlayer.value === 'peaks') {
            resultsLayer.addMany(RResults);
          } else if (wlayer.value === 'fires') {
            resultsLayer2.addMany(RResults);
          }

          view.goTo(RResults);
        }

        function promiseRejected(error) {
          console.error("Promise rejected: ", error.message);
        }

        var homeBtn = new Home({
          view: view
        }, "homeDiv");

        var legend = new Legend({
          view: view,
          layerInfos: [{
            url: RUrl
          }]
        });
        legend.startup();
        view.ui.add(legend, "bottom-left");

        var searchWidget = new Search({
          view: view
        });
        view.ui.add(searchWidget, {
          position: "top-right"
        });

      });
  </script>
</head>

<body>
  <div id="viewDiv">
    <div class="esri-widget" id="optionsDiv">
      <h2>Prominent Peaks in the U.S.</h2>
      <select class="esri-widget" id="lyrSelect">
        <option value="fires">US Fires</option>
        <option value="peaks" selected>US Peaks</option>
      </select>
      <select class="esri-widget" id="attSelect">
        <option value="ELEV_ft">Elevation</option>
        <option value="PROMINENCE_ft" selected>Prominence</option>
      </select>
      <select class="esri-widget" id="signSelect">
        <option value=">">is greater than</option>
        <option value="<">is less than</option>
        <option value="=">is equal to</option>
      </select>
      <select class="esri-widget" 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>
      </select>
      <br>
      <br>
      <select class="esri-widget" id="stateSelect"></select>
      <select class="esri-widget" id="peakSelect"></select>
      <br>
      <br>
      <button class="esri-widget" id="doBtn">Do Query</button>
      <button class="esri-widget" id="clrBtn">Clear</button>
      <br>
      <br>
    </div>
    <div id="gridDisplay">
      <span class="info" id="featureCount"></span>
      <div id="grid"></div>
    </div>
  </div>

</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Re: How to make a zoom to selected in query task.?

RobertScheitlin__GISP — Wed, 15 Aug 2018 13:22:48 GMT
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
Re: How to make a zoom to selected in query task.?

Rocky_ — Wed, 15 Aug 2018 14:25:33 GMT
Thanks for the solution Robert... Can you please tell me, can we use "esri/tasks/locator" to do the same zooming process.. or any other way to zoom specific query result..? or the above one is the only way to do it..
Re: How to make a zoom to selected in query task.?

RobertScheitlin__GISP — Wed, 15 Aug 2018 14:55:42 GMT
Sure here is a sample I did for someone else:
https://community.esri.com/thread/219585-find-sample-reverse-geocode-arcgis-api-for-javascriptfor-48
Re: How to make a zoom to selected in query task.?

Rocky_ — Wed, 15 Aug 2018 15:00:17 GMT
Thanks Robert..Have a Good Day ahead..
topic Re: How to make a zoom to selected in query task.? in ArcGIS JavaScript Maps SDK Questions

How to make a zoom to selected in query task.?

Re: How to make a zoom to selected in query task.?

Re: How to make a zoom to selected in query task.?

Re: How to make a zoom to selected in query task.?

Re: How to make a zoom to selected in query task.?

Re: How to make a zoom to selected in query task.?
