Buffer tool with parameters

jerrysalinas · ‎02-01-2016

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

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the

samples on iOS devices-->

<title>Buffertest</title>

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

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

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

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

<option value="UNIT_STATUTE_MILE">Miles</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 />

<hr />

<br />

</div>

</div>

</div>

</body>

</html>

JakeSkinner · ‎02-01-2016

Hi Jerry,

The following should get you going. I had to fix a few errors, but I believe there are still a few more. I configured the app to work specifically with the Hospitals layer. For example, if you draw a freehand polygon, it will create a buffer and then populate the Grid with some of the Hospitals attributes.

I would recommend implementing one functionality at a time. For example, make sure the draw toolbar is working correctly. Then, move on to the buffer functionality. Once this is working, create the grid, etc. This will make debugging the code much easier.

<!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.15/dojo/resources/dojo.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/dgrid/css/dgrid.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/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 src="http://js.arcgis.com/3.15/"></script>
    <script>
        var map, geocoder, grid, tb, hospital;
        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",
            "dojo/promise/all",
            "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,
          All,
          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: [-93.2763, 44.9855],
                zoom: 10
            });
            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
                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) {
                    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])
                );
                arrayUtils.forEach(bufferedGeometries, function (geometry) {
                    var graphic = new Graphic(geometry, symbol);
                    map.graphics.add(graphic);
                });
            }

            on(esriConfig.defaults.geometryService, "buffer-complete", function(Geom){
                queryMapService(Geom)
             })



            //****************************************************************************
            function queryMapService(Geom) {
                var promises = [];


                var query = new Query();
                query.returnGeometry = false;
                query.outFields = ["*"];
                query.geometry = Geom.geometries[0];


                //promises.push(hydrant.selectFeatures(query, FeatureLayer.SELECTION_NEW));
                promises.push(hospital.selectFeatures(query, FeatureLayer.SELECTION_NEW));
                var allPromises = new All(promises);
                allPromises.then(function (r) {
                    showResults(r);
                });
            }


            function showResults(results) {
                console.log(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.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(hospital.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": 102100
                        }
                    });
                    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 />
                    <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'1', rowSelector:'20px'">
                            <thead>
                                <tr>
                                    <th field="OBJECTID">ID</th>
                                    <th field="NAME">NAME</th>
                                    <th field="ADDRESS">ADDRESS</th>

                                </tr>
                            </thead>
                        </table>
                   <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>

View solution in original post

JakeSkinner · ‎02-01-2016

Hi Jerry,

The following should get you going. I had to fix a few errors, but I believe there are still a few more. I configured the app to work specifically with the Hospitals layer. For example, if you draw a freehand polygon, it will create a buffer and then populate the Grid with some of the Hospitals attributes.

I would recommend implementing one functionality at a time. For example, make sure the draw toolbar is working correctly. Then, move on to the buffer functionality. Once this is working, create the grid, etc. This will make debugging the code much easier.

<!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.15/dojo/resources/dojo.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/dgrid/css/dgrid.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/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 src="http://js.arcgis.com/3.15/"></script>
    <script>
        var map, geocoder, grid, tb, hospital;
        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",
            "dojo/promise/all",
            "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,
          All,
          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: [-93.2763, 44.9855],
                zoom: 10
            });
            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
                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) {
                    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])
                );
                arrayUtils.forEach(bufferedGeometries, function (geometry) {
                    var graphic = new Graphic(geometry, symbol);
                    map.graphics.add(graphic);
                });
            }

            on(esriConfig.defaults.geometryService, "buffer-complete", function(Geom){
                queryMapService(Geom)
             })



            //****************************************************************************
            function queryMapService(Geom) {
                var promises = [];


                var query = new Query();
                query.returnGeometry = false;
                query.outFields = ["*"];
                query.geometry = Geom.geometries[0];


                //promises.push(hydrant.selectFeatures(query, FeatureLayer.SELECTION_NEW));
                promises.push(hospital.selectFeatures(query, FeatureLayer.SELECTION_NEW));
                var allPromises = new All(promises);
                allPromises.then(function (r) {
                    showResults(r);
                });
            }


            function showResults(results) {
                console.log(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.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(hospital.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": 102100
                        }
                    });
                    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 />
                    <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'1', rowSelector:'20px'">
                            <thead>
                                <tr>
                                    <th field="OBJECTID">ID</th>
                                    <th field="NAME">NAME</th>
                                    <th field="ADDRESS">ADDRESS</th>

                                </tr>
                            </thead>
                        </table>
                   <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>

jerrysalinas · ‎02-01-2016

Hi Jake,

Thanks for the updated code. I am making progress. I think the problem is that I am not using the ESRI Streets basemap, instead I switched to a custom basemap("spatialReference "wkid": 102740). Now when I perform some of my spatial queries I get errors like "Unable to perform buffer(…) " or "Error executing simplify" I think I need to set my spatial reference again in my code, but I am not able to troubleshoot where. Here is a example of my error: {"error":{"code":400,"message":"Unable to perform buffer","details":["'geometries' must be specified"]}}

jerrysalinas · ‎02-02-2016

Thanks Jake, I followed your advice and troubleshooted everything. I was able to get it going. Thanks again.