topic Re: Selecting Points under Polygon in ArcGIS JavaScript Maps SDK Questions

Selecting Points under Polygon

RohitGarg — Tue, 31 Aug 2010 10:15:34 GMT

Hello All,

I have created polygon, now i want to select points under polygon on click... please help me..

this is my code:-

[HTML]

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>

<script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("esri.tasks.geometry");
    dojo.require("esri.geometry");

    var map = null;
    var gsvc = null;
    var qtask = null;
    var polygonGraphic = null;
    var queryGraphic = null;

    function initialize() {
      map = new esri.Map("map");
      dojo.connect(map, "onLoad", function () {
        drawPolygon();
      });

   var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://myserver:8399/arcgis/rest/services/Data_Demo/MapServer/");
   map.addLayer(layer);

      map.setExtent(new esri.geometry.Extent(72.81, 18.95, 72.85, 18.98, new esri.SpatialReference({wkid: 4326})));

      gsvc = new esri.tasks.GeometryService("http://myserver:8399/arcgis/rest/services/Geometry/GeometryServer");

   qtask = new esri.tasks.QueryTask("http://myserver:8399/arcgis/rest/services/Data_Demo/MapServer/2");
}
function drawPolygon() {
      var latOffset, lonOffset, center, lat, lon, points;
       center = map.extent.getCenter();

     var Lat = 76.85; var Lon = 26.298; var Lat1= 72.8296; var Lng1= 18.99522;
     var Lat2= 72.819175; var Lng2= 18.970838; var Lat3= 72.828; var Lng3= 18.969;
     var Lat4= 72.832; var Lng4= 18.951; var Lat5= 72.823697;var Lng5= 18.946847;
    var Lat6= 72.826775035; var Lng6= 18.93383939; var Lat7 = 72.8150861175;
   var Lng7 = 18.96397220334;var Lat8 = 72.81860278088;var Lng8 = 18.951649999;

    var polygon = {"rings":[[[Lat1,Lng1],[Lat3,Lng3],[Lat6,Lng6], [Lat5,Lng5],[Lat8,Lng8],[Lat7,Lng7], [Lat2,Lng2], [Lat1,Lng1]]],
"spatialReference":{" wkid":4326 }};

var polygon = new esri.geometry.Polygon(polygon);

      var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
      polygonGraphic = new esri.Graphic(polygon, symbol);
      map.graphics.add(polygonGraphic);

    }

    function doSimplify() {
gsvc.simplify([ polygonGraphic.geometry ], doQuery(polygonGraphic));
    }

    function doQuery(polygonGraphic) {
      var query = new esri.tasks.Query();
      //query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
      query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
      query.geometry = polygonGraphic.geometry;
      query.returnGeometry = true;
      qtask.execute(query, queryCallback);
    }

    function queryCallback(featureSet) {
      map.graphics.remove(queryGraphic);

var symbol = new esri.symbol.SimpleMarkerSymbol();
          symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
          symbol.setSize(8);
          symbol.setColor(new dojo.Color([255,255,0,0.5]));

      var features = featureSet.features;
      var point = new esri.geometry.Point();
      queryGraphic = new esri.Graphic(point,symbol)
      map.graphics.add(queryGraphic);

    }

    dojo.addOnLoad(initialize);
</script>

</head>

<body class="tundra">

<input type="button" value="Simplify the polygon and Do a Query with simplified polygon" onclick="doQuery(polygonGraphic);" />
    <div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>

</HTML>

Re: Selecting Points under Polygon

derekswingley1 — Fri, 10 Dec 2021 23:05:23 GMT

There are a few issues...
-your doSimplify function is never used
-you don't need to pass in your polygonGraphic to doQuery since polygonGraphic is global

I put together a working example using services hosted by esri:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<style>
 html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
<script type="text/javascript">
 dojo.require("esri.map");

 var map = null;
 var gsvc = null;
 var qtask = null;
 var polygonGraphic = null;
 var queryGraphic = null;

 function initialize() {
  map = new esri.Map("map");
  dojo.connect(map, "onLoad", function () {
   drawPolygon();
  });

  var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
  map.addLayer(layer);
  map.setExtent(new esri.geometry.Extent({"xmin":-115.960,"ymin":36.524,"xmax":-115.734,"ymax":36.648,"spatialReference":{"wkid":4269}}));
  gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
  qtask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");
 }
 function drawPolygon() {
  var polygon = {"rings":[[
   [-115.930, 36.540], 
   [-115.740, 36.540], 
   [-115.740, 36.640], 
   [-115.930, 36.640],
   [-115.930, 36.540]
  ]],
  "spatialReference":{" wkid":4269}};

  var polygon = new esri.geometry.Polygon(polygon);
  var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
  polygonGraphic = new esri.Graphic(polygon, symbol);
  map.graphics.add(polygonGraphic);
 }

 function doQuery() {
  var query = new esri.tasks.Query();
  query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
  query.geometry = polygonGraphic.geometry;
  query.returnGeometry = true;
  qtask.execute(query, queryCallback);
 }

 function queryCallback(featureSet) {
  var symbol = new esri.symbol.SimpleMarkerSymbol();
  symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
  symbol.setSize(8);
  symbol.setColor(new dojo.Color([255,255,0,0.5]));

  var features = featureSet.features;
  dojo.forEach(features, function(feature) {
   feature.setSymbol(symbol);
   map.graphics.add(feature);
  });
 }

 dojo.addOnLoad(initialize);
</script>

</head>

<body class="tundra">

<input type="button" value="Query for points within the polygon graphic." onclick="doQuery();" />
<div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
</body>

</html>

Re: Selecting Points under Polygon

RohitGarg — Fri, 10 Dec 2021 23:05:25 GMT

Thanks Derek, Great... now its working fine in my application.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<style>
 html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
<script type="text/javascript">
 dojo.require("esri.map");

 var map = null;
 var gsvc = null;
 var qtask = null;
 var polygonGraphic = null;
 var queryGraphic = null;

 function initialize() {
  map = new esri.Map("map");
  dojo.connect(map, "onLoad", function () {
   drawPolygon();
  });

  var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
  map.addLayer(layer);
  map.setExtent(new esri.geometry.Extent({"xmin":-115.960,"ymin":36.524,"xmax":-115.734,"ymax":36.648,"spatialReference":{"wkid":4269}}));
  gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
  qtask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");
 }
 function drawPolygon() {
  var polygon = {"rings":[[
   [-115.930, 36.540], 
   [-115.740, 36.540], 
   [-115.740, 36.640], 
   [-115.930, 36.640],
   [-115.930, 36.540]
  ]],
  "spatialReference":{" wkid":4269}};

  var polygon = new esri.geometry.Polygon(polygon);
  var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
  polygonGraphic = new esri.Graphic(polygon, symbol);
  map.graphics.add(polygonGraphic);
 }

 function doQuery() {
  var query = new esri.tasks.Query();
  query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
  query.geometry = polygonGraphic.geometry;
  query.returnGeometry = true;
  qtask.execute(query, queryCallback);
 }

 function queryCallback(featureSet) {
  var symbol = new esri.symbol.SimpleMarkerSymbol();
  symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
  symbol.setSize(8);
  symbol.setColor(new dojo.Color([255,255,0,0.5]));

  var features = featureSet.features;
  dojo.forEach(features, function(feature) {
   feature.setSymbol(symbol);
   map.graphics.add(feature);
  });
 }

 dojo.addOnLoad(initialize);
</script>

</head>

<body class="tundra">

<input type="button" value="Query for points within the polygon graphic." onclick="doQuery();" />
<div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
</body>

</html>

Re: Selecting

RohitGarg — Wed, 01 Sep 2010 09:04:58 GMT

Hello Derek,

I have a one query. Like I have one polygon and one Polyline, If Polyline cross Polygon then it will through error alert message.

Can you please help me.

Regards,
RG
email:-rohitgarg83@gmail.com

Re: Selecting Points under Polygon

derekswingley1 — Wed, 01 Sep 2010 13:16:29 GMT

What is the error message?

Re: Selecting Points under Polygon

RohitGarg — Wed, 01 Sep 2010 16:29:37 GMT

What is the error message?

Thanks for the reply... I want show error alert, if polyline touches/crossess polygon, it should throw some error like "polyline cross the line" with line name.

Re: Selecting Points under Polygon

RohitGarg — Thu, 02 Sep 2010 04:22:48 GMT

Hello Derek,

Below is my code :-

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("esri.map");

var map = null;
var gsvc = null;
var qtask = null;
var polygonGraphic = null;
var queryGraphic = null;

function initialize() {
map = new esri.Map("map");
dojo.connect(map, "onLoad", function () {
   drawPolygon();
});

var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer/");
map.addLayer(layer);
map.setExtent(new esri.geometry.Extent({"xmin":-85.96,"ymin":37.985,"xmax":-85.385,"ymax":38.393,"spatialReference":{"wkid":4326}}));
gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
qtask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer/12");
}

function drawPolygon() {
var polygon = {"rings":[[
   [-85.950, 38.000], [-85.0, 37.9],
   [-85.440, 38.540],
   [-85.740, 38.640],
   [-85.930, 38.640],
   [-85.950, 38.000]
]],
"spatialReference":{" wkid":4326}};

var polygon = new esri.geometry.Polygon(polygon);
var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
polygonGraphic = new esri.Graphic(polygon, symbol);
map.graphics.add(polygonGraphic);
}

function doQuery() {
var query = new esri.tasks.Query();
query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_TOUCHES;
query.geometry = polygonGraphic.geometry;
query.returnGeometry = true;
qtask.execute(query, queryCallback);

alert("hidoQ");
}

function queryCallback(featureSet) {

var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 5);

var features = featureSet.features;

alert("1");

dojo.forEach(features, function(feature){feature.setSymbol(symbol); map.graphics.add(features);
   alert("5");
});
}

dojo.addOnLoad(initialize);
</script>

</head>

<body class="tundra">

<input type="button" value="Query for points within the polygon graphic." onClick="doQuery();" />
<div id="map" style="width:800px; height:400px; border:1px solid #000;"></div>
</body>

</html>

What is the error message?

Selecting Points under Polygon

RohitGarg — Thu, 02 Sep 2010 11:14:21 GMT

Hello,

I have 2 polygon, I want to select those point which is under Polygon 2. Is it possible ?

Below is the code shows 2 polygons and selecting all points(under polygon 1 and polygon 2).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("esri.map");

var map = null;
var gsvc = null;
var qtask = null;
var polygonGraphic = null;
var polygonGraphic2 = null;
var queryGraphic = null;
var extent = null;

function initialize() {
map = new esri.Map("map");
dojo.connect(map, "onLoad", function () {
   drawPolygon();
   drawPolygon2();
});

var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
map.addLayer(layer);
extent = map.setExtent(new esri.geometry.Extent({"xmin":-115.960,"ymin":36.524,"xmax":-115.734,"ymax":36.648,"spatialReference":{"wkid":4269}}));
gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
qtask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");
}
function drawPolygon() {
var polygon = {"rings":[[
   [-115.930, 36.540],
   [-115.740, 36.540],
   [-115.740, 36.640],
   [-115.930, 36.640],
   [-115.930, 36.540]
]],
"spatialReference":{" wkid":4269}};

var polygon = new esri.geometry.Polygon(polygon);
var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_NULL);
polygonGraphic = new esri.Graphic(polygon, symbol);
map.graphics.add(polygonGraphic);
}

function drawPolygon2() {
var polygon2 = {"rings":[[
   [-115.950, 36.520],
   [-115.740, 36.520],
   [-115.740, 36.650],
   [-115.950, 36.650],
   [-115.950, 36.520]
]],
"spatialReference":{" wkid":4269}};

var polygon2 = new esri.geometry.Polygon(polygon2);
var symbol2 = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_CROSS);

polygonGraphic2 = new esri.Graphic(polygon2, symbol2);
map.graphics.add(polygonGraphic2);
}

function doQuery() {
var query = new esri.tasks.Query();
query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
query.geometry = polygonGraphic2.geometry;
query.returnGeometry = true;
qtask.execute(query, queryCallback);
}

function queryCallback(featureSet) {
var symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
symbol.setSize(15);
symbol.setColor(new dojo.Color([255,255,0,0.5]));

var features = featureSet.features;
dojo.forEach(features, function(feature) {
   feature.setSymbol(symbol);
   map.graphics.add(feature);
});
}

dojo.addOnLoad(initialize);
</script>
</head>
<body class="tundra">

<input type="button" value="Query for points within the polygon graphic." onclick="doQuery();" />
<div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
</body>

</html>