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
Solved! Go to Solution.
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>
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>
Thanks, Robert! That helped a lot -- I was able to incorporate what you provided into my custom code. Appreciate your time in responding.
Joan