Buffer a specified point

Discussion created by jozy on May 30, 2012
Latest reply on Jun 3, 2012 by jozy

Like • Show 0 Likes0
Comment • 8

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 :D

Outcomes

8 Replies

CMahlke-esristaff May 31, 2012 6:42 AM
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?
Like • Show 0 Likes0
Actions
jozy May 31, 2012 4:55 PM
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 :D
Like • Show 0 Likes0
Actions
srikanthgkp463 May 31, 2012 8:29 PM
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
Like • Show 0 Likes0
Actions
jozy May 31, 2012 9:32 PM
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 :D
Like • Show 0 Likes0
Actions
srikanthgkp463 May 31, 2012 10:03 PM
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
Like • Show 0 Likes0
Actions
jozy May 31, 2012 10:34 PM
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. :)
Like • Show 0 Likes0
Actions
srikanthgkp463 Jun 1, 2012 2:29 AM
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[j].setSymbol(symbol);
              map.graphics.add(features[j]);
          }
          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>
Like • Show 0 Likes0
Actions
jozy Jun 3, 2012 7:14 PM
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 :D
Like • Show 0 Likes0
Actions

GeoNet

The Esri Community

Buffer a specified point

Outcomes

Related Content

Recommended Content