May Jeff,
No errors. I also fixed several other things I saw in the code and updated to 3.13 API to use some of the great new stuff like geometryEngineAsync. Here is my updates:
<!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>Buffer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#leftPane {
color: #000;
width: 250px;
padding-bottom: 15px;
}
#map {
padding: 0;
}
.details {
font-size: 14px;
font-weight: 600;
padding-bottom: 20px;
}
button {
margin: 2px;
cursor: pointer;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
require([
"esri/map",
"esri/config",
"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"esri/graphicsUtils",
"esri/geometry/geometryEngineAsync",
"esri/tasks/GeometryService",
"esri/Color",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/_base/array",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"dijit/form/Button",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Map, esriConfig, FeatureLayer, Query, SimpleLineSymbol, SimpleFillSymbol,
Graphic, graphicsUtils, geometryEngineAsync, GeometryService,
Color, on, dom, registry, arrayUtils, DataGrid, ItemFileReadStore, Button, parser) {
var map, center, zoom;
var grid, store;
var graphic;
var bufferGra;
parser.parse();
esriConfig.defaults.io.proxyUrl = "/Proxy/proxy.ashx";
esriConfig.defaults.io.alwaysUseProxy = false;
registry.byId("applyBufferP").on("click", applyBufferP);
registry.byId("clearParcelGrid").on("click", clearParcelGrid);
registry.byId("parcelSearch").on("click", queryParcels);
registry.byId("intersectBuffer").on("click", intersectParcels);
center = [-83.266, 42.568];
zoom = 11;
map = new esri.Map("map", {
basemap: "streets",
center: center,
zoom: zoom
});
var parcelUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/0";
var featureLayerParcel = new FeatureLayer(parcelUrl, {
mode: FeatureLayer.MODE_SELECTION,
visible: true,
outFields: ["PARCELID", "SITEADDRESS", "OWNERNME1", "OWNERNME2", "RESYRBLT"]
});
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleFillSymbol.STYLE_SOLID, new Color([100, 100, 100]), 2), new Color([0, 0, 255, 0.20]));
featureLayerParcel.setSelectionSymbol(symbol);
map.addLayer(featureLayerParcel);
function queryParcels() {
var queryParcels = new Query();
queryParcels.where = "PARCELID LIKE '" + "%" + dom.byId("parcelText").value + "'";
featureLayerParcel.selectFeatures(queryParcels, FeatureLayer.SELECTION_NEW, function (features, selectionMethod) {
if (features.length > 0) {
var parcelItems = dojo.map(features, function (feature) {
return feature.attributes;
});
var parcelData = {
identifier: "PARCELID",
items: parcelItems
};
var parcelStore = new ItemFileReadStore({
data: parcelData
});
var parcelGrid = registry.byId("gridP");
parcelGrid.on("rowclick", onRowClickHandler);
parcelGrid.setStore(parcelStore);
map.setExtent(graphicsUtils.graphicsExtent(featureLayerParcel.getSelectedFeatures()), true);
} else {
alert("No Parcels found!");
}
});
}
function intersectParcels() {
geometryEngineAsync.union(bufferGra).then(
function (union) {
var queryNew = new Query();
queryNew.outFields = ["PARCELID", "SITEADDRESS", "OWNERNME1", "OWNERNME2", "RESYRBLT"];
queryNew.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
queryNew.geometry = union;
queryNew.returnGeometry = true;
featureLayerParcel.selectFeatures(queryNew, FeatureLayer.SELECTION_ADD, function (features, selectionMethod) {
var items = dojo.map(features, function (feature) {
return feature.attributes;
});
var data = {
identifier: "PARCELID",
items: items
};
var store = new ItemFileReadStore({
data: data
});
var grid = registry.byId("parcelGrid");
grid.on("rowclick", onRowClickHandler);
grid.setStore(store);
arrayUtils.forEach(features, function (feature) {
graphic = new Graphic(feature.geometry, symbol);
map.graphics.add(graphic);
});
});
}
);
dijit.byId("dialogOne").show();
}
function applyBufferP() {
var graphics = featureLayerParcel.graphics;
var selectedGeoms = graphicsUtils.getGeometries(graphics);
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])
);
geometryEngineAsync.buffer(selectedGeoms, [100], GeometryService.UNIT_FOOT, true).then(
function (geoms) {
arrayUtils.forEach(geoms, function (geometry) {
map.graphics.add(new Graphic(geometry, symbol));
});
bufferGra = geoms;
}
);
}
function onRowClickHandler(evt) {
var clickedObjectf = evt.grid.getItem(evt.rowIndex).PARCELID;
var selectedObjectf;
var distance = 50;
dojo.forEach(featureLayerParcel.graphics, function (graphicf) {
if ((graphicf.attributes) && graphicf.attributes.PARCELID === 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(3));
} else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polyline') {
var selectedStreetl = selectedObjectf.geometry.getExtent();
map.setExtent(selectedStreetl.expand(3));
}
}
function clearParcelGrid() {
var newStore = new ItemFileReadStore({
data: {
idenitifer: "",
items: []
}
});
var grid = registry.byId("gridP");
grid.setStore(newStore);
document.getElementById('parcelText').value = '';
featureLayerParcel.clearSelection();
map.graphics.clear();
}
});
</script>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:200px;" title="Search">
Search by Parcel #:
<input type="text" id="parcelText" value="1931376029" />
<br>
<button id="parcelSearch" data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="button">Search</button>
<button id="clearParcelGrid" data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="button">Clear</button>
<button id="applyBufferP" data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="button">Buffer</button>
<button id="intersectBuffer" data-dojo-type="dijit/form/Button" type="button">Show Parcels Intersecting Buffer</button>
<table data-dojo-type="dojox/grid/DataGrid" jsid="gridP" id="gridP">
<thead>
<tr>
<th field="PARCELID">Parcel ID</th>
<th field="OWNERNME1">Owner 1</th>
<th field="OWNERNME2">Owner 2</th>
<th field="SITEADDRESS">Address</th>
<th field="RESYRBLT">Year Built</th>
</tr>
</thead>
</table>
</div>
<div id="dialogOne" data-dojo-type="dijit/Dialog" title="Selected Parcels">
<div data-dojo-type="dijit/layout/ContentPane" title="Selected Parcels">
<table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="parcelGrid" id="parcelGrid" style="width: 375px; height: 600px" data-dojo-props="rowsPerPage:'100', rowSelector:'20px'">
<thead>
<tr>
<th field="PARCELID">Parcel ID</th>
<th field="OWNERNME1">Owner 1</th>
<th field="OWNERNME2">Owner 2</th>
<th field="SITEADDRESS">Address</th>
<th field="RESYRBLT">Year Built</th>
</tr>
</thead>
</table>
</div>
</div>
<div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
</div>
</body>
