Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample creates buffers around a point that you click on the map. This example just draws the buffers, but the buffers could also be used to perform a task such as returning a list of addresses of people who live within the buffered area.
The buffers are created using an ArcGIS Server geometry service. This type of service is new at ArcGIS Server 9.3 and you can use it for buffering, projecting, and geometry simplification in JavaScript applications. This line creates the geometry service:
gsvc = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");You can use the Services Directory to discover the URL to your own geometry service. Since the service name is required to be Geometry, the URL will be very similar to this one.
Notice that you can use an array of distances to create multiple ring buffers. This example creates buffers of 5 and 10 kilometers. A geodesic buffer is created if the buffer distance is specified in linear units and the buffer spatial reference is set to a geographic coordinate system.
The callback function showBuffer creates a symbol and adds the buffers as graphics on the map. This sample uses the same semi-transparent symbol for both buffers, therefore the inner buffer looks darker than the outer buffer.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Buffer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.tasks.geometry");
var map = null;
var gsvc = null;
function initialize() {
map = new esri.Map("map", {
basemap: "streets-vector",
center: [-96.935, 32.872],
zoom: 9
});
gsvc = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map.on("click", doBuffer);
}
function doBuffer(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 = [ 5, 10 ];
params.unit = esri.tasks.GeometryService.UNIT_KILOMETER;
params.outSpatialReference = map.spatialReference;
gsvc.buffer(params, showBuffer);
}
function showBuffer(geometries) {
var symbol = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([0,0,255,0.65]), 2
),
new dojo.Color([0,0,255,0.35])
);
dojo.forEach(geometries, function(geometry) {
var graphic = new esri.Graphic(geometry,symbol);
map.graphics.add(graphic);
});
}
dojo.ready(initialize);
</script>
</head>
<body class="claro">
<b>Click a location on the map to buffer. Click again on another location to buffer again.</b>
<div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>
</html>