Sample code for Identify Task that works with a user-drawn polygon?

JoanSteinbacher · ‎03-10-2016

I have coded an Identify Task button that works with the "on click" event. But my users want to be able to draw a rectangle instead of clicking a point on the map. I can't seem to wrap my brain around how to do this. Does anyone have sample code for the Identify Task that uses a user-drawn polygon?

Thanks,

Joan

RobertScheitlin__GISP · ‎03-10-2016

Joan,

Here is a sample:

<!DOCTYPE html>
<html>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--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>Identify with Popup</title>


  <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/nihilo/nihilo.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;
    }


    #map {
      height: 100%;
      width: 100%;
      margin: 0;
    }
  </style>
  <script src="http://js.arcgis.com/3.16/"></script>
  <script>
    var map, identifyListener, toolbar;


    require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/dijit/InfoWindow",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/toolbars/draw",
        "esri/dijit/Popup",
        "dojo/_base/array",
        "esri/graphic",
        "esri/Color",
        "dojo/dom-construct",
        "dojo/dom",
        "dojo/on",
        "dojo/parser",
        "dojo/_base/lang",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/form/Button",
        "dojo/domReady!"
      ], function (
      Map, FeatureLayer, InfoWindow, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
      SimpleLineSymbol, IdentifyTask, IdentifyParameters, Draw, Popup,
      arrayUtils, Graphic, Color, domConstruct, dom, on, parser, lang
    ) {
      parser.parse();


      var identifyTask, identifyParams;
      var popup = new Popup({
        fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
      }, domConstruct.create("div"));


      map = new Map("map", {
        basemap: "dark-gray",
        center: [-83.2456, 42.5836],
        zoom: 14,
        infoWindow: popup
      });
      map.on("load", mapReady);
      var stateLayerURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
      map.addLayer(new ArcGISDynamicMapServiceLayer(stateLayerURL, {
        opacity: 0.55
      }));


      function mapReady() {
        on(dom.byId("identifyMe"), "click", function (evt) {
          map.graphics.clear();
          map.hideZoomSlider();
          map.infoWindow.hide();
          toolbar.activate(Draw.POLYGON);
        });


        //create identify tasks and setup parameters
        identifyTask = new IdentifyTask(stateLayerURL);
        identifyParams = new IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
        identifyParams.layerIds = [0, 2];
        identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_TOP;
        identifyParams.width = map.width;
        identifyParams.height = map.height;


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


      function addToMap(evt) {
        var symbol;
        toolbar.deactivate();
        dom.byId("identifyMe").blur();
        map.showZoomSlider();
        symbol = new SimpleFillSymbol();
        map.graphics.add(new Graphic(evt.geometry, symbol));
        identifyParams.geometry = evt.geometry;
        executeIdentifyTask();
      }


      function executeIdentifyTask() {
        identifyParams.mapExtent = map.extent;
        var deferred = identifyTask.execute(identifyParams).addCallback(lang.hitch(this, function (response) {
          // response is an array of identify result objects
          // Let's return an array of features.
          return arrayUtils.map(response, function (result) {
            var feature = result.feature;
            var layerName = result.layerName;
            feature.attributes.layerName = layerName;
            var infoTemplate = new InfoTemplate("Attributes", "${*}");
            feature.setInfoTemplate(infoTemplate);
            return feature;
          });
        }));
        map.infoWindow.clearFeatures();
        map.infoWindow.setFeatures([deferred]);
        map.infoWindow.show(identifyParams.geometry.getCentroid());
      }
    });
  </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" id="identifyMe">Polygon</button>
    </div>
    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div id="map"></div>
    </div>
  </div>
</body>


</html>

View solution in original post

RobertScheitlin__GISP · ‎03-10-2016

Joan,

Here is a sample:

<!DOCTYPE html>
<html>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--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>Identify with Popup</title>


  <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/nihilo/nihilo.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;
    }


    #map {
      height: 100%;
      width: 100%;
      margin: 0;
    }
  </style>
  <script src="http://js.arcgis.com/3.16/"></script>
  <script>
    var map, identifyListener, toolbar;


    require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/dijit/InfoWindow",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/toolbars/draw",
        "esri/dijit/Popup",
        "dojo/_base/array",
        "esri/graphic",
        "esri/Color",
        "dojo/dom-construct",
        "dojo/dom",
        "dojo/on",
        "dojo/parser",
        "dojo/_base/lang",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/form/Button",
        "dojo/domReady!"
      ], function (
      Map, FeatureLayer, InfoWindow, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
      SimpleLineSymbol, IdentifyTask, IdentifyParameters, Draw, Popup,
      arrayUtils, Graphic, Color, domConstruct, dom, on, parser, lang
    ) {
      parser.parse();


      var identifyTask, identifyParams;
      var popup = new Popup({
        fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
      }, domConstruct.create("div"));


      map = new Map("map", {
        basemap: "dark-gray",
        center: [-83.2456, 42.5836],
        zoom: 14,
        infoWindow: popup
      });
      map.on("load", mapReady);
      var stateLayerURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
      map.addLayer(new ArcGISDynamicMapServiceLayer(stateLayerURL, {
        opacity: 0.55
      }));


      function mapReady() {
        on(dom.byId("identifyMe"), "click", function (evt) {
          map.graphics.clear();
          map.hideZoomSlider();
          map.infoWindow.hide();
          toolbar.activate(Draw.POLYGON);
        });


        //create identify tasks and setup parameters
        identifyTask = new IdentifyTask(stateLayerURL);
        identifyParams = new IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
        identifyParams.layerIds = [0, 2];
        identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_TOP;
        identifyParams.width = map.width;
        identifyParams.height = map.height;


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


      function addToMap(evt) {
        var symbol;
        toolbar.deactivate();
        dom.byId("identifyMe").blur();
        map.showZoomSlider();
        symbol = new SimpleFillSymbol();
        map.graphics.add(new Graphic(evt.geometry, symbol));
        identifyParams.geometry = evt.geometry;
        executeIdentifyTask();
      }


      function executeIdentifyTask() {
        identifyParams.mapExtent = map.extent;
        var deferred = identifyTask.execute(identifyParams).addCallback(lang.hitch(this, function (response) {
          // response is an array of identify result objects
          // Let's return an array of features.
          return arrayUtils.map(response, function (result) {
            var feature = result.feature;
            var layerName = result.layerName;
            feature.attributes.layerName = layerName;
            var infoTemplate = new InfoTemplate("Attributes", "${*}");
            feature.setInfoTemplate(infoTemplate);
            return feature;
          });
        }));
        map.infoWindow.clearFeatures();
        map.infoWindow.setFeatures([deferred]);
        map.infoWindow.show(identifyParams.geometry.getCentroid());
      }
    });
  </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" id="identifyMe">Polygon</button>
    </div>
    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div id="map"></div>
    </div>
  </div>
</body>


</html>

JoanSteinbacher · ‎03-14-2016

Thanks, Robert! That helped a lot -- I was able to incorporate what you provided into my custom code. Appreciate your time in responding.

Joan