AnsweredAssumed Answered

Buffer tool with parameters

Question asked by jerry0988 on Feb 1, 2016
Latest reply on Feb 2, 2016 by jerry0988

Hi - I've been trying to implement some of the code samples that use the drawing toolbar, along with buffer parameters and query some feature layers. I've seen samples where you can click a point on the map, create a buffer and create a grid, but I can't seem to get mine to work. My click event seems to get mixed up with the Identify.  I've also been trying to write the results to a grid, but I get the following error: Cannot read property 'setStore' of undefined.

I attached my code with some sample services. I think I am somewhat close. Any help is greatly appreciated. Thanks

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

 

<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>Buffertest</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojo/resources/dojo.css" />

    <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/dgrid/css/dgrid.css" />

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css" />

    <style type="text/css">

        html,

        body,

        #map {

            padding: 0;

            margin: 0;

            height: 100%;

        }

 

 

        #rightPane {

            padding: 0;

            width: 420px;

            font-family: "Verdana";

            font-size: "4";

        }

 

 

        .details {

            font-size: 14px;

            font-weight: 600;

            padding-bottom: 20px;

        }

 

 

        button1 {

            margin: 2px;

            cursor: pointer;

        }

 

 

        #search {

            display: block;

            position: absolute;

            z-index: 2;

            top: 20px;

            left: 60px;

        }

 

 

        .esriScalebar {

            padding: 20px 20px;

        }

 

 

        #map {

            padding: 0;

        }

 

 

        .dgrid {

            border: none;

            height: 100%;

        }

 

 

        .dgrid-column-0 {

            width: 35px;

        }

 

 

        .dgrid-row-odd {

            background: #FFFDF3;

        }

 

 

        td div img:hover {

            cursor: pointer;

        }

 

 

        #titlePane {

            width: 240px;

        }

 

 

        .claro .dijitTitlePaneTitle {

            background: #fff;

            font-weight: 600;

            border: none;

            border-bottom: solid 1px #29201A;

            border-top: solid 1px #29201A;

        }

 

 

        .claro .dijitTitlePaneTitleHover {

            background: #eee;

        }

 

 

        .claro .dijitTitlePaneTitleActive {

            background: #808775;

        }

 

 

        .claro .dijitTitlePaneContentOuter {

            border-right: none;

            border-bottom: none;

            border-left: none;

        }

    </style>

    <!--<script>

      var dojoConfig = {

        parseOnLoad: true

      };

    </script>-->

    <script src="http://js.arcgis.com/3.14/"></script>

    <script>

        var map, geocoder, grid, tb;

        require([

            "esri/map", 'esri/dijit/Basemap',

           'esri/dijit/BasemapLayer',

           'esri/geometry/Point',

            "esri/InfoTemplate",

            "esri/dijit/Geocoder",

            "esri/graphic",

            "dojo/query",

            "esri/config",

            "esri/geometry/normalizeUtils",

            "esri/tasks/GeometryService",

            "esri/tasks/BufferParameters",

            "esri/toolbars/draw",

            "dijit/registry",

            "esri/symbols/SimpleLineSymbol",

            "esri/symbols/SimpleFillSymbol",

            "esri/symbols/SimpleMarkerSymbol",

            "esri/renderers/SimpleRenderer",

            "esri/dijit/Measurement",

            "esri/layers/FeatureLayer",

            "esri/dijit/PopupTemplate",

            "esri/request",

            "esri/tasks/query",

            "esri/geometry/Point",

            "esri/graphic",

            "esri/symbols/PictureMarkerSymbol",

            "dojo/on",

            "esri/Color",

            "dojo/_base/array",

            "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",

            "dijit/form/Button",

            "dojo/parser", "dojo/_base/declare", "dojo/dom", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore",

            "dijit/TitlePane", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer",

            "dojo/domReady!"

        ], function (

          Map, Basemap, BasemapLayer, Point,

          InfoTemplate,

          Geocoder,

          Graphic, query, esriConfig, normalizeUtils, GeometryService, BufferParameters, Draw, registry, SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol,

          SimpleRenderer,

          Measurement,

          FeatureLayer,

          PopupTemplate,

          esriRequest,

          Query,

          Point,

          Graphic,

          PictureMarkerSymbol,

          on,

          Color,

          arrayUtils,

          Grid, Selection, Memory,

          Button,

          parser, declare, dom, DataGrid, ItemFileReadStore

        ) {

            parser.parse();

            esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            esriConfig.defaults.io.proxyUrl = "/proxy/";

            esriConfig.defaults.io.alwaysUseProxy = false;

            //Setup button click handlers 

            //Setup button click handlers

            on(dom.byId("clearGraphics"), "click", function () {

                if (map) {

                    map.graphics.clear();

                }

            });

 

 

            var featureLayer;

            map = new Map("map", {

                basemap: "streets",

                center: [-46.807, 32.553],

                zoom: 3

            });

            map.on("load", initOperationalLayer);

            map.on("load", initToolbar);

 

 

            function initOperationalLayer() {

                //Layer that is in Lat, Long Spatial reference 102100

                var infoTemplate = new InfoTemplate();

                var hydrant = new FeatureLayer("http://services1.arcgis.com/ziLNoRgqnICUM0q1/arcgis/rest/services/Hydrants/FeatureServer/0", {

                    mode: FeatureLayer.MODE_ONDEMAND,

                    outFields: ["*"],

                    infoTemplate: infoTemplate

                });

 

 

                //Layer that is NAD83 / UTM zone 15 N Spatial Reference 26915

                var hospital = new FeatureLayer("http://services1.arcgis.com/ziLNoRgqnICUM0q1/ArcGIS/rest/services/Hospitals/FeatureServer/0", {

                    mode: FeatureLayer.MODE_ONDEMAND,

                    outFields: ["*"],

                    infoTemplate: infoTemplate

                });

                var outline = new SimpleLineSymbol()

                  .setColor(Color.fromHex('#fff'));

                var sym = new SimpleFillSymbol()

                  .setColor(new Color([212, 212, 210, 0.3]))

                  .setOutline(outline);

                var renderer = new SimpleRenderer(sym);

                //parcel.setRenderer(renderer);

                //hydrant.maxScale = 20000;

                //hydrant.minScale = 10000;

                //hospital.maxScale = 1000;

                //hospital.minScale = 10000;

                map.addLayer(hydrant);

                map.addLayer(hospital);

            }

 

 

            function initToolbar(evtObj) {

                tb = new Draw(evtObj.map);

                tb.on("draw-end", doBuffer);

                //click handler for the draw tool buttons

                query(".tool").on("click", function (evt) {

                    console.info(evt);

                    if (tb) {

                        tb.activate(evt.target.id);

                    }

                });

            }

 

 

            function doBuffer(evtObj) {

                tb.deactivate();

                var geometry = evtObj.geometry,

                  symbol;

                switch (geometry.type) {

                    case "point":

                        symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));

                        break;

                    case "polyline":

                        symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);

                        break;

                    case "polygon":

                        symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));

                        break;

                }

                var graphic = new Graphic(geometry, symbol);

                map.graphics.add(graphic);

                //setup the buffer parameters

                var params = new BufferParameters();

                params.distances = [dom.byId("distance").value];

                params.outSpatialReference = map.spatialReference;

                params.unit = GeometryService[dom.byId("unit").value];

                //normalize the geometry

                normalizeUtils.normalizeCentralMeridian([geometry]).then(function (normalizedGeometries) {

                    var normalizedGeometry = normalizedGeometries[0];

                    if (normalizedGeometry.type === "polygon") {

                        //if geometry is a polygon then simplify polygon.  This will make the user drawn polygon topologically correct.

                        esriConfig.defaults.geometryService.simplify([normalizedGeometry], function (geometries) {

                            params.geometries = geometries;

                            esriConfig.defaults.geometryService.buffer(params, showBuffer);

                        });

                    } else {

                        params.geometries = [normalizedGeometry];

                        esriConfig.defaults.geometryService.buffer(params, showResults);

                    }

                });

            }

 

 

            function showBuffer(bufferedGeometries) {

                var symbol = new SimpleFillSymbol(

                  SimpleFillSymbol.STYLE_SOLID,

                  new SimpleLineSymbol(

                    SimpleLineSymbol.STYLE_SOLID,

                    new Color([255, 0, 0, 0.65]), 2

                  ),

                  new Color([255, 0, 0, 0.35])

                );

                array.forEach(bufferedGeometries, function (geometry) {

                    var graphic = new Graphic(geometry, symbol);

                    map.graphics.add(graphic);

                });

            }

 

 

 

 

 

 

            //****************************************************************************

            function queryMapService(Geom) {

 

 

                var promises = [];

 

 

                var query = new Query();

                query.returnGeometry = false;

                query.outFields = ["*"];

                query.geometry = Geom;

 

 

                promises.push(hydrant.selectFeatures(query, FeatureLayer.SELECTION_NEW));

                promises.push(parcel.selectFeatures(query, FeatureLayer.SELECTION_NEW));

                var allPromises = new All(promises);

                allPromises.then(function (r) {

                    showResults(r);

                });

            }

 

 

            function showResults(results) {

                //var featureLayer1Message = results[0].length;

                //var featureLayer2Message = results[1].length;

 

 

 

 

                //var count = 0;

                //for (var i = 0; i < results.length; i++) {

                //    count = count + results[i].length;

                //}

 

 

                //dom.byId("messages").innerHTML = "Total FEATURES selected:  <b>" + count + "</b><br>  DayCaresFL:  <b>" + featureLayer1Message

                //   + "</b><br>  SchoolsFL:  <b>" + featureLayer2Message;

 

 

 

 

                var items = arrayUtils.map(results, function (result) {

                    return result;

                });

 

 

                var allItems = [];

 

 

                arrayUtils.map(items[0], function (item) {

                    allItems.push(item.attributes);

                })

 

 

                arrayUtils.map(items[1], function (item) {

                    allItems.push(item.attributes);

                })

 

 

 

 

 

 

                var data = {

                    identifier: "OBJECTID", //This field needs to have unique values

                    label: "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.

                    items: allItems

                };

 

 

                //Create data store and bind to grid.

                store = new ItemFileReadStore({

                    data: data

                });

                var grid = registry.byId("grid");

                grid.setStore(store);

                grid.on("rowclick", onRowClickHandler);

            }

 

 

 

 

 

 

 

 

 

 

 

 

            function onRowClickHandler(evt) {

                var clickedObjectf = evt.grid.getItem(evt.rowIndex).OBJECTID;

                var selectedObjectf;

                var distance = 50;

 

 

                dojo.forEach(Hydrant.graphics, function (graphicf) {

                    if ((graphicf.attributes) && graphicf.attributes.OBJECTID === clickedObjectf) {

                        selectedObjectf = graphicf;

                        return;

                    }

                });

 

 

                if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Point') {

                    var PointExtent = new esri.geometry.Extent({

                        "xmin": selectedObjectf.geometry.x - distance,

                        "ymin": selectedObjectf.geometry.y - distance,

                        "xmax": selectedObjectf.geometry.x + distance,

                        "ymax": selectedObjectf.geometry.y + distance,

                        "spatialReference": {

                            "wkid": 102740

                        }

                    });

                    map.setExtent(PointExtent);

                    //} else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polygon') {

                    //    var selectedParcel = selectedObjectf.geometry.getExtent();

                    //    map.setExtent(selectedParcel.expand(1));

                    //} else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polyline') {

                    //    var selectedStreetl = selectedObjectf.geometry.getExtent();

                    //    map.setExtent(selectedStreetl.expand(1));

                }

            }

 

 

 

 

 

 

            var measurement = new Measurement({

                map: map

            }, dom.byId("measurementDiv"));

            measurement.startup();

            geocoder = new Geocoder({

                autoComplete: true,

                map: map

            }, "search");

            geocoder.startup();

            geocoder.on("select", showLocation);

 

 

            function showLocation(evt) {

                map.graphics.clear();

                var point = evt.result.feature.geometry;

                var symbol = new SimpleMarkerSymbol()

                  .setStyle("square")

                  .setColor(new Color([255, 0, 0, 0.5]));

                var graphic = new Graphic(point, symbol);

                map.graphics.add(graphic);

                map.infoWindow.setTitle("Search Result");

                map.infoWindow.setContent(evt.result.name);

                map.infoWindow.show(evt.result.feature.geometry);

            }

        });

    </script>

</head>

 

 

<body class="claro">

    <div id="search"></div>

    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">

        <div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">

            <div style="position:absolute; right:20px; top:10px; z-Index:999;">

                <!--<div id="search"></div>-->

                <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">

                    <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">

                        <div id="basemapGallery"></div>

                    </div>

                </div>

            </div>

        </div>

        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" class="roundedCorners" id="rightPane">

            <div data-dojo-type="dijit.layout.AccordionContainer">

 

                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:' Buffer Info'" id='graphics'>

                    <span style="padding: 10px 0;"></span>

                    <div id="toggle" style="padding: 2px 2px;"></div>

                    <br />

                    <hr />

                    <div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div>

                    <button type="button" class="tool" id="line">Line</button>

                    <button data-dojo-type="dijit/form/Button">Point</button>

 

 

                    <button type="button" class="tool" id="polyline">Polyline</button>

                    <button type="button" class="tool" id="freehandpolyline">Freehand Polyline</button>

                    <br />

                    <button type="button" class="tool" id="polygon">Polygon</button>

                    <button type="button" class="tool" id="freehandpolygon">Freehand Polygon</button>

                    <br />

 

                    <div><b>Buffer Parameters</b></div>

                    Distance:

                    <input type="text" id="distance" size="5" value="25" />

                    <select id="unit" style="width:100px;">

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

                    <br />

                    <button type="button" id="clearGraphics">Clear Graphics</button>

                    <br />

                    <br /><hr />

                    <div id="grid"></div> 

                   <hr />

                    <!--<div><b>Enter an address</b></div>-->

                    <br />

                   <div id="messages"></div>

                </div>

                <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend'">

                    <div id="legendDiv"></div>

                </div>

                <div data-dojo-type="dijit.layout.ContentPane" id='MeasurementPane' data-dojo-props="title:'Measurement'">

                    <div id="measurementDiv"></div>

                </div>

            </div>

        </div>

    </div>

</body>

  

</html> 

Outcomes