Buffer a Selected Polygon

ChrisSergent · ‎01-03-2012

Here is a link to a screen recording demonstrating what I would like the code to do: http://youtu.be/mjQZXnEu1Us

Attached is the HTML document used in the recording.

The following is the code that I have written. I click on the map and it selects a polygon. From there, I want it to buffer the polygon 500 feet. Any thoughts on what is wrong with my code?

<!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>QueryTask with query geometry from another task</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>

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


        // Why is there no dojo.require for esri.layers.agstiled

        var map, gsvc;
        /* Initialize map, buffer, & query params */
        function init() {

            var startExtent = new esri.geometry.Extent({ "xmin": 811441.60, "ymin": 1161615.62, "xmax": 817087.15, "ymax": 1165379.33, "spatialReference": { "wkid": 3435} });
            //var startExtent = new esri.geometry.Extent({ "xmin": 778733.96207758, "ymin": 1133387.86320644, "xmax": 849794.792685476, "ymax": 1193607.08672764, "spatialReference": { "wkid": 3435} });
            map = new esri.Map("mapDiv", { extent: startExtent });
            //listen for when map is loaded and then add query functionality
            dojo.connect(map, "onLoad", initFunctionality);

            var streetMap = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/ArcGIS/rest/services/InternetVector/MapServer");
            map.addLayer(streetMap);

            gsvc = new esri.tasks.GeometryService("http://maps.decaturil.gov/ArcGIS/rest/services/Geometry/GeometryServer");

            dojo.connect(map, "onExtentChange", showExtent);
        }


        function initFunctionality(map) {
            var queryTask = new esri.tasks.QueryTask("http://maps.decaturil.gov/ArcGIS/rest/services/InternetVector/MapServer/6");

            //identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
            //If this null or not available the buffer operation will not work. Otherwise it will do a http post to the proxy.
            esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
            esri.config.defaults.io.alwaysUseProxy = false;

            // Query for polygon excerpt
            // http://help.arcgis.com/en/webapi/javascript/arcgis/demos/query/query_bypoly.html
            // Query
            var query = new esri.tasks.Query();
            query.returnGeometry = true;
            query.outSpatialReference = { "wkid": 3435 };

            // Set the current click event to nothing
            var currentClick = null;
            // +++++Listen for map onClick event+++++
            // Fire the onClick event when the map is clicked; evt is the point on the map
            dojo.connect(map, "onClick", function (evt) {
                // Clear any graphics currently on the map
                map.graphics.clear();
                // Set the current click as the geometry to be queried and set the geometry to be queried as the point on the map that wa clicked
                currentClick = query.geometry = evt.mapPoint;
                // Set the query to determine a spatial intersect
                query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
                // Determine what polygon, based on the geometry service above intersects with the point clicked on the map
                queryTask.execute(query);

            });

            // Set the graphic to be drawn to nothing
            firstGraphic = null;
            // +++++Listen for QueryTask onComplete event+++++
            // Fire off this function once the queryTask has completed
            dojo.connect(queryTask, "onComplete", function (graphics) {
                // Set the graphic to the polygon geometry returned in the spatial intersects query
                var firstGraphic = graphics.features[0];
                // Define the symbology for the polygon that will be displayed
                var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98, 194, 204]), 2), new dojo.Color([255, 0, 0, 0]));
                // Set the polygon to be equal to the defined symbol
                firstGraphic.setSymbol(symbol);

                // Add the polygon to the map
                map.graphics.add(firstGraphic);

                alert("I will attempt to run the buffer task.");
                // Buffer polygon
                doBuffer();

            });

        }

        // Custom Buffer Sample
        // http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/util_buffergraphic.html#
        function doBuffer(geometry) {

            alert("I will attempt to set the parameters for the buffer.");
            // Set up buffer parameters
            var params = new esri.tasks.BufferParameters();

            params.distances = 500;
            params.bufferSpatialReference = new esri.SpatialReference({ wkid: 3435 });
            params.outSpatialReference = map.spatialReference;
            params.unit = esri.tasks.GeometryService.UNIT_FOOT;

            gsvc.simplify([geometry], function (geometries) {
                params.geometries = geometries;
                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([255, 0, 0, 0.65]), 2
                ),
                new dojo.Color([255, 0, 0, 0, 0.35])
            );

            dojo.forEach(geometries, function (geometry) {
                var graphic = new esri.Graphic(geometry, symbol);
                map.graphics.add(graphic);
            });

        }

        function showExtent(extent) {
            var s = "";
            s = "XMin: " + extent.xmin.toFixed(2) + " "
               + "YMin: " + extent.ymin.toFixed(2) + " "
               + "XMax: " + extent.xmax.toFixed(2) + " "
               + "YMax: " + extent.ymax.toFixed(2);
            dojo.byId("info").innerHTML = s;
        }

        dojo.addOnLoad(init);
    </script>
</head>

<body class="claro">
    <div id="mapDiv" style="width: 900px; height:600px; border:1px solid #000;"></div>
    <div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>

</body>
</html>

Thanks again.

Chris S.

DanielWebb2 · ‎08-06-2014

Hi Chris. This post is 2 years old but I was wondering if you ever figured it out. This is exactly what I'm wanting to do too.

JakeSkinner · ‎08-06-2014

Hi Daniel,

Here is an example on how to do this:

<!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.8/js/esri/css/esri.css">

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

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      var map, tb, polygon;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/graphic", "esri/tasks/GeometryService",
        "esri/tasks/BufferParameters",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color",
        "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, Graphic, GeometryService,
        BufferParameters,
        SimpleFillSymbol, SimpleLineSymbol, Color,
        dom, on, array
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-81.792107, 26.150807],
          zoom: 8
        }); 
        
        gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");       

        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", {
            mode: FeatureLayer.MODE_ONDEMAND
        })
        
        map.addLayers([featureLayer]);    
        
        var highlightSymbol = new SimpleFillSymbol(
                  SimpleFillSymbol.STYLE_SOLID,
                  new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([255, 0, 0]), 1),
                  new Color([125, 125, 125, 0.35])
                );
                
        featureLayer.on("click", function (evt) {
            var geom = evt.graphic.geometry;
            map.graphics.clear();
            var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol);
            map.graphics.add(highlightGraphic); 
                         
            var params = new BufferParameters();
            params.geometries = [geom];
      
            //buffer in linear units such as meters, km, miles etc.
            params.distances = [5000];          
            params.unit = GeometryService.UNIT_FOOT;
            params.outSpatialReference = map.spatialReference; 
            gsvc.buffer(params, showBuffer);
              
        })  
        
        function showBuffer(geometries) {
          var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([0,0,255,0.65]), 2
            ),
            new Color([0,0,255,0.35])
          );
    
          array.forEach(geometries, function(geometry) {
            var graphic = new Graphic(geometry,symbol);
            map.graphics.add(graphic);    
            map.setExtent(map.graphics.graphics[0]._extent, true);           
          });                      
        }   

      });
    </script>
  </head>
  
  <body>
    
    <div id="mapDiv"></div>

  </body>
</html>

DanielWebb2 · ‎08-08-2014

Cool thanks! That gets me started on what I want to do.