Map with a single feature layer won't display a legend

DonaldLund · ‎07-25-2014

I have a map with a single feature layer, layered over a base map, and I can't get the javascript API to display a legend for it. If I throw in another layer, the legend displays. I'm following code example here: Legend | ArcGIS API for JavaScript. Why won't the legend display when only a single feature layer is defined? Do I have to define a dummy feature layer in order to display a legend? Is the legend widget using some kind of an array or something that requires more than one layer to be defined in order for it to work properly or display anything at all?

Any help or insights would be appreciated.

TimWitt2 · ‎07-28-2014

Donald,

After line 59 add:

if (layerInfo.length > 0) {

After line 64 add:

and replace 66 with:

map.addLayers([rivers]);

Whatever you have as your rivers layer will show up in your Legend.

Hope this answers your question.

Tim

View solution in original post

TimWitt2 · ‎07-25-2014

Donald,

you need to make sure that the featurelayer is actually visible on the map or it wont show in your legend. Some layers are configured to not show on a certain scale and once you zoom in/ out they start to show. Are you able to post a link to the layer that won't show?

Tim

DonaldLund · ‎07-25-2014

Tim,

Thanks for the quick response.

The layer polygons are actually visible on the map, but the legend is blank. The feature layer is actually based on a county shapefile for the state of Michigan.

I am not able to share a link because of the strategic nature of the data. If I don't make any progress, perhaps I can make a layer with bogus data that I can share.

Either way, I'll be back.

Thanks again.

TimWitt2 · ‎07-25-2014

Are you able to post your code, just remove the sensitive information?

DonaldLund · ‎07-25-2014

Sure. Here you go. And thanks.

FYI, the layer named 'waterbodies' is the one I'm using as a dummy layer that I toggle on and off. When it's on, the legend appears. When it's off the legendDiv content pane appears empty.

<!DOCTYPE html>
<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-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with legend</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">
  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }
    #rightPane {
      width: 20%;
    }
    #legendPane {
      border: solid #97DCF2 1px;
    }
  </style>
  <script src="http://js.arcgis.com/3.10/"></script>
  <script>
    var ccdURL="http://services2.arcgis.com/and the rest of the URL/FeatureServer/0";
    var token="?token=token string goes here";
    ccdURL=ccdURL+token;
    var map;
    require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
      "dojo/_base/array", "dojo/parser",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Legend,
      arrayUtils, parser
    ) {
      parser.parse();
      map = new Map("map", {
        basemap:"topo",
        center: [-85.7, 44.1],
        zoom: 7
      });
      var rivers = new FeatureLayer(ccdURL, {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
// this is a dummy layer I threw in just to make the legend work. If this is
// commented out, the legend will appear blank
      var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      //add the legend
      map.on("layers-add-result", function (evt) {
        var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
          return {layer:layer.layer, title:layer.layer.name};
        });
        var legendDijit = new Legend({
          map: map,
          layerInfos: layerInfo
        }, "legendDiv");
        legendDijit.startup();
      });
      map.addLayers([rivers, waterbodies]);
//      map.addLayer(rivers);
// I comment the frist line and use the second when I toggle off the dummy layer
    });
  </script>
</head>
<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; 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 id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
  </div>
</div>
</body>
</html>

TimWitt2 · ‎07-28-2014

Donald,

After line 59 add:

if (layerInfo.length > 0) {

After line 64 add:

and replace 66 with:

map.addLayers([rivers]);

Whatever you have as your rivers layer will show up in your Legend.

Hope this answers your question.

Tim

DonaldLund · ‎07-28-2014

Tim, you're a genius.

It turns out I had the layerInfo.length check on in earlier versions, and may have accidentally stripped it out when posting the example code.

The real key to making this work was changing map.addLayer(rivers) to map.addLayers([rivers]). Any idea why the former won't display a legend. Seems like it's some sort of an array thing.

TimWitt2 · ‎07-28-2014

You are right it has to do with an array. It trys to cycle through your add.Layers array, but when you don't use [], there is no array.

DonaldLund · ‎07-28-2014

Thanks Tim.

Regards,

Don

SatyanarayanaNarmala · ‎07-08-2015

Hi TIM,

Here is my code, where legend does not show anything

<!DOCTYPE html>

<html>

<head>

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

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>

<h1> Swachh Bharat - Swachh Telangana <br><span>Commissioner & Director of Municipal Administration, Government of Telangana </span> </h1> </a>

</div>

</a>

</div>

</a>

</div>

<h2> Sri K.Chandrasekhar Rao <br>

<span> Hon'ble Chief Minister of Telangana</span> </h2>

</div>

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

<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/ContentPane" id="legendPane"

data-dojo-props="title:'Legend', selected:true">

</div>

<div data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="title:'Pane 2'">

This pane could contain tools or additional content

</div>

<div id="map"

dojotype="dijit.layout.ContentPane"

region="center"

style="border:1px solid #000;margin:5px">

</div>

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

</body>

</html>