topic Re: hi i am trying to draw a polygon then find all roads inside that polygon i am not able show roads inside my polygon in ArcGIS JavaScript Maps SDK Questions

hi i am trying to draw a polygon then find all roads inside that polygon i am not able show roads inside my polygon

MohammedKabeer1 — Thu, 16 Apr 2015 08:01:24 GMT

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Maps Toolbar</title>

<style>

html, body, #mainWindow {

font-family: sans-serif;

height: 100%;

width: 100%;

}

html, body {

margin: 0;

padding: 0;

}

#header {

height: 80px;

overflow: auto;

padding: 0.5em;

}

</style>

var map, toolbar, symbol, geomTask;

var _public = {};

require([

"esri/map",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ImageParameters",

"esri/toolbars/draw",

"esri/graphic",

"esri/geometry/Polygon",

"esri/tasks/QueryTask",

"esri/tasks/query",

"esri/tasks/FeatureSet",

"esri/geometry/Point",

"esri/SpatialReference",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"dojo/parser", "dijit/registry",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane",

"dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"

], function(

Map,

ArcGISDynamicMapServiceLayer,

ImageParameters,

Draw,

Graphic,

Polygon,

QueryTask,

Query,

FeatureSet,

Point,

SpatialReference,

SimpleMarkerSymbol,

SimpleLineSymbol,

SimpleFillSymbol,

parser,

registry

) {

parser.parse();

map = new Map("map", {

sliderOrientation : "horizontal"

});

var imageParameters = new ImageParameters();

imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

//Takes a URL to a non cached map service.

var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://192.168.100.72:6080/arcgis/rest/services/ksa_bounaries_wfs/MapServer", {

"opacity" : 0.5,

"imageParameters" : imageParameters

});

map.addLayer(dynamicMapServiceLayer);

map.on("load", createToolbar);

// loop through all dijits, connect onClick event

// listeners for buttons to activate drawing tools

registry.forEach(function(d) {

// d is a reference to a dijit

// could be a layout container or a button

if ( d.declaredClass === "dijit.form.Button" ) {

d.on("click", activateTool);

}

});

function activateTool() {

var tool = this.label.toUpperCase().replace(/ /g, "_");

toolbar.activate(Draw[tool]);

map.hideZoomSlider();

}

function createToolbar(themap) {

toolbar = new Draw(map);

toolbar.on("draw-end", addToMap);

}

/* function KabTest(evt){

alert ("jjjjj");

}*/

var _kabqueryInside;

var featureSet = new FeatureSet();

function addToMap(evt) {

_public._kabevt= evt;

alert ("here i am in 1");

var symbol;

toolbar.deactivate();

map.showZoomSlider();

switch (evt.geometry.type) {

case "point":

case "multipoint":

symbol = new SimpleMarkerSymbol();

break;

case "polyline":

alert ("this is free hand polyline");

symbol = new SimpleLineSymbol();

break;

default:

symbol = new SimpleFillSymbol();

break;

}

var graphic = new Graphic(evt.geometry, symbol);

_public._kabgraphic=graphic;

alert ("here i am in graphic adding");

map.graphics.add(graphic);

_public._kabgraphic=graphic;

var stateExtent = evt.geometry.getExtent().expand(1.0);

//this code is for search by polygon

_public._kabstateExtent=stateExtent;

map.setExtent(stateExtent);

//constructing Polygon

// var _kabpolygon = ([[xmin=stateExtent.xmin], [ymin=stateExtent.ymin], [xmax=stateExtent.xmax], [ymax=stateExtent.ymax]]);

var symbol1 = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);

var _kabpolygon = new esri.geometry.Polygon(_public._kabgraphic.geometry);

/* var _kabpolygon = {"rings":[[

[xmin=stateExtent.xmin, ymin=stateExtent.ymin],

[xmax=stateExtent.xmax, ymax=stateExtent.ymax],

[xmin=stateExtent.xmin, ymin=stateExtent.ymin],

[xmax=stateExtent.xmax, ymax=stateExtent.ymax]

]] "spatialReference":{" wkid":4326}

};*/

_public._kabpolygon=_kabpolygon;

alert (_kabpolygon);

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

var singleRingPolygon = new Polygon(_kabpolygon, symbol1);

_public._kabsingleRingPolygon=singleRingPolygon;

var gsvc = null;

//constructing points

var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);

gsvc = new esri.tasks.GeometryService("http://192.168.100.72:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

var _kabqueryTaskInside = new QueryTask("http://192.168.100.72:6080/arcgis/rest/services/ksa_mot_roads/FeatureServer/0");

_public._kabqueryTaskInside=_kabqueryTaskInside;

//build query filter

alert ("here i am1");

_kabqueryInside = new Query();

_public._kabqueryInside=_kabqueryInside;

_kabqueryInside.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;

_kabqueryInside.geometry = graphic.geometry;

alert ("here i am2");

_kabqueryInside.returnGeometry = true;

//_kabqueryInside.where = "RYD_MASJID_ID like '%'";

_kabqueryTaskInside.execute(_kabqueryInside, queryCallback);

alert ("here i am3");

function queryCallback(featureSet) {

alert(featureSet);

_public._kabfeatureSet=featureSet;

var symbol = new esri.symbol.SimpleMarkerSymbol();

alert("here i am 5");

symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;

symbol.setSize(8);

symbol.setColor(new dojo.Color([255,255,0,0.5]));

_public._kabsymbol=symbol;

var features = featureSet.features;

_public._kabfeatures=features;

dojo.forEach(features, function(feature) {

feature.setSymbol(symbol);

console.log(feature);

_public._kabfeature=feature;

map.graphics.add(feature);

});

}

});

</script>

</head>

<button data-dojo-type="dijit/form/Button">Point</button>

<button data-dojo-type="dijit/form/Button">Multi Point</button>

<button data-dojo-type="dijit/form/Button">Polyline</button>

<button data-dojo-type="dijit/form/Button">Polygon</button>

<button data-dojo-type="dijit/form/Button">Freehand Polyline</button>

<button data-dojo-type="dijit/form/Button">Freehand Polygon</button>

<button data-dojo-type="dijit/form/Button">Arrow</button>

<button data-dojo-type="dijit/form/Button">Triangle</button>

<button data-dojo-type="dijit/form/Button">Circle</button>

<button data-dojo-type="dijit/form/Button">Ellipse</button>

</div>

</div>

</body>

</html>

Re: hi i am trying to draw a polygon then find all roads inside that polygon i am not able show roads inside my polygon

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:19:36 GMT

Mohammed,

Here is your code with fixes and comments:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,user-scalable=no">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Maps Toolbar</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/nihilo/nihilo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
  <style>
    html,
    body,
    #mainWindow {
      font-family: sans-serif;
      height: 100%;
      width: 100%;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    #header {
      height: 80px;
      overflow: auto;
      padding: 0.5em;
    }
  </style>

  <script src="http://js.arcgis.com/3.12/"></script>
  <script>
    var map, toolbar, symbol, geomTask;
    var _public = {};

    require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "esri/toolbars/draw",
        "esri/graphic",
        "esri/geometry/Polygon",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "esri/tasks/FeatureSet",
        "esri/geometry/Point",
        "esri/SpatialReference",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "dojo/parser",
        "dijit/registry",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/form/Button",
        "dijit/WidgetSet",
        "dojo/domReady!"
      ], function (
      Map,
      ArcGISDynamicMapServiceLayer,
      ImageParameters,
      Draw,
      Graphic,
      Polygon,
      QueryTask,
      Query,
      FeatureSet,
      Point,
      SpatialReference,
      SimpleMarkerSymbol,
      SimpleLineSymbol,
      SimpleFillSymbol,
      parser,
      registry
    ) {
      parser.parse();

      map = new Map("map", {
        sliderOrientation: "horizontal"
      });

      var imageParameters = new ImageParameters();
      imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

      //Takes a URL to a non cached map service.
      var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://192.168.100.72:6080/arcgis/rest/services/ksa_bounaries_wfs/MapServer", {
        "opacity": 0.5,
        "imageParameters": imageParameters
      });

      map.addLayer(dynamicMapServiceLayer);

      map.on("load", createToolbar);

      // loop through all dijits, connect onClick event
      // listeners for buttons to activate drawing tools
      registry.forEach(function (d) {
        // d is a reference to a dijit
        // could be a layout container or a button
        if (d.declaredClass === "dijit.form.Button") {
          d.on("click", activateTool);
        }
      });

      function activateTool() {
        var tool = this.label.toUpperCase().replace(/ /g, "_");
        toolbar.activate(Draw[tool]);
        map.hideZoomSlider();
      }

      function createToolbar(themap) {
        toolbar = new Draw(map);
        toolbar.on("draw-end", addToMap);
      }

      var _kabqueryInside;
      var featureSet = new FeatureSet();

      function addToMap(evt) {
        _public._kabevt = evt;
        console.info("here i am in 1");
        var symbol;
        toolbar.deactivate();
        map.showZoomSlider();
        switch (evt.geometry.type) {
        case "point":
        case "multipoint":
          symbol = new SimpleMarkerSymbol();
          break;
        case "polyline":
          alert("this is free hand polyline");
          symbol = new SimpleLineSymbol();
          break;
        default:
          symbol = new SimpleFillSymbol();
          break;
        }

        var graphic = new Graphic(evt.geometry, symbol);

        _public._kabgraphic = graphic;
        console.info("here i am in graphic adding");
        map.graphics.add(graphic);

        var stateExtent = evt.geometry.getExtent().expand(1.0);

        //this code is for search by polygon
        _public._kabstateExtent = stateExtent;
        map.setExtent(stateExtent);

        //constructing Polygon
        //   var _kabpolygon = ([[xmin=stateExtent.xmin], [ymin=stateExtent.ymin], [xmax=stateExtent.xmax], [ymax=stateExtent.ymax]]);
        var symbol1 = new SimpleFillSymbol();
        var _kabpolygon = new Polygon(_public._kabgraphic.geometry);
        /*var _kabpolygon = {
          "rings": [[
                                       [xmin = stateExtent.xmin, ymin = stateExtent.ymin],
                                       [xmax = stateExtent.xmax, ymax = stateExtent.ymax],
                                       [xmin = stateExtent.xmin, ymin = stateExtent.ymin],
                                       [xmax = stateExtent.xmax, ymax = stateExtent.ymax]
          ]]
          "spatialReference": {
            " wkid": 4326
          }
        };*/

        _public._kabpolygon = _kabpolygon;
        console.info(_kabpolygon);
//Not sure why you had all this...        
//        var polygon = new Polygon(polygon);
//        var singleRingPolygon = new Polygon(_kabpolygon, symbol1);
//        _public._kabsingleRingPolygon = singleRingPolygon;
//        var gsvc = new GeometryService("http://192.168.100.72:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

        //constructing points
        var symbol = new SimpleFillSymbol();
//You probably should not use FeatureServer unless you are wanting to edit the feature in your app, instead use MapServer
        var _kabqueryTaskInside = new QueryTask("http://192.168.100.72:6080/arcgis/rest/services/ksa_mot_roads/FeatureServer/0");
        _public._kabqueryTaskInside = _kabqueryTaskInside;

        //build query filter
        console.info("here i am 2");
        _kabqueryInside = new Query();
        _public._kabqueryInside = _kabqueryInside;
        _kabqueryInside.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
        _kabqueryInside.geometry = graphic.geometry;
        console.info("here i am 3");
        _kabqueryInside.returnGeometry = true;
        _kabqueryInside.outSpatialReference = map.spatialReference;
        //_kabqueryInside.where = "RYD_MASJID_ID like '%'";
        _kabqueryTaskInside.execute(_kabqueryInside, queryCallback);
        console.info("here i am 4");


        function queryCallback(featureSet) {
          console.info(featureSet);
          _public._kabfeatureSet = featureSet;
//You were trying to apply a Simple Marker Symbol to a line feature.          
//          var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 8, null, new dojo.Color([255, 255, 0, 0.5]));
//The way you were creating sybology was pretty wierd and ineffecient, use the constructor options to apply everything
//this keeps it down to one line.        
          var symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.8]), 2);
          console.info("here i am 5");
          _public._kabsymbol = symbol;
          var features = featureSet.features;
          _public._kabfeatures = features;
          dojo.forEach(features, function (feature) {
            feature.setSymbol(symbol);
            console.info(feature);
            _public._kabfeature = feature;
            map.graphics.add(feature);
          });
        }
      }
    });
  </script>
</head>

<body class="nihilo">

  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <span>Draw:<br /></span>
      <button data-dojo-type="dijit/form/Button">Point</button>
      <button data-dojo-type="dijit/form/Button">Multi Point</button>
      <button data-dojo-type="dijit/form/Button">Line</button>
      <button data-dojo-type="dijit/form/Button">Polyline</button>
      <button data-dojo-type="dijit/form/Button">Polygon</button>
      <button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
      <button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
      <!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->
      <button data-dojo-type="dijit/form/Button">Arrow</button>
      <button data-dojo-type="dijit/form/Button">Triangle</button>
      <button data-dojo-type="dijit/form/Button">Circle</button>
      <button data-dojo-type="dijit/form/Button">Ellipse</button>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
</body>

</html>

Re: hi i am trying to draw a polygon then find all roads inside that polygon i am not able show roads inside my polygon

MohammedKabeer1 — Thu, 16 Apr 2015 14:21:45 GMT

Thank you very much its working

can you please tell me where was my problem

Thanks

Kabeer

Re: hi i am trying to draw a polygon then find all roads inside that polygon i am not able show roads inside my polygon

RobertScheitlin__GISP — Thu, 16 Apr 2015 14:41:30 GMT

Kabeer,

I have commented in the code about your issues.

Glad to help. Now it is your turn to help the community by marking this question as answered. All you have to do is click the "Correct Answer" link (the one with the little green star) on the post that provided the answer for you. If the answer was not provided by one of the responders then you can mark any of the replies that you received as helpful by clicking on the "Actions" menu and choosing "Mark as Helpful"