Hello all,

bharathreddy · ‎02-15-2016

i would like to select distance in textbox and buffer with query in arcgis javascript iam using arcgis 10.1 post the code if anybody have

bharathreddy · ‎02-16-2016

Thank u I have solved it

<!DOCTYPE html>

<html>

<head>

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

on iOS devices-->

<title>Select with feature layer</title>

<style>

html, body, {

padding:0;

margin:0;

height:100%;

}

#messages{

position:absolute;

top:10px;

right:20px;

padding: 6px;

background-color: #ccc;

border-radius: 4px;

border: solid 1px #333;

z-index:99;

max-width: 150px;

}

html, body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

overflow:hidden;

}

#leftPane{

color:#000;

width:250px;

padding-bottom:15px;

}

#map{

padding:0;

}

.details{

font-size:14px;

font-weight:600;

padding-bottom:20px;

}

.ddl

{font-family:Verdana;

font-size:11px;

color:#666666;

font-weight:normal;

height:20px;

width:100px;

}

.inputtxtbox

{font-family:Verdana;

font-size:11px;

color:#666666;

font-weight:normal;

height:18px;

width:60px;

}

</style>

dojo.require("esri.map");

dojo.require("dijit.layout.BorderContainer");

dojo.require("dijit.layout.ContentPane");

dojo.require("esri.tasks.query");

dojo.require("esri.tasks.geometry");

dojo.require("esri.layers.FeatureLayer");

var map,tb;

function init() {

//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.

esri.config.defaults.io.proxyUrl = "/proxy";

map = new esri.Map("mapDiv", {

// basemap: "streets",

center: [-95.249, 38.954],

zoom: 14

});

// dojo.connect(map, "onLoad", initToolbar);

landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("your url", { opacity: 5.55 });

map.addLayer(landBaseLayer);

//add the census block points in selection mode. Note that an info template has been defined so when

//selected features are clicked a popup window will appear displaying the content defined in the info template.

var featureLayer = new esri.layers.FeatureLayer("feature layer url@", {

});

//define a selection symbol that will be used to draw the selected census block points within the buffer polygon

// var symbol = new esri.symbol.SimpleMarkerSymbol(

// esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12,

// new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL,

// new dojo.Color([247, 34, 101, 0.9]), 1),

// new dojo.Color([207, 34, 171, 0.5])

// );

var symbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0]));

featureLayer.setSelectionSymbol(symbol);

map.addLayer(featureLayer);

//Define the geometry service that will be used to perform the buffer.

var geometryService = new esri.tasks.GeometryService("geometry server url");

//when the map is clicked create a buffer around the click point of the specified distance.

map.on("click", function (evt) {

debugger;

var params = new esri.tasks.BufferParameters();

params.geometries = [evt.mapPoint];

params.distances = [dojo.byId("distance").value];

params.bufferSpatialReference = new esri.SpatialReference({ wkid: dojo.byId("bufferSpatialReference").value });

params.outSpatialReference = map.spatialReference;

params.unit = eval("esri.tasks.GeometryService." + dojo.byId("unit").value);

geometryService.buffer(params);

});

geometryService.on("buffer-complete", function (result) {

debugger;

map.graphics.clear();

//draw the buffer geometry on the map as a map graphic

var symbol = new esri.symbol.SimpleFillSymbol(

esri.symbol.SimpleFillSymbol.STYLE_SOLID,

new esri.symbol.SimpleLineSymbol(

esri.symbol.SimpleLineSymbol.STYLE_SOLID,

new dojo.Color([255, 0, 0, 0.65]), 2

),

new dojo.Color([255, 0, 0, 0.35])

);

// var symbol = new esri.symbol.SimpleFillSymbol(

// esri.symbol.SimpleFillSymbol.STYLE_NULL,

// new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,

// new dojo.Color([105, 105, 105]), 2), new dojo.Color([255, 255, 0, 0.25])

// );

var bufferGeometry = result.geometries[0]

var graphic = new esri.Graphic(bufferGeometry, symbol);

map.graphics.add(graphic);

//Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic

//as the selection geometry.

var query = new esri.tasks.Query();

query.geometry = bufferGeometry;

featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (results) {

debugger;

var totalPopulation = sumPopulation(results);

var r = "";

r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";

dojo.byId('messages').innerHTML = r;

});

}

function sumPopulation(features) {

debugger;

var popTotal = 0;

for (var x = 0; x < features.length; x++) {

popTotal = popTotal + features.attributes['OBJECTID'];

}

return popTotal;

alert(OBJECTID);

console.log(popTotal);

}

dojo.ready(init);

</script>

</head>

<div data-dojo-type="dijit.layout.BorderContainer"

data-dojo-props="gutters:'true', design:'sidebar'"

style="width:100%;height>:100%;"

<div id="leftPane"

data-dojo-type="dijit.layout.ContentPane"

data-dojo-props="region:'left'">

<tr>

<b>Buffer Parameters</b> </td>

Spatial Reference WKID: <input type="text" id="bufferSpatialReference" value="32644" class="inputtxtbox" />

Distance: <input type="text" id="distance" class="inputtxtbox" />

<option value="UNIT_STATUTE_MILE">Miles</option>

<option value="UNIT_KILOMETER">Kilometers</option>

<option value="UNIT_METER">Meters</option>

<option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>

<option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>

<option value="UNIT_DEGREE">Degrees</option>

</select>

</td>

<button data-dojo-type="dijit.form.Button" type="button" onclick="map.graphics.clear();">Clear Graphics</button>

</td>

</tr>

</table>

</div>

<%-- <div id="mapDiv" style="height:100%; width:100%"></div>

--%>

</div>

</body>

</html>

View solution in original post

KenBuja · ‎02-16-2016

To get better answers, you should put your question in an appropriate space and add some tags. I have moved it to the ArcGIS API for JavaScript space for you and added tags.

There are some good samples to help you out. Take a look at this sample that uses a value from a text box to create a buffered feature. Then you can use that feature in a Query. There are a lot of examples on here with a quick search.

bharathreddy · ‎02-16-2016

Thank u I have solved it

<!DOCTYPE html>

<html>

<head>

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

on iOS devices-->

<title>Select with feature layer</title>

<style>

html, body, {

padding:0;

margin:0;

height:100%;

}

#messages{

position:absolute;

top:10px;

right:20px;

padding: 6px;

background-color: #ccc;

border-radius: 4px;

border: solid 1px #333;

z-index:99;

max-width: 150px;

}

html, body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

overflow:hidden;

}

#leftPane{

color:#000;

width:250px;

padding-bottom:15px;

}

#map{

padding:0;

}

.details{

font-size:14px;

font-weight:600;

padding-bottom:20px;

}

.ddl

{font-family:Verdana;

font-size:11px;

color:#666666;

font-weight:normal;

height:20px;

width:100px;

}

.inputtxtbox

{font-family:Verdana;

font-size:11px;

color:#666666;

font-weight:normal;

height:18px;

width:60px;

}

</style>

dojo.require("esri.map");

dojo.require("dijit.layout.BorderContainer");

dojo.require("dijit.layout.ContentPane");

dojo.require("esri.tasks.query");

dojo.require("esri.tasks.geometry");

dojo.require("esri.layers.FeatureLayer");

var map,tb;

function init() {

//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.

esri.config.defaults.io.proxyUrl = "/proxy";

map = new esri.Map("mapDiv", {

// basemap: "streets",

center: [-95.249, 38.954],

zoom: 14

});

// dojo.connect(map, "onLoad", initToolbar);

landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("your url", { opacity: 5.55 });

map.addLayer(landBaseLayer);

//add the census block points in selection mode. Note that an info template has been defined so when

//selected features are clicked a popup window will appear displaying the content defined in the info template.

var featureLayer = new esri.layers.FeatureLayer("feature layer url@", {

});

//define a selection symbol that will be used to draw the selected census block points within the buffer polygon

// var symbol = new esri.symbol.SimpleMarkerSymbol(

// esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12,

// new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL,

// new dojo.Color([247, 34, 101, 0.9]), 1),

// new dojo.Color([207, 34, 171, 0.5])

// );

var symbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0]));

featureLayer.setSelectionSymbol(symbol);

map.addLayer(featureLayer);

//Define the geometry service that will be used to perform the buffer.

var geometryService = new esri.tasks.GeometryService("geometry server url");

//when the map is clicked create a buffer around the click point of the specified distance.

map.on("click", function (evt) {

debugger;

var params = new esri.tasks.BufferParameters();

params.geometries = [evt.mapPoint];

params.distances = [dojo.byId("distance").value];

params.bufferSpatialReference = new esri.SpatialReference({ wkid: dojo.byId("bufferSpatialReference").value });

params.outSpatialReference = map.spatialReference;

params.unit = eval("esri.tasks.GeometryService." + dojo.byId("unit").value);

geometryService.buffer(params);

});

geometryService.on("buffer-complete", function (result) {

debugger;

map.graphics.clear();

//draw the buffer geometry on the map as a map graphic

var symbol = new esri.symbol.SimpleFillSymbol(

esri.symbol.SimpleFillSymbol.STYLE_SOLID,

new esri.symbol.SimpleLineSymbol(

esri.symbol.SimpleLineSymbol.STYLE_SOLID,

new dojo.Color([255, 0, 0, 0.65]), 2

),

new dojo.Color([255, 0, 0, 0.35])

);

// var symbol = new esri.symbol.SimpleFillSymbol(

// esri.symbol.SimpleFillSymbol.STYLE_NULL,

// new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,

// new dojo.Color([105, 105, 105]), 2), new dojo.Color([255, 255, 0, 0.25])

// );

var bufferGeometry = result.geometries[0]

var graphic = new esri.Graphic(bufferGeometry, symbol);

map.graphics.add(graphic);

//Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic

//as the selection geometry.

var query = new esri.tasks.Query();

query.geometry = bufferGeometry;

featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (results) {

debugger;

var totalPopulation = sumPopulation(results);

var r = "";

r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";

dojo.byId('messages').innerHTML = r;

});

}

function sumPopulation(features) {

debugger;

var popTotal = 0;

for (var x = 0; x < features.length; x++) {

popTotal = popTotal + features.attributes['OBJECTID'];

}

return popTotal;

alert(OBJECTID);

console.log(popTotal);

}

dojo.ready(init);

</script>

</head>

<div data-dojo-type="dijit.layout.BorderContainer"

data-dojo-props="gutters:'true', design:'sidebar'"

style="width:100%;height>:100%;"

<div id="leftPane"

data-dojo-type="dijit.layout.ContentPane"

data-dojo-props="region:'left'">

<tr>

<b>Buffer Parameters</b> </td>

Spatial Reference WKID: <input type="text" id="bufferSpatialReference" value="32644" class="inputtxtbox" />

Distance: <input type="text" id="distance" class="inputtxtbox" />

<option value="UNIT_STATUTE_MILE">Miles</option>

<option value="UNIT_KILOMETER">Kilometers</option>

<option value="UNIT_METER">Meters</option>

<option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>

<option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>

<option value="UNIT_DEGREE">Degrees</option>

</select>

</td>

<button data-dojo-type="dijit.form.Button" type="button" onclick="map.graphics.clear();">Clear Graphics</button>

</td>

</tr>

</table>

</div>

<%-- <div id="mapDiv" style="height:100%; width:100%"></div>

--%>

</div>

</body>

</html>