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

AditiRoy1 · ‎07-11-2016

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>

RobertScheitlin__GISP · ‎11-28-2017

Anjelina,

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