HI
Here is my code, where legend does not show anything
<!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> </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.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 {
height: 97%;
width: 98%;
margin: 1%;
}
#rightPane {
width: 90%;
}
#legendPane {
border: solid #97DCF2 1px;
}
</style>
<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", "esri/dijit/Legend", "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", "dijit/layout/AccordionContainer", "dojo/domReady!"],
function(Map, query, parser, BorderContainer, ContentPane, Legend,
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();
registry.byId("mySelect1").on("change", doFind);
/* 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");
findTask = new FindTask("http://gisserver.cgg.gov.in/arcgis/rest/services/CDMA/swachhts/MapServer/");
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: "SWACHH TELANGANA APPLICANTS <BR>",
description: "<BR>BENEFICIARY ID: {beneficiary_id} <br> <br>BENEFICIARY NAME: {applicant_name} <br><br>FATHERS NAME: {fathername}<br><br> ADDRESS: {address} <br><br> CASTE: {caste} <br> <br> MOBILE: {mobile} <br><br> AADHAR NO:: {aadhar_number}<br><br> COMMUNICATION STATUS: {comm_status} <br><br> PHOTO: <a href=http://swachhts.cgg.gov.in/photos_uploaded/{applicant_photo} > <img src={applicant_photo} WIDTH=200 HEIGHT=200></a> <br><br> SITE PHOTO : <a href=http://swachhts.cgg.gov.in/photos_uploaded/{applicant_site_photo} > <img src={applicant_site_photo} WIDTH=200 HEIGHT=200></a> <br><br> STAGE : {stage}<br>",
});
var featureLayer = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/CDMA/swachhts/MapServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: template
});
var rivers = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/CDMA/swachhts/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
var waterbodies = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/CDMA/swachhts/MapServer/2", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
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;
// 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/CDMA/swachhts/MapServer/2");
highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0]));
symbol321 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 0.1, null, new Color([255, 255, 0, 0.5]));
// 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/CDMA/swachhts/MapServer/2");
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/CDMA/swachhts/MapServer/1");
polygonQuery1 = new esri.tasks.Query();
polygonQuery1.returnGeometry = true;
polygonQuery1.outFields = ["place", "name"];
polygonQuery1.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
polygonQuery1.outSpatialReference = map.spatialReference;
// RIYAS: Setup query to behave as identify
findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["town_city"];
findParams.outSpatialReference = map.spatialReference;
console.log("find sr: ", findParams.outSpatialReference);
});
var infoTemplate = new esri.InfoTemplate("District: ${dname}", "District : ${dname}<br/>");
var infoTemplate1 = new esri.InfoTemplate("DISTRICT: ${place}", "District : ${place}<br/> Mandal : ${name}<br/> ");
var infoTemplates = [infoTemplate, infoTemplate1];
//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;
var deferred = polygonQueryTask
.execute(polygonQuery);
var deferred1 = polygonQueryTask1
.execute(polygonQuery1);
// 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]).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/CDMA/swachhts/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/CDMA/swachhts/MapServer/1");
var query1 = new esri.tasks.Query();
query1.outFields = ["*"];
query1.returnGeometry = true;
query1.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference
query1.where = "name <> '' and place ='"+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.name;
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] = "name = " + "'" + city + "'";
layerDefs1.visibleLayers = [2];
//alert(dijit.byId("mySelect1").value)
map.setExtent(dijit.byId("mySelect1").item.shape.getExtent(infoTemplate1).expand(1.7)); // RIYAS: Get shape from list store and zoom to its extent
executeIdentifyTask("name = '" + 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();
}
});
function doFind() {
//Set the search text to the value in the box
var house = dijit.byId("mySelect1").value;
//alert(house)
findParams.searchText = house;
findTask.execute(findParams, showResults);
}
function showResults(results) {
map.graphics.clear();
//This function works with an array of FindResult that the task returns
symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setSize(1);
symbol.setColor(new dojo.Color([255, 255, 0, 0.5]));
// map.graphics.clear();
// var symbol = new SimpleFillSymbol(
// SimpleFillSymbol.STYLE_SOLID,
// new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),
// new Color([98, 194, 204, 0.5])
// );
//create array of attributes
var items = arrayUtils.map(results, function (result) {
var graphic = result.feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result.feature.attributes;
});
//Create data object to be used in store
var data = {
identifier : "beneficiary_id", //This field needs to have unique values
label : "beneficiary_id", //Name field for display. Not pertinent to a grid but may be used elsewhere.
items : items
};
//Create data store and bind to grid.
store = new ItemFileReadStore({
data : data
});
var grid = registry.byId("grid");
grid.setStore(store);
grid.on("rowclick", onRowClickHandler);
//Zoom back to the initial map extent
map.centerAndZoom(center, zoom);
}
/* function onRowClickHandler(evt) {
map.graphics.clear();
var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).benid;
var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
return ((graphic.attributes) && graphic.attributes.benid === clickedTaxLotId[0]);
});
if ( selectedTaxLot.length ) {
map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
}
}*/
function onRowClickHandler(evt){
var FindDeceasedName = grid.getItem(evt.rowIndex).beneficiary_id;
var SelectedFindDeceasedName;
dojo.forEach(map.graphics.graphics,function(graphic){
graphic.setSymbol(symbol321);
if((graphic.attributes) && graphic.attributes.beneficiary_id === FindDeceasedName){
SelectedFindDeceasedName = graphic;
SelectedFindDeceasedName.setSymbol(highlightSymbol);
return;
}
});
var FindDeceasedNameExtent = SelectedFindDeceasedName.geometry;
var factor = -200;
var extent;
extent = new esri.geometry.Extent({ "xmin": FindDeceasedNameExtent.x - factor, "ymin": FindDeceasedNameExtent.y - factor, "xmax": FindDeceasedNameExtent.x + factor, "ymax": FindDeceasedNameExtent.y + factor, "spatialReference": { "wkid": 3857} });
map.setExtent(extent);
}
function resizeMap() {
//Handle browser resize
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 800);
}
map.on("layers-add-result", function (evt) {
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legendDijit = new Legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
});
map.addLayers([waterbodies, rivers]);
// map.addLayer(featureLayer);
});
</script>
</head>
<body class="claro" oncontextmenu="return false">
<div class="title">
<div class="logo"> <a href="http://swachhts.cgg.gov.in/Login.do"><img src="http://elandts.cgg.gov.in:80/website/images/TSlogo.png" width="80" height="80" alt="logo"/>
<h1> Swachh Bharat - Swachh Telangana <br><span>Commissioner & Director of Municipal Administration, Government of Telangana </span> </h1> </a>
</div>
<div class="logo"> <a href="http://swachhts.cgg.gov.in/Login.do"><img src="http://swachhts.cgg.gov.in:80/images/SBM-Logo.png" width="100" height="80" alt="logo"/>
</a>
</div>
<div class="logo"> <a href="http://swachhts.cgg.gov.in/Login.do"><img src="http://swachhts.cgg.gov.in:80/images/swts_logo.png" width="100" height="80" alt="logo"/>
</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:800px; 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:200px;font-size:18px;"
autoComplete="true"
forceValidOption="false"
value="Select a District"></select> <BR> <BR>
<select id="mySelect1"
dojotype="dijit.form.ComboBox"
style="width:200px;font-size:18px;"
autoComplete="true"
forceValidOption="false"
value="Select a Town"></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><BR> <BR>
<!--<button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD)">Roads</button>-->
<div id="content"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width: 100%; height: 50%; margin: 0;">
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="title:'Pane 2'">
This pane could contain tools or additional content
</div>
</div>
</div>
</div>
</div>
<div id="map"
dojotype="dijit.layout.ContentPane"
region="center"
style="border:1px solid #000;margin:5px">
</div>
</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:'6', rowSelector:'10px'">
<thead>
<tr>
<th field="beneficiary_id" width="25%">BENEFICIARY ID</th>
<th field="applicant_name" width="25%">APPLICANT NAME</th>
<th field="fathername" width="25%">FATHERS NAME</th>
<th field="aadhar_number" width="25%">AADHAR NO </th>
<th field="stage" width="25%">STAGE</th>
<th field="caste" width="25%">CASTE</th>
</tr>
</thead>
</table>
</div>
</div>
<div style="position:relative;">
</div>
</body>
</html>