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">
<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-->
<!--<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 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>
<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" onclick="showDialog();"><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" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'1', rowSelector:'30px'">
<thead>
<tr>
<th width=40 field="OBJECTID">ID</th>
<th width=180 field="DISTRICT_NAME_EN">NAME</th>
</tr>
</thead>
</table>
<hr />
<br />
</div>
</div>
</div>
<script type="text/javascript">
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>
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)?
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>
<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 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/Map...", {
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/Map...", {
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>
<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" onclick="showDialog();"><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" data-dojo-id="grid" id="grid" 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>
<script type="text/javascript">
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>
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/Map...", { 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/Map...", { 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>
I tested your code, but I think there is a bug in it and don't work for me!
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.
Yes
What should I do? Is it possible correct code?
Sure change the proxy url path to be the correct path on your machine.
Hi
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
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):