Select features and zoom to layers

2442
18
Jump to solution
04-15-2017 08:29 AM
SibghatUllah1
Occasional Contributor

I am trying to select highlight features and zoom to selected features layer extent.My code below runs but doesn't highlight any feature.

on(dom.byId("try"), "click", function () {
var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/RAEC/MapServer/12");

//build query filter
var que = new Query();
que.returnGeometry = true;
que.outFields = ["FeederID", "OBJECTID"];
que.outSpatialReference = { "wkid": 32640 };
que.where = "FeederID<> ''";
symbol = new SimpleMarkerSymbol();
symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setSize(10);
symbol.setColor(new Color([255,255,0,0.5]));


queryTask.execute(que,showResults);
function showResults(featureSet) {

map.graphics.clear();

var resultFeatures = featureSet.features;

for (var i=0, il=resultFeatures.length; i<il; i++) {
var graphic = resultFeatures;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
}
}
});

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

OK,  That is what does not make sense then.

      query = new Query();
      query.returnGeometry = true;
      query.outFields = ["FeederID"];
      query.outSpatialReference = map.spatialReference;

line 2 and line 4 should cause the returned queries geometry to be in the maps spatial reference (WKID 102100).

You could try to manually set it:

query.outSpatialReference = {"wkid": 102100};

View solution in original post

18 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Sibghat,

   Have you placed a break point or a console statement in the showResults function to see if you are getting results from your query?

0 Kudos
SibghatUllah1
Occasional Contributor

Yes query is running fine and passing geometry object, attribute object and graphics symbols.

0 Kudos
SibghatUllah1
Occasional Contributor

Dear Robert,

I have make a new html with query.it is running and showing features without adding basemap. when i add 

basemap: "topo",
center: [58.871192 , 20.646328],
zoom: 12 

The query still runs and results are shown in different area .Something with projection is the error.Please guide

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">


<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">

<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

.claro .dijitContentPane {
font-family: "Lucida Grande","Segoe UI","Arial",sans-serif;
font-weight: normal;
font-size: small;
}
</style>

<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/symbols/SimpleMarkerSymbol",
"esri/InfoTemplate",
"dojo/_base/Color",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, dom, on) {
//create map and add layer
map = new Map("mapDiv",{
basemap: "topo",
center: [58.871192 , 20.646328],
zoom: 12
});
var layer = new ArcGISDynamicMapServiceLayer(
"http://localhost:6080/arcgis/rest/services/RAEC/MapServer");
map.addLayer(layer);

//initialize query task
queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/RAEC/MapServer/12");

//initialize query
query = new Query();
query.returnGeometry = true;
query.outFields = ["FeederID"];

//initialize InfoTemplate
infoTemplate = new InfoTemplate("${FeederID}", "Name : ${FeederID}<br/> ");

//create symbol for selected features
symbol = new SimpleMarkerSymbol();
symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setSize(10);
symbol.setColor(new Color([255,255,0,0.5]));

//write "Get Details" button's click event
on(dom.byId("runQuery"), "click", executeQueryTask);


function executeQueryTask() {
//set query based on what user typed in for population;
query.where = "FeederID<> ''";

//execute query
queryTask.execute(query,showResults);
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
map.graphics.clear();

//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures = featureSet.features;

//Loop through each feature returned
for (var i=0, il=resultFeatures.length; i<il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = resultFeatures;
graphic.setSymbol(symbol);

//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);

//Add graphic to the map graphics layer.
map.graphics.add(graphic);
}
}
}
});
</script>
<body>
<br/>

<input type="button" value="Get Details" id="runQuery" />
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>

</body>
</html>

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Sibghat,

  Just add this line with your other query properties:

query.outSpatialReference = map.spatialReference;‍‍
SibghatUllah1
Occasional Contributor

i have already tried both but no success.

query.outSpatialReference={wkid :"32640"}; my map service wkid

query.outSpatialReference = map.spatialRefernce;

0 Kudos
RebeccaStrauch__GISP
MVP Esteemed Contributor

Resort Robert would know better than I would, but I'm wondering if it is a spelling error/typo

try

query.outSpatialReference = map.spatialReference;

Also, I would add spaces around your = in the first line.

edit.   Talking about typos...I just noticed my iPad had "auto corrected" your name Robert.   

RobertScheitlin__GISP
MVP Esteemed Contributor

Sibghat,

  Rebecca is correct I made a spelling error in my reply previously (I have since edited it).  It should be as Rebecca states.

0 Kudos
SibghatUllah1
Occasional Contributor

Now getting this error 

Map: Geometry (wkid: 32640) cannot be converted to spatial reference of the map (wkid: 102100)

i was thinking to change my code using feature selection.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Sibghat,

  Based on this code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .claro .dijitContentPane {
      font-family: "Lucida Grande", "Segoe UI", "Arial", sans-serif;
      font-weight: normal;
      font-size: small;
    }
  </style>
  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    var map;
    require([
      "esri/map",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/tasks/QueryTask",
      "esri/tasks/query",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/InfoTemplate",
      "dojo/_base/Color",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function(Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, dom, on) {
      //create map and add layer
      map = new Map("mapDiv", {
        basemap: "topo",
        center: [58.871192, 20.646328],
        zoom: 12
      });
      var layer = new ArcGISDynamicMapServiceLayer(
        "http://localhost:6080/arcgis/rest/services/RAEC/MapServer");
      map.addLayer(layer);
     
      //initialize query task
      queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/RAEC/MapServer/12");
     
      //initialize query
      query = new Query();
      query.returnGeometry = true;
      query.outFields = ["FeederID"];
      query.outSpatialReference = map.spatialReference;
     
      //initialize InfoTemplate
      infoTemplate = new InfoTemplate("${FeederID}", "Name : ${FeederID}<br/> ");
     
      //create symbol for selected features
      symbol = new SimpleMarkerSymbol();
      symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
      symbol.setSize(10);
      symbol.setColor(new Color([255, 255, 0, 0.5]));
     
      //write "Get Details" button's click event
      on(dom.byId("runQuery"), "click", executeQueryTask);
     
      function executeQueryTask() {
        //set query based on what user typed in for population;
        query.where = "FeederID<> ''";

        //execute query
        queryTask.execute(query, showResults);

        function showResults(featureSet) {
          //remove all graphics on the maps graphics layer
          map.graphics.clear();
          //Performance enhancer - assign featureSet array to a single variable.
          var resultFeatures = featureSet.features;
          //Loop through each feature returned
          for (var i = 0, il = resultFeatures.length; i < il; i++) {
            //Get the current feature from the featureSet.
            //Feature is a graphic
            var graphic = resultFeatures[i];
            graphic.setSymbol(symbol);
            //Set the infoTemplate.
            graphic.setInfoTemplate(infoTemplate);
            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
          }
        }
      }
    });
  </script>

  <body>
    <br/>
    <input type="button" value="Get Details" id="runQuery" />
    <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Your Map would be in WKID 102100, because you specify the maps basemap as topo. Now with query.outSpatialReference = map.spatialReference; this will cause your query results to return in WKID 102100 as well so the graphics should appear in the correct location.

Are you seeing something different than this?