topic Re: Select from layer to buffer from checkbox and then buffer it. in ArcGIS JavaScript Maps SDK Questions

Select from layer to buffer from checkbox and then buffer it.

AditiRoy1 — Tue, 12 Jul 2016 05:54:07 GMT

Hello, Everyone. I am stuck in the code. I have list of layers in a dynamic layer checkbox and i want to select the layers to buffer whose result will be shown into the combobox. I am posting the code below. Please help. Thanks in advance.

-aditi

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

<!--<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<title>Ground Water</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;

}

#header {

border: solid #00ffff 3px;

background-color: #00ffff;

}

#titlePane {

width: 240px;

}

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

var map, geocoder, grid, tb, hospital, hydrant;

var cred = "esri_jsapi_id_manager_data"; // cookie/local storage name

var showDialog2, myDialog2;

var layer, visibleLayerIds = [];

require([

"dojo/_base/unload",

"dojo/cookie",

"dojo/json",

"dojo/parser", "esri/config", "esri/IdentityManager",

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

'esri/dijit/BasemapLayer',

"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/layers/ArcGISDynamicMapServiceLayer",

"dojo/dom-construct",

"dijit/form/CheckBox",

"esri/geometry/screenUtils",

"esri/dijit/PopupTemplate",

"esri/request",

"esri/tasks/query",

"esri/geometry/Point",

"esri/graphic",

"esri/symbols/PictureMarkerSymbol",

"dojo/on",

"dojo/_base/array",

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

"dijit/Dialog", "dijit/form/TextBox", "dijit/DialogUnderlay", "dijit/form/ComboBox", "esri/layers/ImageParameters",

"dojo/domReady!"

], function (baseUnload,

cookie,

JSON,

parser, esriConfig, esriId,

Map, Basemap, BasemapLayer,

InfoTemplate,

Geocoder,

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

SimpleRenderer,

Measurement,

FeatureLayer,

ArcGISDynamicMapServiceLayer,

domConstruct,

CheckBox,

screenUtils,

PopupTemplate,

esriRequest,

Query,

Point,

Graphic,

PictureMarkerSymbol,

on,

array,

All,

Color,

arrayUtils,

Grid, Selection, Memory,

Button,

parser, declare, dom, DataGrid, ItemFileReadStore, Dialog, TextBox, DialogUnderlay, ComboBox,ImageParameters

) {

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;

// store credentials/serverInfos before the page unloads

baseUnload.addOnUnload(storeCredentials);

// look for credentials in local storage

loadCredentials();

parser.parse();

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

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

if (map) {

map.graphics.clear();

}

});

var featureLayer;

map = new Map("map", {

basemap: "topo",

center: [72.2763, 26.3855],

zoom: 7

});

map.on("load", initOperationalLayer);

map.on("load", initToolbar);

var BaseMap = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/GWD/GWDBASE/MapServer/0",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayer(BaseMap);

var BaseMap1 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/GWD/GWDBASE/MapServer/1",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayer(BaseMap1);

var BaseMap2 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/GWD/GWDBASE/MapServer/2",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayer(BaseMap2);

var BaseMap3 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/GWD/GWDBASE/MapServer/3",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayer(BaseMap3);

var BaseMap4 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/GWD/GWDBASE/MapServer/4",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayer(BaseMap4);

var BaseMap5 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/GWD/GWDBASE/MapServer/5",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayer(BaseMap5);

//add the secure service - token is required

var secureLayer = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/0",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

var secureLayer1 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/1",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

var secureLayer2 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/2",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

var secureLayer3 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/3",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

var secureLayer4 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/4",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

var secureLayer5 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/5",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

var secureLayer6 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/6",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

var secureLayer7 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/7",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

var secureLayer8 = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/8",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayers([secureLayer8, secureLayer7, secureLayer6, secureLayer5, secureLayer4, secureLayer3, secureLayer2, secureLayer1, secureLayer]);

// adding check box

map.on("layers-add-result", function (evt) {

var layerInfo = array.map(evt.layers, function (layer,

index) {

return {

layer: layer.layer,

title: layer.layer.name

};

});

array.forEach(layerInfo, function (layer) {

var layerName = layer.title;

if (layerName == undefined) {

layerName = secureLayer8;

}

var checkBox = new CheckBox({

name: "checkBox" + layer.layer.id,

value: layer.layer.id,

checked: layer.layer.visible,

onChange: function (evt) {

var clayer = map.getLayer(this.value);

clayer.setVisibility(!clayer.visible);

this.checked = clayer.visible;

}

});

domConstruct.place(checkBox.domNode, "t",

"after");

var checkLabel = domConstruct.create('label', {

'for': checkBox.name,

innerHTML: layerName

}, checkBox.domNode, "after");

domConstruct.place("<br />", checkLabel,

"after");

});

function initOperationalLayer() {

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

var infoTemplate = new InfoTemplate();

hydrant = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/3", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"],

infoTemplate: infoTemplate

});

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

hospital = new FeatureLayer("http://gistest1.rajasthan.gov.in/rajasthan/rest/services/Common/ADMIN/MapServer/4", {

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

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_CIRCLE, 10, new SimpleLineSymbol(SimpleMarkerSymbol.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 === "point") {

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

}

});

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

}

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

}

function loadCredentials() {

var idJson, idObject;

if (supports_local_storage()) {

// read from local storage

idJson = window.localStorage.getItem(cred);

}

else {

// read from a cookie

idJson = cookie(cred);

}

if (idJson && idJson != "null" && idJson.length > 4) {

idObject = JSON.parse(idJson);

esriId.initialize(idObject);

}

else {

// console.log("didn't find anything to load :(");

}

function storeCredentials() {

// make sure there are some credentials to persist

if (esriId.credentials.length === 0) {

return;

}

// serialize the ID manager state to a string

var idString = JSON.stringify(esriId.toJson());

// store it client side

if (supports_local_storage()) {

// use local storage

window.localStorage.setItem(cred, idString);

// console.log("wrote to local storage");

}

else {

// use a cookie

cookie(cred, idString, { expires: 72000000000000000 });

// console.log("wrote a cookie :-/");

}

function supports_local_storage() {

try {

return "localStorage" in window && window["localStorage"] !== null;

} catch (e) {

return false;

}

});

</script>

</head>

<center><font size="4"><strong>Ground Water</strong></font></center>

<button data-dojo-type="dijit/form/Button" style="float:right" onclick="showDialog();"><b>Search Assets</b></button>

</div>

</div>

<span style="padding: 10px 0;">Click to toggle each layer on or off</span>

<br />

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

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

<button type="button" onclick="point" class="tool" id="point">Click On The Map</button>

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

<br />

<thead>

<tr>

</tr>

</thead>

</table>

<hr />

<br />

</div>

require(["dijit/Dialog", "dijit/DialogUnderlay", "dojo/dom", "dojo/domReady!"], function (Dialog, DialogUnderlay, dom) {

myDialog = new Dialog({

title: "Search Assets",

content: dom.byId('SearchAssets'),

style: "width: 300px"

});

showDialog = function () {

myDialog.show().then(function () {

DialogUnderlay.hide()

DialogUnderlay._singleton.bgIframe = {

destroy: function () {

}

});

}

});

</script>

</body>

</html>

Re: Select from layer to buffer from checkbox and then buffer it.

RobertScheitlin__GISP — Tue, 12 Jul 2016 13:30:19 GMT

Aditi,

Since we do not have access to your data can you tell use with your code is failing at (in your browsers web console is there a line number it fails at)?

Re: Select from layer to buffer from checkbox and then buffer it.

AditiRoy1 — Wed, 13 Jul 2016 10:56:33 GMT

Dear Sir, as i am providing you a new code with some other data. Hope it will help. And thank you once again.

<!DOCTYPE>

<html>

<head>

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

samples on iOS devices-->

<!--<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<title>Ground Water</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;

}

#header {

border: solid #00ffff 3px;

background-color: #00ffff;

}

#titlePane {

width: 240px;

}

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

var map, geocoder, grid, tb, hospital, hydrant;

var cred = "esri_jsapi_id_manager_data"; // cookie/local storage name

var showDialog2, myDialog2;

var layer, visibleLayerIds = [];

require([

"dojo/_base/unload",

"dojo/cookie",

"dojo/json",

"dojo/parser", "esri/config", "esri/IdentityManager",

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

'esri/dijit/BasemapLayer',

"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/layers/ArcGISDynamicMapServiceLayer",

"dojo/dom-construct",

"dijit/form/CheckBox",

"esri/geometry/screenUtils",

"esri/dijit/PopupTemplate",

"esri/request",

"esri/tasks/query",

"esri/geometry/Point",

"esri/graphic",

"esri/symbols/PictureMarkerSymbol",

"dojo/on",

"dojo/_base/array",

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

"dijit/Dialog", "dijit/form/TextBox", "dijit/DialogUnderlay", "dijit/form/ComboBox", "esri/layers/ImageParameters",

"dojo/domReady!"

], function (baseUnload,

cookie,

JSON,

parser, esriConfig, esriId,

Map, Basemap, BasemapLayer,

InfoTemplate,

Geocoder,

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

SimpleRenderer,

Measurement,

FeatureLayer,

ArcGISDynamicMapServiceLayer,

domConstruct,

CheckBox,

screenUtils,

PopupTemplate,

esriRequest,

Query,

Point,

Graphic,

PictureMarkerSymbol,

on,

array,

All,

Color,

arrayUtils,

Grid, Selection, Memory,

Button,

parser, declare, dom, DataGrid, ItemFileReadStore, Dialog, TextBox, DialogUnderlay, ComboBox, ImageParameters

) {

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;

// store credentials/serverInfos before the page unloads

baseUnload.addOnUnload(storeCredentials);

// look for credentials in local storage

loadCredentials();

parser.parse();

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

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

if (map) {

map.graphics.clear();

}

});

var featureLayer;

map = new Map("map", {

basemap: "topo",

center: [-120.275, 47.485],

zoom: 6

});

map.on("load", initOperationalLayer);

map.on("load", initToolbar);

map.addLayers([secureLayer, secureLayer1]);

// adding check box

map.on("layers-add-result", function (evt) {

var layerInfo = array.map(evt.layers, function (layer,

index) {

return {

layer: layer.layer,

title: layer.layer.name

};

});

array.forEach(layerInfo, function (layer) {

var layerName = layer.title;

if (layerName == undefined) {

layerName = secureLayer1;

}

var checkBox = new CheckBox({

name: "checkBox" + layer.layer.id,

value: layer.layer.id,

checked: layer.layer.visible,

onChange: function (evt) {

var clayer = map.getLayer(this.value);

clayer.setVisibility(!clayer.visible);

this.checked = clayer.visible;

}

});

domConstruct.place(checkBox.domNode, "t",

"after");

var checkLabel = domConstruct.create('label', {

'for': checkBox.name,

innerHTML: layerName

}, checkBox.domNode, "after");

domConstruct.place("<br />", checkLabel,

"after");

});

function initOperationalLayer() {

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

var infoTemplate = new InfoTemplate();

hydrant = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"],

infoTemplate: infoTemplate

});

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

hospital = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/1", {

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

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_CIRCLE, 10, new SimpleLineSymbol(SimpleMarkerSymbol.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 === "point") {

//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 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: "FID", //This field needs to have unique values

label: "FID", //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;

}

});

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

}

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

}

function loadCredentials() {

var idJson, idObject;

if (supports_local_storage()) {

// read from local storage

idJson = window.localStorage.getItem(cred);

}

else {

// read from a cookie

idJson = cookie(cred);

}

if (idJson && idJson != "null" && idJson.length > 4) {

idObject = JSON.parse(idJson);

esriId.initialize(idObject);

}

else {

// console.log("didn't find anything to load :(");

}

function storeCredentials() {

// make sure there are some credentials to persist

if (esriId.credentials.length === 0) {

return;

}

// serialize the ID manager state to a string

var idString = JSON.stringify(esriId.toJson());

// store it client side

if (supports_local_storage()) {

// use local storage

window.localStorage.setItem(cred, idString);

// console.log("wrote to local storage");

}

else {

// use a cookie

cookie(cred, idString, { expires: 72000000000000000 });

// console.log("wrote a cookie :-/");

}

function supports_local_storage() {

try {

return "localStorage" in window && window["localStorage"] !== null;

} catch (e) {

return false;

}

});

</script>

</head>

<center><font size="4"><strong>Ground Water</strong></font></center>

<button data-dojo-type="dijit/form/Button" style="float:right" onclick="showDialog();"><b>Search Assets</b></button>

</div>

</div>

<span style="padding: 10px 0;">Click to toggle each layer on or off</span>

<br />

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

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

<button type="button" onclick="point" class="tool" id="point">Click On The Map</button>

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

<br />

<thead>

<tr>

<th width=180 field="Shape">SHAPE</th>

</tr>

</thead>

</table>

<hr />

<br />

</div>

require(["dijit/Dialog", "dijit/DialogUnderlay", "dojo/dom", "dojo/domReady!"], function (Dialog, DialogUnderlay, dom) {

myDialog = new Dialog({

title: "Search Assets",

content: dom.byId('SearchAssets'),

style: "width: 300px"

});

showDialog = function () {

myDialog.show().then(function () {

DialogUnderlay.hide()

DialogUnderlay._singleton.bgIframe = {

destroy: function () {

}

});

}

});

</script>

</body>

</html>

Re: Select from layer to buffer from checkbox and then buffer it.

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:26:21 GMT

Aditi,

Here is the code working. There was to many thing I fixed to outline them for you so you will just have to compare my corrected code to yours:

<!DOCTYPE>
<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-->
    <!--<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <link rel="stylesheet" type="text/css" href="https://community.esri.com//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css" />
    <link rel="stylesheet" type="text/css" href="https://community.esri.com//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css" />-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Ground Water</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;
        }

        #header {
            border: solid #00ffff 3px;
            background-color: #00ffff;
        }

        #titlePane {
            width: 240px;
        }

        .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, hydrant;
        var cred = "esri_jsapi_id_manager_data"; // cookie/local storage name
        var myDialog;
        var layer, visibleLayerIds = [];

        require([
            "dojo/_base/unload", "dojo/cookie", "dojo/json", "dojo/parser", "esri/config", "esri/IdentityManager", "dojo/_base/lang",
            "esri/map", 'esri/dijit/Basemap', 'esri/dijit/BasemapLayer',   "esri/InfoTemplate", "esri/dijit/Geocoder", "esri/geometry/Extent",
            "esri/graphic", "dojo/query", "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/layers/ArcGISDynamicMapServiceLayer",
            "dojo/dom-construct", "dijit/form/CheckBox", "esri/geometry/screenUtils", "esri/dijit/PopupTemplate", "esri/request", "esri/tasks/query",
            "esri/geometry/Point", "esri/graphic", "esri/symbols/PictureMarkerSymbol", "dojo/on", "dojo/_base/array", "dojo/promise/all",
            "esri/Color", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dijit/form/Button",
            "dojo/_base/declare", "dojo/dom", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore",
            "dijit/Dialog", "dijit/form/TextBox", "dijit/DialogUnderlay", "dijit/form/ComboBox", "esri/layers/ImageParameters",
            "dojo/domReady!"
        ], function(
            baseUnload, cookie, JSON, parser, esriConfig, esriId, lang,
            Map, Basemap, BasemapLayer, InfoTemplate, Geocoder, Extent,
            Graphic, query, normalizeUtils, GeometryService, BufferParameters,
            Draw, registry, SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol,
            SimpleRenderer, Measurement, FeatureLayer, ArcGISDynamicMapServiceLayer,
            domConstruct, CheckBox, screenUtils, PopupTemplate, esriRequest, Query,
            Point, Graphic, PictureMarkerSymbol, on, array, All,
            Color, Grid, Selection, Memory, Button,
            declare, dom, DataGrid, ItemFileReadStore,
            Dialog, TextBox, DialogUnderlay, ComboBox, ImageParameters
        ) {
            parser.parse();

            esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
            esriConfig.defaults.io.proxyUrl = "proxy.ashx";
            esriConfig.defaults.io.alwaysUseProxy = false;

            // store credentials/serverInfos before the page unloads
            baseUnload.addOnUnload(storeCredentials);

            // look for credentials in local storage
            loadCredentials();

            myDialog = new Dialog({
                title: "Search Assets",
                content: dom.byId('SearchAssets'),
                style: "width: 300px"
            });

            var featureLayer;
            map = new Map("map", {
                basemap: "topo",
                center: [-120.275, 47.485],
                zoom: 6
            });

            map.on("load", initOperationalLayer);
            map.on("load", initToolbar);
            map.on("load", initEvents);
            //map.addLayers([secureLayer, secureLayer1]);

            // adding check box
            map.on("layers-add-result", function(evt) {
                var layerInfo = array.map(evt.layers, function(layer,
                    index) {
                    return {
                        layer: layer.layer,
                        title: layer.layer.name
                    };
                });

                array.forEach(layerInfo, function(layer) {
                    var layerName = layer.title;
                    if (layerName == undefined) {
                        layerName = secureLayer1;
                    }
                    var checkBox = new CheckBox({
                        name: "checkBox" + layer.layer.id,
                        value: layer.layer.id,
                        checked: layer.layer.visible,
                        onChange: function(evt) {
                            var clayer = map.getLayer(this.value);
                            clayer.setVisibility(!clayer.visible);
                            this.checked = clayer.visible;
                        }
                    });

                    domConstruct.place(checkBox.domNode, "t",
                        "after");
                    var checkLabel = domConstruct.create('label', {
                        'for': checkBox.name,
                        innerHTML: layerName
                    }, checkBox.domNode, "after");
                    domConstruct.place("<br />", checkLabel,
                        "after");
                });
            });

            function initEvents(){
              registry.byId("dialogBtn").on("click", function(){
                myDialog.show().then(function() {
                    DialogUnderlay.hide()
                    DialogUnderlay._singleton.bgIframe = {
                        destroy: function() {}
                    }
                });
              });

              on(dom.byId("clearGraphics"), "click", function() {
                  if (map) {
                      map.graphics.clear();
                  }
              });
            }

            function initOperationalLayer() {
              console.info(registry.byId("toggleButton"));
                //Layer that is in Lat, Long Spatial reference 102100
                var infoTemplate = new InfoTemplate();
                hydrant = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"],
                    infoTemplate: infoTemplate
                });

                //Layer that is NAD83 / UTM zone 15 N Spatial Reference 26915
                hospital = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/1", {
                    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);
                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_CIRCLE, 10, new SimpleLineSymbol(SimpleMarkerSymbol.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 === "point") {
                        //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);
                });
            }

            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 items = array.map(results, function(result) {
                    return result;
                });
                var allItems = [];
                array.map(items[0], function(item) {
                    allItems.push(item.attributes);
                })

                array.map(items[1], function(item) {
                    allItems.push(item.attributes);
                })

                var data = {
                    identifier: "FID", //This field needs to have unique values
                    label: "FID", //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("resultsgrid");
                grid.setStore(store);
                grid.on("rowclick", onRowClickHandler);
            }

            function onRowClickHandler(evt) {
                var clickedObjectf = evt.grid.getItem(evt.rowIndex).FID;
                console.info(clickedObjectf);
                var selectedObjectf;
                var distance = 50;
                array.forEach(hydrant.graphics, function(graphicf) {
                    if ((graphicf.attributes) && graphicf.attributes.FID === clickedObjectf) {
                        selectedObjectf = graphicf;
                        return;
                    }
                });
                array.forEach(hospital.graphics, function(graphicf) {
                    if ((graphicf.attributes) && graphicf.attributes.FID === clickedObjectf) {
                        selectedObjectf = graphicf;
                        return;
                    }
                });
                if ((selectedObjectf) && selectedObjectf.geometry.declaredClass == 'esri.geometry.Point') {
                    var PointExtent = new 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);
                }
            }

            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);
            }

            function loadCredentials() {
                var idJson, idObject;
                if (supports_local_storage()) {
                    // read from local storage
                    idJson = window.localStorage.getItem(cred);
                } else {
                    // read from a cookie
                    idJson = cookie(cred);
                }
                if (idJson && idJson != "null" && idJson.length > 4) {
                    idObject = JSON.parse(idJson);
                    esriId.initialize(idObject);
                } else {
                    // console.log("didn't find anything to load :(");
                }
            }

            function storeCredentials() {
                // make sure there are some credentials to persist
                if (esriId.credentials.length === 0) {
                    return;
                }
                // serialize the ID manager state to a string
                var idString = JSON.stringify(esriId.toJson());
                // store it client side
                if (supports_local_storage()) {
                    // use local storage
                    window.localStorage.setItem(cred, idString);
                    // console.log("wrote to local storage");
                } else {
                    // use a cookie
                    cookie(cred, idString, {
                        expires: 72000000000000000
                    });
                    // console.log("wrote a cookie :-/");
                }
            }

            function supports_local_storage() {
                try {
                    return "localStorage" in window && window["localStorage"] !== null;
                } catch (e) {
                    return false;
                }
            }
        });
    </script>
</head>

<body class="claro">
    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
        <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
            <center><font size="4"><strong>Ground Water</strong></font></center>
            <button data-dojo-type="dijit/form/Button" style="float:right" id="dialogBtn" type="button"><b>Search Assets</b></button>
        </div>
        <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>
            <div id="SearchAssets">
                <span style="padding: 10px 0;">Click to toggle each layer on or off</span>
                <div id="t" style="padding: 2px 2px;"></div>
                <br />
                <div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div>
                <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 />
                <br />
                <br />
                <button type="button" onclick="point" class="tool" id="point">Click On The Map</button>
                <button type="button" id="clearGraphics">Clear Graphics</button>
                <br />
                <br />
                <hr />
                <table data-dojo-type="dojox/grid/DataGrid" id="resultsgrid" data-dojo-props="rowsPerPage:'1', rowSelector:'30px'">
                    <thead>
                        <tr>
                            <th width=40 field="FID">ID</th>
                            <th width=180 field="Shape">SHAPE</th>
                        </tr>
                    </thead>
                </table>
                <hr />
                <br />
            </div>
        </div>
    </div>
</body>

</html>

Re: Select from layer to buffer from checkbox and then buffer it.

anjelinaponkerat — Mon, 27 Nov 2017 16:23:12 GMT

I tested your code, but I think there is a bug in it and don't work for me!

Re: Select from layer to buffer from checkbox and then buffer it.

RobertScheitlin__GISP — Mon, 27 Nov 2017 16:59:14 GMT

Anjelina,

You have to start looking an the errors in the browsers web console. It probably says that you do not have the proxy url setup for the proper location on your machine.

Re: Select from layer to buffer from checkbox and then buffer it.

anjelinaponkerat — Mon, 27 Nov 2017 17:52:05 GMT

Yes

What should I do? Is it possible correct code?

Re: Select from layer to buffer from checkbox and then buffer it.

RobertScheitlin__GISP — Mon, 27 Nov 2017 18:11:34 GMT

Sure change the proxy url path to be the correct path on your machine.

Re: Select from layer to buffer from checkbox and then buffer it.

anjelinaponkerat — Tue, 28 Nov 2017 05:21:08 GMT

I changed map service and feature service address to my localhost also css and js address, but sample dont work. should change in these lines?:

esriConfig.defaults.io.proxyUrl = "proxy.ashx";
esriConfig.defaults.io.alwaysUseProxy = false;

If yes, how?

regards

Re: Select from layer to buffer from checkbox and then buffer it.

anjelinaponkerat — Tue, 28 Nov 2017 09:59:30 GMT

I solved proxy problem. but I don't know what is the meaning of:"Click to toggle each layer on or off"? because there in not toggle and... also the table is empty(image 2).

this is preview of output:

(image2):

Re: Select from layer to buffer from checkbox and then buffer it.

RobertScheitlin__GISP — Tue, 28 Nov 2017 14:39:01 GMT

Anjelina,

Sorry I am not going to spend time debugging the original posters code for another persons implementation of it.