csergent08

Buffer a Selected Polygon

Discussion created by csergent08 Champion on Jan 3, 2012
Latest reply on Aug 8, 2014 by danwebb
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" />
    <!--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>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.

Attachments

Outcomes