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