Hi Robert,
i am trying to implement the same with some drill down functionality. when i zoom to village level the point features should be highlighted, displaying their attributes in a table as in this example.
i am getting the values from the layers but not filling in the table.
where am i going wrong, here is the code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>AP Housing Application</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style type="text/css">body,html,#main{margin:0;padding:0;height:100%;width:100%;}</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>dojoConfig = { parseOnLoad: true };</script>
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
}
/* Change color of icons to match bar chart and selection symbol */
.esriPopup.dark div.titleButton,
.esriPopup.dark div.titlePane .title,
.esriPopup.dark div.actionsPane .action {
color: #000000;
font-weight: bold;
}
/* Additional customizations */
.esriPopup.dark .esriPopupWrapper {
border: none;
}
.esriPopup .contentPane {
text-align: left;
}
.esriViewPopup .gallery {
margin: 0 auto;
}
.title {
padding:10px;
background:#fafafa;
}
.title .logo img {
float:left;
margin-right:10px;
}
.title .logo h1{
color: #C9584F;
padding: 0px;
font-size: 30px;
font-weight: bold;
float:left;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
}
.title .logo h1>span{
color: #111;
padding: 0px;
font-size: 20px;
font-weight: bold;
}
.title .cm {
float:right;
text-align:center;
color: #C9584F;
font-size:15px;
}
.title .cm h2{
color: #C9584F;
font-size:15px;
font-family:Arial, Helvetica, sans-serif
}
</style>
<script>
var map;
var veTileLayer;
var findTask, findParams;
var center, zoom;
var grid, store, store3;
var county;
var resizeTimer;
require([
"esri/map", "esri/tasks/query", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "dojo/_base/array","dojo/DeferredList",
"dijit/form/ComboBox", "dojo/data/ItemFileReadStore","dojo/store/Memory",
"esri/virtualearth/VETiledLayer", "dijit/form/Button",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"dijit/registry",
"dojo/_base/connect",
"dojox/grid/DataGrid",
"esri/dijit/Popup", "esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol", "esri/Color",
"dojo/dom-class", "dojo/dom-construct",
"dojox/charting/Chart", "dojox/charting/themes/Dollar",
"dojo/on", "dojo/domReady!"],
function(Map, query, parser, BorderContainer, ContentPane,
IdentifyTask, IdentifyParameters,arrayUtils,DeferredList,
ComboBox, ItemFileReadStore, Memory,
VETiledLayer, Button,
FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, registry, connect, DataGrid,
Popup, PopupTemplate,
FeatureLayer,
SimpleFillSymbol, Color,
domClass, domConstruct,
Chart, theme,
on, Scalebar) {
parser.parse();
/* map = new Map("map");
function init() {
//Creates the Virtual Earth layer to add to the map
//Example for adding a Bing Maps key
// bingMapsKey: "1B2C3OlkbxWHYa1b2c3qkPrO_Ou3nRrGtSa_5Op-xvPNya1b2c3",
veTileLayer = new esri.virtualearth.VETiledLayer({
bingMapsKey:'Ame5R45lEOTdPXxlhxuAXN2sDT8vyEJcgXGeZpPOPHBLbg2XqkPMaL5OJHp0OlV0',
mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL
});
map.addLayer(veTileLayer);
infoWindow: popup
}
dojo.ready(init);*/
var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
var popup = new Popup({
fillSymbol: fill,
titleInBody: false
}, domConstruct.create("div"));
//Add the dark theme which is customized further in the <style> tag at the top of this page
domClass.add(popup.domNode, "dark");
map = new Map("map", {
basemap: "satellite",
/*center: [-122.45, 37.75], // longitude, latitude */
center : [79.2, 18.10],
zoom: 6,
infoWindow: popup
});
var template = new PopupTemplate({
title: "AP HOUSING APPLICANTS <BR>",
description: "<BR> BENEFICIARY ID: {ben_id} <br> <br>BENEFICIARY NAME: {ben_name} <br><br>FATHER'S NAME: {father_nam}<br><br>AADHAR ID : {uid} <br><br> SCHEME NAME: {scheme_nam} <br><br>LATITUDE: {lat} <br><br> LONGITUDE: {lon} <br>",
});
var featureLayer = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: template
});
veTileLayer = new VETiledLayer({
bingMapsKey:'Ame5R45lEOTdPXxlhxuAXN2sDT8vyEJcgXGeZpPOPHBLbg2XqkPMaL5OJHp0OlV0',
mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL
});
map.addLayer(veTileLayer);
map.addLayer(featureLayer);
var polygonQuery = null;
var polygonQueryTask = null;
var polygonQuery1 = null;
var polygonQueryTask1 = null;
var polygonQuery2 = null;
var polygonQueryTask2 = null;
var polygonQuery3 = null;
var polygonQueryTask3 = null;
// RIYAS: Wait till map is loaded before firing query, needed for getting map spatial reference
map.on("load", function () {
var queryTask = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/1");
// var queryTask1 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/sample/pattasample/MapServer/2");
//Define query parameters
var query = new esri.tasks.Query();
query.outFields = ["dname"];
query.returnGeometry = true;
query.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query.where = "dname <> ''"
queryTask.execute(query,populateList);
//Define query parameters
/*var query1 = new esri.tasks.Query();
query1.outFields = ["dname", "mname"];
query1.returnGeometry = true;
query1.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query1.where = "mname<> ''"
queryTask1.execute(query1,populateList1);*/
// RIYAS: Setup query to behave as identify
polygonQueryTask = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/1");
polygonQuery = new esri.tasks.Query();
polygonQuery.returnGeometry = true;
polygonQuery.outFields = ["dname"];
polygonQuery.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
polygonQuery.outSpatialReference = map.spatialReference;
// RIYAS: Setup query to behave as identify
polygonQueryTask1 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/2");
polygonQuery1 = new esri.tasks.Query();
polygonQuery1.returnGeometry = true;
polygonQuery1.outFields = ["dname", "mname"];
polygonQuery1.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
polygonQuery1.outSpatialReference = map.spatialReference;
// RIYAS: Setup query to behave as identify
polygonQueryTask2 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/3");
polygonQuery2 = new esri.tasks.Query();
polygonQuery2.returnGeometry = true;
polygonQuery2.outFields = ["dname", "mname", "vname"];
polygonQuery2.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
polygonQuery2.outSpatialReference = map.spatialReference;
polygonQueryTask3 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/0");
polygonQuery3 = new esri.tasks.Query();
polygonQuery3.returnGeometry = true;
polygonQuery3.outFields = ["*"];
polygonQuery3.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
polygonQuery3.outSpatialReference = map.spatialReference;
});
var infoTemplate = new esri.InfoTemplate("District: ${dname}", "District : ${dname}<br/>");
var infoTemplate1 = new esri.InfoTemplate("DISTRICT: ${dname}", "District : ${dname}<br/> Mandal : ${mname}<br/> ");
var infoTemplate2 = new esri.InfoTemplate("DISTRICT: ${dname}", "District : ${dname}<br/> Mandal : ${mname}<br/> Village : ${vname}<br/>");
var infoTemplate3 = new esri.InfoTemplate("DISTRICT: ${ben_id}", "BENEFICIARY : ${ben_id}<br/>BENEFICIARY name : ${ben_name}<br/>fathers name : ${father_nam}<br/> AADHAR : ${uid}<br/> scheme name : ${scheme_nam}<br/> District : ${dname}<br/> Mandal : ${mname}<br/> Village : ${vname}<br/>");
var infoTemplates = [infoTemplate, infoTemplate1,infoTemplate2,infoTemplate3];
//map.on("click", executeIdentifyTask);
// RIYAS: Execute query to behave as identify
function executeIdentifyTask (where, pnt) {
//polygonQuery.where = event.mapPoint;
//polygonQuery1.where = event.mapPoint;
polygonQuery.where = where;
polygonQuery1.where = where;
polygonQuery2.where = where;
polygonQuery3.where = where;
var deferred = polygonQueryTask
.execute(polygonQuery);
var deferred1 = polygonQueryTask1
.execute(polygonQuery1);
var deferred2 = polygonQueryTask2
.execute(polygonQuery2);
var deferred3 = polygonQueryTask3
.execute(polygonQuery3);
// InfoWindow expects an array of features from each deferred
// object that you pass. If the response from the task execution
// above is not an array of features, then you need to add a callback
// like the one above to post-process the response and return an
// array of features.
var defList = new DeferredList([deferred, deferred1, deferred2, deferred3]).then(function (results){
var features = [];
arrayUtils.forEach(results,function(result, idx){
if (result[0] === true){
features = features.concat(arrayUtils.map(result[1].features, function (feature) {
feature.setInfoTemplate(infoTemplates[idx]);
return feature;
}));
}
});
map.infoWindow.setFeatures(features);
map.infoWindow.show(pnt);
});
}
//var initialExtent = new esri.geometry.Extent(-85.915,38.105,-85.52,38.33,
// new esri.SpatialReference({wkid:4326}) );
// map = new esri.Map("map", {extent:initialExtent});
//Create tiled and dynamic map services and add to the map - for the dynamic service set the transparency
//and provide an id so we can access it later
// map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer",
{"opacity":1,"id":"dynamic"}));
function populateList(results) {
//initialize InfoTemplate
//create symbol for selected features
symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setSize(0.1);
symbol.setColor(new dojo.Color([255, 255, 0, 0.5]));
//Populate the dropdown list box with unique values
// var county;
var values = [];
var testVals={};
//Add option to display all zoning types to the dropdown list
values.push({name:""})
var features = results.features;
dojo.forEach (features, function(feature) {
county = feature.attributes.dname;
if (!testVals[county]) {
testVals[county] = true;
values.push({name:county,shape:feature.geometry,centroid: feature.geometry.type === "point" ? feature.geometry : feature.geometry.getCentroid() }); // RIYAS: set shape to list store
}
});
var dataItems = {
identifier: 'name',
label: 'name',
items: values
};
var store = new dojo.store.Memory({data:dataItems});
dijit.byId("mySelect").store = store;
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures = results.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = resultFeatures;
graphic.setSymbol(symbol);
//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
// This takes the graphics array you get back from your query and
// gets the overall extent for them. Make sure return geometry is set to
// true in your query.
var extent = esri.graphicsExtent(results.features);
// Use that to set the extent, 1.5 is something I use in my app, but play with
// it to find a setting you like, setting the second parameter to true will get you an extend
// that is at the closest level of your cached service.
map.setExtent(extent.expand(1.0), true);
}
}
// this replaces your applyLayerDef() function
dijit.byId("mySelect").on("change", function () {
//Filter the layer to display only the selected zoning types
var county = dijit.byId("mySelect").value;
var centroid = dijit.byId("mySelect").item.centroid;
if (county !== 'ALL') {
var layerDefs = [];
layerDefs[2] = "dname = " + "'" + county + "'";
layerDefs.visibleLayers = [2];
map.setExtent(dijit.byId("mySelect").item.shape.getExtent(infoTemplate).expand(1.7)); // RIYAS: Get shape from list store and zoom to its extent
executeIdentifyTask("dname = '" + county + "'", centroid);
// RIYAS: cannot set layer defintion for dynamic map service.
//map.getLayer("dynamic").setLayerDefinitions(layerDefs);
}
else {
// RIYAS: cannot set layer defintion for dynamic map service.
//map.getLayer("dynamic").setDefaultLayerDefinitions();
}
var queryTask1 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/2");
var query1 = new esri.tasks.Query();
query1.outFields = ["dname", "mname"];
query1.returnGeometry = true;
query1.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query1.where = "mname<> '' and dname='"+dijit.byId("mySelect").value+"'"
queryTask1.execute(query1,populateList1);
});
function populateList1(results1) {
//initialize InfoTemplate
/* alert(dijit.byId("mySelect").value)
var query1 = new esri.tasks.Query();
query1.outFields = ["dname", "mname"];
query1.returnGeometry = true;
query1.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query1.where = "mname<> ''"
queryTask1.execute(query1,populateList1);
*/
//create symbol for selected features
symbol1 = new esri.symbol.SimpleMarkerSymbol();
symbol1.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
symbol1.setSize(0.1);
symbol1.setColor(new dojo.Color([255, 255, 0, 0.5]));
//Populate the dropdown list box with unique values
var city;
var values1 = [];
var testVals1={};
//Add option to display all zoning types to the dropdown list
values1.push({name:""})
var features1 = results1.features;
dojo.forEach (features1, function(feature1) {
city = feature1.attributes.mname;
if (!testVals1[city]) {
testVals1[city] = true;
values1.push({name:city,shape:feature1.geometry,centroid: feature1.geometry.type === "point" ? feature1.geometry : feature1.geometry.getCentroid()}); // RIYAS: set shape to list store
}
});
var dataItems1 = {
identifier: 'name',
label: 'name',
items: values1
};
var store1 = new dojo.store.Memory({data:dataItems1});
dijit.byId("mySelect1").store = store1;
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures1 = results1.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures1.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic1 = resultFeatures1;
graphic1.setSymbol(symbol1);
//Set the infoTemplate.
graphic1.setInfoTemplate(infoTemplate1);
//Add graphic to the map graphics layer.
map.graphics.add(graphic1);
// This takes the graphics array you get back from your query and
// gets the overall extent for them. Make sure return geometry is set to
// true in your query.
var extent1 = esri.graphicsExtent(results1.features);
// Use that to set the extent, 1.5 is something I use in my app, but play with
// it to find a setting you like, setting the second parameter to true will get you an extend
// that is at the closest level of your cached service.
map.setExtent(extent1.expand(1.0), true);
}
}
// this replaces your applyLayerDef() function
dijit.byId("mySelect1").on("change", function () {
//Filter the layer to display only the selected zoning types
var city = dijit.byId("mySelect1").value;
var centroid = dijit.byId("mySelect1").item.centroid;
if (city !== 'ALL') {
var layerDefs1 = [];
layerDefs1[2] = "mname = " + "'" + city + "'";
layerDefs1.visibleLayers = [2];
map.setExtent(dijit.byId("mySelect1").item.shape.getExtent(infoTemplate1).expand(1.7)); // RIYAS: Get shape from list store and zoom to its extent
executeIdentifyTask("mname = '" + city + "'", centroid);
// RIYAS: cannot set layer defintion for dynamic map service.
//map.getLayer("dynamic").setLayerDefinitions(layerDefs);
}
else {
// RIYAS: cannot set layer defintion for dynamic map service.
//map.getLayer("dynamic").setDefaultLayerDefinitions();
}
var queryTask2 = new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/3");
var query2= new esri.tasks.Query();
query2.outFields = ["dname", "mname","vname"];
query2.returnGeometry = true;
query2.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query2.where = "vname<> '' and dname='"+dijit.byId("mySelect").value+"'and mname='"+dijit.byId("mySelect1").value+"'"
//query1.where = "mname<> '' and dname='"+dijit.byId("mySelect").value+"'"
queryTask2.execute(query2,populateList2);
});
function populateList2(results2) {
//initialize InfoTemplate
/* alert(dijit.byId("mySelect").value)
var query1 = new esri.tasks.Query();
query1.outFields = ["dname", "mname"];
query1.returnGeometry = true;
query1.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query1.where = "mname<> ''"
queryTask1.execute(query1,populateList1);
*/
//create symbol for selected features
symbol1 = new esri.symbol.SimpleMarkerSymbol();
symbol1.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
symbol1.setSize(0.1);
symbol1.setColor(new dojo.Color([255, 255, 0, 0.5]));
//Populate the dropdown list box with unique values
var vill;
var values2 = [];
var testVals2={};
//Add option to display all zoning types to the dropdown list
values2.push({name:""})
var features2 = results2.features;
dojo.forEach (features2, function(feature2) {
vill = feature2.attributes.vname;
if (!testVals2[vill]) {
testVals2[vill] = true;
values2.push({name:vill,shape:feature2.geometry,centroid: feature2.geometry.type === "point" ? feature2.geometry : feature2.geometry.getCentroid()}); // RIYAS: set shape to list store
}
});
var dataItems2 = {
identifier: 'name',
label: 'name',
items: values2
};
var store2 = new dojo.store.Memory({data:dataItems2});
dijit.byId("mySelect2").store = store2;
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures2 = results2.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures2.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic2 = resultFeatures2;
graphic2.setSymbol(symbol1);
//Set the infoTemplate.
graphic2.setInfoTemplate(infoTemplate2);
//Add graphic to the map graphics layer.
map.graphics.add(graphic2);
// This takes the graphics array you get back from your query and
// gets the overall extent for them. Make sure return geometry is set to
// true in your query.
var extent2 = esri.graphicsExtent(results2.features);
// Use that to set the extent, 1.5 is something I use in my app, but play with
// it to find a setting you like, setting the second parameter to true will get you an extend
// that is at the closest level of your cached service.
map.setExtent(extent2.expand(1.0), true);
}
}
// this replaces your applyLayerDef() function
dijit.byId("mySelect2").on("change", function () {
//Filter the layer to display only the selected zoning types
var vill = dijit.byId("mySelect2").value;
var centroid = dijit.byId("mySelect2").item.centroid;
if (vill !== 'ALL') {
var layerDefs1 = [];
layerDefs1[2] = "vname = " + "'" + vill + "'";
layerDefs1.visibleLayers = [2];
map.setExtent(dijit.byId("mySelect2").item.shape.getExtent(infoTemplate2).expand(1.7)); // RIYAS: Get shape from list store and zoom to its extent
executeIdentifyTask("vname = '" + vill + "'", centroid);
// RIYAS: cannot set layer defintion for dynamic map service.
//map.getLayer("dynamic").setLayerDefinitions(layerDefs);
}
else {
// RIYAS: cannot set layer defintion for dynamic map service.
//map.getLayer("dynamic").setDefaultLayerDefinitions();
}
var queryTask3= new esri.tasks.QueryTask("http://gisserver.cgg.gov.in/arcgis/rest/services/HOUSING/SRIKHOUSAP/MapServer/0");
var query3= new esri.tasks.Query();
query3.returnGeometry = true;
query3.outFields = ["*"];
query3.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query3.where = "dname='"+dijit.byId("mySelect").value+"'and mname='"+dijit.byId("mySelect1").value+"'and vname='"+dijit.byId("mySelect2").value+"'"
//query1.where = "mname<> '' and dname='"+dijit.byId("mySelect").value+"'"
queryTask3.execute(query3,populateList3);
});
function populateList3(results3) {
//initialize InfoTemplate
/* alert(dijit.byId("mySelect").value)
var query1 = new esri.tasks.Query();
query1.outFields = ["dname", "mname"];
query1.returnGeometry = true;
query1.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query1.where = "mname<> ''"
queryTask1.execute(query1,populateList1);
*/
//create symbol for selected features
map.graphics.clear();
symbol1 = new esri.symbol.SimpleMarkerSymbol();
symbol1.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
symbol1.setSize(1);
symbol1.setColor(new dojo.Color([255, 255, 0, 0.5]));
var items123 = arrayUtils.map(results3.features, function (result3) {
var graphic = result3;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result3.attributes;
});
//Populate the dropdown list box with unique values
var FID;
var values3 = [];
var item123 = [];
var testVals3={};
//Add option to display all zoning types to the dropdown list
values3.push({name:""})
var features3 = results3.features;
dojo.forEach (features3, function(feature3) {
FID = feature3.attributes.FID;
if (!testVals3[FID]) {
testVals3[FID] = true;
//values3.push({name:ben_id,shape:feature3.geometry,centroid: feature3.geometry.type === "point" ? feature3.geometry : feature3.geometry.getCentroid()}); // RIYAS: set shape to list store
values3.push(feature3.attributes);
/*values3.push({"ben_id":ben_id,
"ben_name": feature3.attributes.ben_name,
"dname": feature3.attributes.dname,
"father_nam": feature3.attributes.father_nam,
"mname": feature3.attributes.mname,
"scheme_nam": feature3.attributes.scheme_nam,
"uid": feature3.attributes.uid,
"vname": feature3.attributes.vname,
*/
}
});
var dataItems3 = {
identifier: 'FID',
label: 'FID',
items: item123
};
console.log(values3);
var store3 = new ItemFileReadStore({data:dataItems3});
var grid = registry.byId("grid");
grid.setStore(store3);
grid.on("rowclick", onRowClickHandler);
map.centerAndZoom(center, zoom);
//remove all graphics on the maps graphics layer
//map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures3 = results3.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures3.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic3 = resultFeatures3;
graphic3.setSymbol(symbol1);
//Set the infoTemplate.
graphic3.setInfoTemplate(infoTemplate3);
//Add graphic to the map graphics layer.
map.graphics.add(graphic3);
// This takes the graphics array you get back from your query and
// gets the overall extent for them. Make sure return geometry is set to
// true in your query.
var extent2 = esri.graphicsExtent(results3.features);
// Use that to set the extent, 1.5 is something I use in my app, but play with
// it to find a setting you like, setting the second parameter to true will get you an extend
// that is at the closest level of your cached service.
map.setExtent(extent2.expand(1.0), true);
}
}
function onRowClickHandler(evt) {
var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).FID;
var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
return ((graphic.attributes) && graphic.attributes.FID === clickedTaxLotId);
});
if ( selectedTaxLot.length ) {
map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
}
}
function resizeMap() {
//Handle browser resize
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 800);
}
});
</script>
</head>
<body class="claro" oncontextmenu="return false">
<!-- <div class="title">
<div class="logo"> <a href="http://elandts.cgg.gov.in/"><img src="http://elandts.cgg.gov.in:80/website/images/TSlogo.png" width="80" height="80" alt="logo"/>
<h1> Land Regularization Management System <br><span>Government of Telangana </span></h1> </a>
</div>
<div class="cm">
<div class="pull-right">
<img src="http://elandts.cgg.gov.in:80/website/images/cm.png" style="" class="img-responsive" alt="cm" width="50"/> <br>
<h2> Sri K.Chandrasekhar Rao <br>
<span> Hon'ble Chief Minister of Telangana</span> </h2>
</div>
</div>
<br clear="all">
</div> -->
<div id="main" style="width:2024px; height:1012px; border:1px solid #000;"
dojotype="dijit.layout.BorderContainer"
design="headline"
gutters="true">
<div id="header"
dojotype="dijit.layout.ContentPane"
region="left"
style="height:25px;">
<select id="mySelect"
dojotype="dijit.form.ComboBox"
style="width:300px;font-size:18px;"
autoComplete="true"
forceValidOption="false"
value="Select a District"></select> <BR> <BR>
<select id="mySelect1"
dojotype="dijit.form.ComboBox"
style="width:300px;font-size:18px;"
autoComplete="true"
forceValidOption="false"
value="Select a Mandal"></select> <BR> <BR>
<select id="mySelect2"
dojotype="dijit.form.ComboBox"
style="width:300px;font-size:18px;"
autoComplete="true"
forceValidOption="false"
value="Select a Village"></select> <BR> <BR>
<button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL);">Aerial</button>
<button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS)">Aerial with labels</button>
<button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD)">Roads</button>
</div>
<div id="map"
dojotype="dijit.layout.ContentPane"
region="center"
style="border:1px solid #000;margin:5px">
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
<table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'11', rowSelector:'20px'">
<thead>
<tr>
<th field="FID"width="30%">FID</th>
<th field="ben_id"width="30%">BENEFICIARY ID</th>
<th field="ben_name"width="30%" >BENEFICIARY NAME</th>
<th field="father_nam" width="30%">FATHERS NAME</th>
<th field="uid" width="30%">AADHAR NO </th>
<th field="scheme_nam" width="30%">SCHEME NAME</th>
<th field="lat" width="30%">LATITUDE</th>
<th field="long" width="30%">LONGITUDE</th>
<th field="dname" width="30%">DISTRICT</th>
<th field="mname" width="30%">MANDAL </th>
<th field="vname" width="30%">VILLAGE</th>
</tr>
</thead>
</table>
</div>
</div>
<div style="position:relative;">
</div>
</body>
</html>
thanks
satya