topic Need help activating buffer query with button in ArcGIS JavaScript Maps SDK Questions

Need help activating buffer query with button

JillMaxwell — Fri, 22 Apr 2011 17:20:26 GMT

I have tried a few ways to activate my buffer query with a button, but (being a newbie), I have failed. The buffer I have set up works, but since I'm also going to have an identify button on the page, I need to have the user activate the buffer query with a button as well. Otherwise the buffer will run everytime the user clicks to identify a feature. I know how to toggle an identify task off and on, but I can't figure out how to control the buffer.

Anyhelp would be appreciated.

Here's the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>QueryTask with query geometry from another task</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">

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

var bufferqueryTask;

/*Initialize map, buffer, & query params*/
function init() {
var startExtent = new esri.geometry.Extent({"xmin":-28364141.57017,"ymin":-2803495.15887,"xmax":12597044.415,"ymax":21320884.31716,"spatialReference":{"wkid":3089}});
var map = new esri.Map("mapDiv", {extent:startExtent, wrapAround180:true});
//listen for when map is loaded and then add query functionality
dojo.connect(map, "onLoad", initFunctionality);
dojo.connect(map, "onLoad", function() {
map.disableDoubleClickZoom();
});

//after map loads, connect to listen to mouse move & drag events
          dojo.connect(map, "onMouseMove", showCoordinates);
var streetMap = new esri.layers.ArcGISDynamicMapServiceLayer("http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/PADUS_status/MapServer");
map.addLayer(streetMap);

var gap = new esri.layers.ArcGISDynamicMapServiceLayer("http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/Ancillary/MapServer");
map.addLayer(gap);
}

function initFunctionality(map) {
//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
//If this null or not available the buffer operation will not work. Otherwise it will do a http post to the proxy.
//esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
//esriConfig.defaults.io.alwaysUseProxy = false;
//esriConfig.defaults.io.proxyUrl = "/arcgisserver/proxy/proxy.ashx";
//esriConfig.defaults.io.proxyUrl = "http://www.gap.uidaho.edu/proxy_ags.jsp";
esriConfig.defaults.io.proxyUrl = "http://dingo.gapanalysisprogram.com/proxy/proxy.ashx";
//esri.config.defaults.io.proxyUrl = "http://www.gap.uidaho.edu/proxy.php";

esriConfig.defaults.io.alwaysUseProxy = false;

//Geometry Service Endpoint
var gsvc = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
bufferqueryTask = new esri.tasks.QueryTask("http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/PADUS_status/MapServer/0");

// Query
var bufferquery = new esri.tasks.Query();

// +++++Listen for map onClick event+++++
dojo.connect(map, "onClick", function(evt) {
map.graphics.clear();
var params = new esri.tasks.BufferParameters();
params.geometries = [ evt.mapPoint ];
// Buffer in linear units such as meters, km, miles etc.
params.distances = [ dojo.byId('bufferDistance').value ];
params.unit = esri.tasks.GeometryService.UNIT_STATUTE_MILE;
params.bufferSpatialReference = new esri.SpatialReference({"wkid": 3089});
params.outSpatialReference = new esri.SpatialReference({"wkid": 3089});
gsvc.buffer(params);
dojo.byId('messages').innerHTML = "<b>Creating Buffer Using Geometry Service...</b>";
});

// +++++Listen for GeometryService onBufferComplete event+++++
dojo.connect(gsvc, "onBufferComplete", function(geometries) {
var symbol = new esri.symbol.SimpleFillSymbol("none", new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
var graphic = new esri.Graphic(geometries[0],symbol);
map.graphics.add(graphic);

bufferquery.returnGeometry = true;

bufferquery.outFields = ["P_Des_Nm","P_Loc_Nm","Own_Name","Mang_Name"];
bufferquery.outSpatialReference = map.spatialReference;
bufferquery.geometry = geometries[0];
//query.where = "quadrangle_name='Adairville'"
bufferqueryTask.execute(bufferquery);
dojo.byId('messages').innerHTML = "<b>Executing Query with Result Buffer Geometry...</b>";
});

// +++++Listen for QueryTask executecomplete event+++++
dojo.connect(bufferqueryTask, "onComplete", function(fset) {
//create symbol for selected features
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 infoTemplate = new esri.InfoTemplate("Block: ${BLOCK}", "${*}");
var resultFeatures = fset.features;
for (var i=0, il=resultFeatures.length; i<il; i++) {
console.log(resultFeatures);
var graphic = resultFeatures;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
}
var pareas = returnRecordNums(fset);
var r = "";
r = "<b>The protected areas within the buffer are <i>" + pareas + "</i>.</b>";
dojo.byId('messages').innerHTML = r;
});
}

function returnRecordNums(fset){

var features = fset.features;
var pas = "";
for (var x = 0; x < features.length; x++) {
pas = pas + ", " + features.attributes['P_Des_Nm'];
}
return pas;
}

function showCoordinates(evt) {
        //get mapPoint from event
        var mp = evt.mapPoint;
        //display mouse coordinates
        dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
      }
dojo.addOnLoad(init);
</script>
</head>

<body class="claro">
Zoom to area and click on map to select protected areas within the buffered circle.<br/>
Buffer distance (in miles): <input type="text" id="bufferDistance" value="1" size="5" onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()"/>
   <form action="">
      Buffer distance :
      <input type="text" id="bufferDistance" value="1" />
      <input type="button" value="Get Details"
onclick="execute(dojo.byId('b').value);" />
    </form>

<div id="job"></div>
<div id="mapDiv" style="width: 850px; height:500px; position:relative;">
        <span id="info" style="position:absolute; right:25px; bottom:5px; color:#000; z-index:50;"></span>
   </div>

<span id="messages"></span>
</body>
</html>

Re: Need help activating buffer query with button

HemingZhu — Fri, 22 Apr 2011 18:49:41 GMT

I have tried a few ways to activate my buffer query with a button, but (being a newbie), I have failed. The buffer I have set up works, but since I'm also going to have an identify button on the page, I need to have the user activate the buffer query with a button as well. Otherwise the buffer will run everytime the user clicks to identify a feature. I know how to toggle an identify task off and on, but I can't figure out how to control the buffer.

Anyhelp would be appreciated.

Here's the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>QueryTask with query geometry from another task</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">

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

var bufferqueryTask;

/*Initialize map, buffer, & query params*/
function init() {
var startExtent = new esri.geometry.Extent({"xmin":-28364141.57017,"ymin":-2803495.15887,"xmax":12597044.415,"ymax":21320884.31716,"spatialReference":{"wkid":3089}});
var map = new esri.Map("mapDiv", {extent:startExtent, wrapAround180:true});
//listen for when map is loaded and then add query functionality
dojo.connect(map, "onLoad", initFunctionality);
dojo.connect(map, "onLoad", function() {
map.disableDoubleClickZoom();
});

//after map loads, connect to listen to mouse move & drag events
          dojo.connect(map, "onMouseMove", showCoordinates);
var streetMap = new esri.layers.ArcGISDynamicMapServiceLayer("http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/PADUS_status/MapServer");
map.addLayer(streetMap);

var gap = new esri.layers.ArcGISDynamicMapServiceLayer("http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/Ancillary/MapServer");
map.addLayer(gap);
}

function initFunctionality(map) {
//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
//If this null or not available the buffer operation will not work. Otherwise it will do a http post to the proxy.
//esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
//esriConfig.defaults.io.alwaysUseProxy = false;
//esriConfig.defaults.io.proxyUrl = "/arcgisserver/proxy/proxy.ashx";
//esriConfig.defaults.io.proxyUrl = "http://www.gap.uidaho.edu/proxy_ags.jsp";
esriConfig.defaults.io.proxyUrl = "http://dingo.gapanalysisprogram.com/proxy/proxy.ashx";
//esri.config.defaults.io.proxyUrl = "http://www.gap.uidaho.edu/proxy.php";

esriConfig.defaults.io.alwaysUseProxy = false;

//Geometry Service Endpoint
var gsvc = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
bufferqueryTask = new esri.tasks.QueryTask("http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/PADUS_status/MapServer/0");

// Query
var bufferquery = new esri.tasks.Query();

// +++++Listen for map onClick event+++++
dojo.connect(map, "onClick", function(evt) {
map.graphics.clear();
var params = new esri.tasks.BufferParameters();
params.geometries = [ evt.mapPoint ];
// Buffer in linear units such as meters, km, miles etc.
params.distances = [ dojo.byId('bufferDistance').value ];
params.unit = esri.tasks.GeometryService.UNIT_STATUTE_MILE;
params.bufferSpatialReference = new esri.SpatialReference({"wkid": 3089});
params.outSpatialReference = new esri.SpatialReference({"wkid": 3089});
gsvc.buffer(params);
dojo.byId('messages').innerHTML = "<b>Creating Buffer Using Geometry Service...</b>";
});

// +++++Listen for GeometryService onBufferComplete event+++++
dojo.connect(gsvc, "onBufferComplete", function(geometries) {
var symbol = new esri.symbol.SimpleFillSymbol("none", new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
var graphic = new esri.Graphic(geometries[0],symbol);
map.graphics.add(graphic);

bufferquery.returnGeometry = true;

bufferquery.outFields = ["P_Des_Nm","P_Loc_Nm","Own_Name","Mang_Name"];
bufferquery.outSpatialReference = map.spatialReference;
bufferquery.geometry = geometries[0];
//query.where = "quadrangle_name='Adairville'"
bufferqueryTask.execute(bufferquery);
dojo.byId('messages').innerHTML = "<b>Executing Query with Result Buffer Geometry...</b>";
});

// +++++Listen for QueryTask executecomplete event+++++
dojo.connect(bufferqueryTask, "onComplete", function(fset) {
//create symbol for selected features
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 infoTemplate = new esri.InfoTemplate("Block: ${BLOCK}", "${*}");
var resultFeatures = fset.features;
for (var i=0, il=resultFeatures.length; i<il; i++) {
console.log(resultFeatures);
var graphic = resultFeatures;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
}
var pareas = returnRecordNums(fset);
var r = "";
r = "<b>The protected areas within the buffer are <i>" + pareas + "</i>.</b>";
dojo.byId('messages').innerHTML = r;
});
}

function returnRecordNums(fset){

var features = fset.features;
var pas = "";
for (var x = 0; x < features.length; x++) {
pas = pas + ", " + features.attributes['P_Des_Nm'];
}
return pas;
}

function showCoordinates(evt) {
        //get mapPoint from event
        var mp = evt.mapPoint;
        //display mouse coordinates
        dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
      }
dojo.addOnLoad(init);
</script>
</head>

<body class="claro">
Zoom to area and click on map to select protected areas within the buffered circle.<br/>
Buffer distance (in miles): <input type="text" id="bufferDistance" value="1" size="5" onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()"/>
   <form action="">
      Buffer distance :
      <input type="text" id="bufferDistance" value="1" />
      <input type="button" value="Get Details"
onclick="execute(dojo.byId('b').value);" />
    </form>

<div id="job"></div>
<div id="mapDiv" style="width: 850px; height:500px; position:relative;">
        <span id="info" style="position:absolute; right:25px; bottom:5px; color:#000; z-index:50;"></span>
   </div>

<span id="messages"></span>
</body>
</html>

The best way to do this is to create a delegate to handle identify and buffer events. Here is how you do it:

//globle variable (could be a boolean, int or string):
var actionMode ="identify"; //default
......

dojo.connect(map, "onClick", doActionAccordingly);
......

function doActionAccordingly(evt)
{
    switch (actionMode)
    {
        case "identify":
           .... identify go here
           break;
        case "bufferQuery":
           .... buffer query goes here
           // remember reset actionMode ="identify" after finish buffer query
           break;
        ........
    }
}
function bufferBtn_onclick()
{
     //set action mode to buffer
    actionMode ="bufferQuery";
}

Hope it will help