how do i buffer a point on button click

ADITIROY — Mon, 08 Feb 2016 09:34:59 GMT

Hi everyone,

I need to buffer a point on button click instead of map click in ArcGIS JavaScript api. How do I make the make the point buffer on button click?

Thanks,

Aditi

Re: how do i buffer a point on button click

JakeSkinner — Sun, 12 Dec 2021 00:40:32 GMT

Hi Aditi,

Below is an example on how you can buffer a feature using a button:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }

      #button{
        position: absolute;
        top: 50px;
        left: 100px;
        z-index: 5;
      }
    </style>

    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map, graphic;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Point",
        "esri/graphic", "dojo/_base/Color", "esri/symbols/SimpleLineSymbol", "esri/tasks/GeometryService",
        "esri/tasks/BufferParameters", "esri/SpatialReference",
        "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/parser", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, SimpleMarkerSymbol, SimpleFillSymbol, Point,
        Graphic, Color, SimpleLineSymbol, GeometryService,
        BufferParameters, SpatialReference,
        dom, on, array, parser
      ) {

        parser.parse();

        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-81.792107, 26.150807],
          zoom: 8
        });

        gs = new GeometryService("http://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
        });

        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );

        on(featureLayer, "click", function(evt){
            map.graphics.clear();
            xloc = evt.graphic.geometry.x;
            yloc = evt.graphic.geometry.y;
            var pt = new Point(xloc,yloc,map.spatialReference)

            graphic = new Graphic(pt, symbol);
            map.graphics.add(graphic);
        })

        map.addLayer(featureLayer);

        on(dom.byId("buffer"), 'click', function(evt){
            var params = new BufferParameters();
            params.distances = [10];
            params.bufferSpatialReference = map.spatialReference;
            params.outSpatialReference = map.spatialReference;
            params.unit = GeometryService.UNIT_STATUTE_MILE
            console.log(graphic);
            params.geometries = [graphic.geometry];
            console.log(params);
            gs.buffer(params, showBuffer);
        })

        function showBuffer(bufferedGeometries) {
            console.log(bufferedGeometries);
            var symbol = new SimpleFillSymbol("none", new SimpleLineSymbol("dashdot", new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));

            array.forEach(bufferedGeometries, function (geometry) {
                graphic = new Graphic(geometry, symbol);
                map.graphics.add(graphic);
            });
        }

      });
    </script>
  </head>

  <body class='claro'>

    <div id="mapDiv">
        <div id="button">
            <button data-dojo-type="dijit/form/Button" id='buffer'>Buffer</button>
        </div>
    </div>

  </body>
</html>

topic Re: how do i buffer a point on button click in ArcGIS JavaScript Maps SDK Questions

how do i buffer a point on button click

Re: how do i buffer a point on button click