topic Re: Buffer a specified point in ArcGIS JavaScript Maps SDK Questions

Buffer a specified point

JialingLau — Thu, 31 May 2012 04:50:02 GMT

Hi all, is it possible to buffer a user-input coordinates for 1 kilometer? I have been figuring it for one week but then I can't seem to get it work.

Thanks 😄

Re: Buffer a specified point

Anonymous User — Thu, 31 May 2012 13:42:07 GMT

Hi JoZy, have you seen this sample?

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/util_buffer.html

Is it similar to what you're trying to do?

Re: Buffer a specified point

JialingLau — Thu, 31 May 2012 23:55:08 GMT

Hi Chris,

This is almost similar to what I want... But I would want the user to be able to input their own coordinates rather than clicking on the map to let the buffer work...
Can i change the params.geometries = [ evt.mapPoint ] to params.geometries = [ point ], will it be able to work ?

Thanks 😄

Re: Buffer a specified point

SrikanthNarra — Fri, 01 Jun 2012 03:29:52 GMT

Hi JoZy,

If you want to buffer a specified point please follow the steps

1) First read the user entered X,Y values.
2) Now create a MapPoint with the X,Y values that you already have with you.
3) params.geometries = <"Now give your MapPoint here">

Hope this will solve your problem.May this help you if not revert me always welcome for queries.

N.Srikanth
9160238813

Re: Buffer a specified point

JialingLau — Fri, 01 Jun 2012 04:32:35 GMT

Hi srikanthgkp463,

thanks for your reply! But how do i create a mapPoint with the input values?

var x = document.getElementById("x").value
var y = document.getElementById("y").value
var mapPoint = x, y;
var params = new esri.tasks.BufferParameters();
params.geometries = [ mapPoint ];

Is it something like that?

Thanks 😄

Re: Buffer a specified point

SrikanthNarra — Fri, 01 Jun 2012 05:03:09 GMT

Hi JoZy,
In ArcGIS Silvrlight api we have MapPoint Class but in ArcGIS api for Javascript we don't have mapPoint class.But point class is there in ArcGIS api for Javascript this will accomplish your job .

var point = new esri.geometry.Point( {"x": -122.65, "y": 45.53," spatialReference": {" wkid": 4326 } });
params.geometries = [ point ];

Mr.JoZy your are from which part of world,I am from INDIA

Re: Buffer a specified point

JialingLau — Fri, 01 Jun 2012 05:34:23 GMT

Hi srikanthgkp463,

The methods that you have given, actually I have tested it out and it doesn't work...

This is my coding based on the sample, i have only made changes to the params.geometries:
<!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,IE=9" />
    
   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Buffer</title>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8" type="text/javascript"></script>

<script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("esri.tasks.geometry");

    var map = null;
    var gsvc = null;

    function initialize() {
      map = new esri.Map("map");
      var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
      map.addLayer(layer);
      map.setExtent(esri.geometry.geographicToWebMercator(new esri.geometry.Extent(-97.76, 32.32, -96.11, 33.42, new esri.SpatialReference({wkid: 4326}))));

      gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      dojo.connect(map, "onClick", doBuffer);
    }

    function doBuffer() {
        map.graphics.clear();
      var point = new esri.geometry.Point( {"x": -122.65, "y": 45.53," spatialReference": {" wkid": 4326 } });
      var params = new esri.tasks.BufferParameters();
      params.geometries = [ point ];

      //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.addOnLoad(initialize);
</script>

</head>

<body class="claro">
<table style="width:515px">
<tr>
<td>Click a location on the map to buffer. Click again on another location to buffer again.
<div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
</td>
</tr>
</table>
</body>
</html>

I do not know which part is causing the buffer to not work...

Thanks alot and i am from Singapore. 🙂

Re: Buffer a specified point

SrikanthNarra — Fri, 01 Jun 2012 09:29:04 GMT

Hi JoZy,

Please have a look at this Program may this help you

<!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" />
<title>Buffer</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
<script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.geometry");
      dojo.require("esri.toolbars.draw");

      var map, gsvc, tb;

      function initialize() {
          var startExtent = new esri.geometry.Extent(-117.125, 36.672, -105.875, 42.297, new esri.SpatialReference({ wkid: 4326 }));
          map = new esri.Map("map", { extent: startExtent });
          dojo.connect(map, "onLoad", initToolbar);

          var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
          map.addLayer(layer);
          gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");

          esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
          esriConfig.defaults.io.alwaysUseProxy = false;
      }

      function initToolbar(map) {
          tb = new esri.toolbars.Draw(map);
          dojo.connect(tb, "onDrawEnd", doBuffer);
      }

      function doBuffer(geometry) {
          switch (geometry.type) {
              case "point":
                  var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                  break;
              case "polyline":
                  var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
                  break;
              case "polygon":
                  var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
                  break;
          }

          var graphic = new esri.Graphic(geometry, symbol);
          map.graphics.add(graphic);

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

          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.BufferParameters." + dojo.byId("unit").value);

          if (geometry.type === "polygon") {
              //if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct.
              gsvc.simplify([graphic], function (graphics) {
                  params.features = graphics;
                  gsvc.buffer(params, function (features) {
                      showBuffer(features);
                  });
              });
          } else {
              params.features = [graphic];
              gsvc.buffer(params, function (features) {
                  showBuffer(features);
              });
          }
      }

      function showBuffer(features) {
          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])
      );

          for (var j = 0, jl = features.length; j < jl; j++) {
              features.setSymbol(symbol);
              map.graphics.add(features);
          }
          tb.deactivate();
          map.showZoomSlider();
      }

      dojo.addOnLoad(initialize);
</script>

</head>

<body class="tundra">
<b>Pick a tool and draw on the map. The drawn graphic will be buffered based on the parameters specified below. The in and out Spatial Reference is WKID:4326.</b><br/>

<button onclick="tb.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();">Line</button>
<button onclick="tb.activate(esri.toolbars.Draw.POLYLINE);map.hideZoomSlider();">Polyline</button>
<button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);map.hideZoomSlider();">Freehand Polyline</button>
<button onclick="tb.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();">Polygon</button>
<button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);map.hideZoomSlider();">Freehand Polygon</button>

<div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
Buffer Spatial Reference WKID: <input type="text" id="bufferSpatialReference" size="5" value="32612" />
Buffer Distance: <input type="text" id="distance" size="10" value="25" />
<select id="unit">
    <option value="UNIT_STATUTE_MILE">Miles</option>
    <option value="UNIT_FOOT">Feet</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>
<input type="button" value="Clear Graphics" onclick="map.graphics.clear();" />
</body>

</html>

Re: Buffer a specified point

JialingLau — Mon, 04 Jun 2012 02:14:48 GMT

Hi srikanthgkp463,

this is basically what i wanted.. but i would want the user to input the values of the coordinates instead of drawing it out... For example: a person enter the x and y coordinates of the point that he want to buffer..

Thanks 😄