nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

how do i buffer a point on button click

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

Vind meer berichten getagd met

Accepted answers

All comments

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.