topic Re: Using JavaScript framework to create a mapping app in ArcGIS JavaScript Maps SDK Questions

Using JavaScript framework to create a mapping app

kunalshah — Fri, 10 Feb 2012 18:37:21 GMT

Hi All,
I wanted to create a web mapping application using ArcGIS JavaScript framework. I have created my own ArcGIS service using SQL Server to list the data points. Now, I want that when the user clicks on these points, the data should be populated in a small pop up window like demonstrated in JavaScript framework. How can I customize it use it with SQL server?

Re: Using JavaScript framework to create a mapping app

StephenLead — Fri, 10 Feb 2012 19:21:42 GMT

I don't fully understand what you mean with regards to SQL Server, but assuming that you're able to retrieve the point information (perhaps in JSON format) you could create a Feature Layer, which would allow you to specify the popup using setInfoTemplate. See documentation here.

Re: Using JavaScript framework to create a mapping app

kunalshah — Sun, 12 Feb 2012 01:33:00 GMT

I don't fully understand what you mean with regards to SQL Server, but assuming that you're able to retrieve the point information (perhaps in JSON format) you could create a Feature Layer, which would allow you to specify the popup using setInfoTemplate. See documentation here.

Thanks for the reply. I am quite new to ArcGIS. What I meant was, I have created the ArcGIS map service using SQL Server data to plot the data points(X,Y) on the map. (http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer?f=jsapi). The database contains other information as well which I want to display to the user when one clicks on the data point. So, I thought I will use JavaScript Framework to create the mapping app and display information on the popup.

Re: Using JavaScript framework to create a mapping app

StephenLead — Sun, 12 Feb 2012 20:05:08 GMT

Hi Kunal,

Thanks for the additional information. The link you sent shows that you have access to ArcGIS Server, so a suggestion is to start with the Feature Layer samples from the Samples page, for example the Popup or On Demand Mode samples, both of which contain examples of popups containing information.

Steve

Re: Using JavaScript framework to create a mapping app

kunalshah — Tue, 21 Feb 2012 02:21:05 GMT

Hi Kunal,

Thanks for the additional information. The link you sent shows that you have access to ArcGIS Server, so a suggestion is to start with the Feature Layer samples from the Samples page, for example the Popup or On Demand Mode samples, both of which contain examples of popups containing information.

Steve

I understand that I have to use the feature layers. But my question is how in order to display the required data on the popup, do I need to create a new arcgis service or the current service will work and I just need to write some server side logic so that the API can interact with the database and get the results on the popup.

Re: Using JavaScript framework to create a mapping app

EdSaunders — Sat, 11 Dec 2021 17:26:20 GMT

Hi Kunal,

First, define the content of the popup like below:

        var content = "<b>Type</b>: ${ftype}" +
                      "<br /><b>Code</b>: ${fcode}";
        var infoTemplate = new esri.InfoTemplate("Rivers", content);

Then, add the feature layer to your app, defining the infoTemplate you set above:

        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });

In the example above (from Feature Layer -> On demand samples), all values are available in the output fields of the feature layer but only ftype and fcode will actually display in the pop because they are the only fields set up in the content. You don't need any extra coding.

Hope that helps.

Ed

Re: Using JavaScript framework to create a mapping app

kunalshah — Sat, 11 Dec 2021 17:26:22 GMT

Hi Kunal,

First, define the content of the popup like below:
        var content = "<b>Type</b>: ${ftype}" +
                      "<br /><b>Code</b>: ${fcode}";
        var infoTemplate = new esri.InfoTemplate("Rivers", content);
Then, add the feature layer to your app, defining the infoTemplate you set above:
        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
In the example above (from Feature Layer -> On demand samples), all values are available in the output fields of the feature layer but only ftype and fcode will actually display in the pop because they are the only fields set up in the content. You don't need any extra coding.

Hope that helps.

Ed

Perfect! This is what I was looking for. When you look at my service http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer, do you think I need to modify this service so that I accomodate all my data in the service itself.

I am asking this because when I created this service, I didn't know how to do it. I created this service using Add XY data in ArcGIS 10, where X and Y are latitude and longitude fields in my table. I don't have anything related to spatial data besides latitude and longitude fields. I have other fields like Genus, Family etc. in my other table which I need to display on the popup. Do you think ArcGIS can display data by using table relationships?

Also, if I need to create a new service to use this idea, how do I do it, if not add xy data? (too many questions )

Re: Using JavaScript framework to create a mapping app

EdSaunders — Sat, 11 Dec 2021 17:26:25 GMT

Kunal,

In your map service you have four layers, each with the same schema:

FID (Type: esriFieldTypeOID, Alias: FID)
Shape (Type: esriFieldTypeGeometry, Alias: Shape)
StationKey (Type: esriFieldTypeDouble, Alias: StationKey)
StationID (Type: esriFieldTypeString, Alias: StationID, Length: 50 )
Latitude (Type: esriFieldTypeDouble, Alias: Latitude)
Longitude (Type: esriFieldTypeDouble, Alias: Longitude)
Location (Type: esriFieldTypeString, Alias: Location, Length: 254 )
Location_2 (Type: esriFieldTypeString, Alias: Location_2, Length: 254 )
County (Type: esriFieldTypeString, Alias: County, Length: 254 )
State (Type: esriFieldTypeString, Alias: State, Length: 254 )

If you want to display related information then you need to use the queryRelatedFeatures method on your feature layer. First, set up a relationship between your lat/long feature class and your external table in your service project. Restart the service, refresh the REST cache if necessary. At the REST endpoint you should see values in the 'Relationships' section at the bottom of the page, similar to http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/0. This means the related data can be used by the API.

After that you need to add some code to your app that will find the related records. There's a sample which shows you how to do this here http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/fl_query_related.html. The part that actually queries the related records is here:

      function findRelatedRecords(features) {
        var relatedTopsQuery = new esri.tasks.RelationshipQuery();
        relatedTopsQuery.outFields = ["*"];
        relatedTopsQuery.relationshipId = 3;
        relatedTopsQuery.objectIds = [features[0].attributes.OBJECTID];
        wellFeatureLayer.queryRelatedFeatures(relatedTopsQuery, function(relatedRecords) {
          var fset = relatedRecords[features[0].attributes.OBJECTID];
          var items = dojo.map(fset.features, function(feature) {
            return feature.attributes;
          });
          //Create data object to be used in store
          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: items
          };
 
          //Create data store and bind to grid.
          store = new dojo.data.ItemFileReadStore({ data:data });
          grid.setStore(store);
          grid.setQuery({ OBJECTID: '*' });
        });
      }

Note the relationshipId in the code above needs to be the same as the id of the relationship in the REST endpoint of your service.

Good luck!

Re: Using JavaScript framework to create a mapping app

kunalshah — Sat, 11 Dec 2021 17:26:28 GMT

Kunal,

In your map service you have four layers, each with the same schema:

FID (Type: esriFieldTypeOID, Alias: FID)
Shape (Type: esriFieldTypeGeometry, Alias: Shape)
StationKey (Type: esriFieldTypeDouble, Alias: StationKey)
StationID (Type: esriFieldTypeString, Alias: StationID, Length: 50 )
Latitude (Type: esriFieldTypeDouble, Alias: Latitude)
Longitude (Type: esriFieldTypeDouble, Alias: Longitude)
Location (Type: esriFieldTypeString, Alias: Location, Length: 254 )
Location_2 (Type: esriFieldTypeString, Alias: Location_2, Length: 254 )
County (Type: esriFieldTypeString, Alias: County, Length: 254 )
State (Type: esriFieldTypeString, Alias: State, Length: 254 )

If you want to display related information then you need to use the queryRelatedFeatures method on your feature layer. First, set up a relationship between your lat/long feature class and your external table in your service project. Restart the service, refresh the REST cache if necessary. At the REST endpoint you should see values in the 'Relationships' section at the bottom of the page, similar to http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/0. This means the related data can be used by the API.

After that you need to add some code to your app that will find the related records. There's a sample which shows you how to do this here http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/fl_query_related.html. The part that actually queries the related records is here:
      function findRelatedRecords(features) {
        var relatedTopsQuery = new esri.tasks.RelationshipQuery();
        relatedTopsQuery.outFields = ["*"];
        relatedTopsQuery.relationshipId = 3;
        relatedTopsQuery.objectIds = [features[0].attributes.OBJECTID];
        wellFeatureLayer.queryRelatedFeatures(relatedTopsQuery, function(relatedRecords) {
          var fset = relatedRecords[features[0].attributes.OBJECTID];
          var items = dojo.map(fset.features, function(feature) {
            return feature.attributes;
          });
          //Create data object to be used in store
          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: items
          };
 
          //Create data store and bind to grid.
          store = new dojo.data.ItemFileReadStore({ data:data });
          grid.setStore(store);
          grid.setQuery({ OBJECTID: '*' });
        });
      }
Note the relationshipId in the code above needs to be the same as the id of the relationship in the REST endpoint of your service.

Good luck!

Please have a look at this html:
http://geoapps.rc.rit.edu/eInvertebrates/map2.html (Please unzoom until you see PA state)

I am trying to use http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/widget_extendinfowindow.html.

here is the code I use to display data:

var template = new esri.InfoTemplate();
  template.setTitle("<b>${StationKey}</b>");
        template.setContent(getTextContent);

        var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/layers",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer);

    
        dojo.connect(map, 'onLoad', function(theMap) { 
         //resize the map when the browser resizes
         dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }

     function getTextContent(graphic) {
        var attr = graphic.attributes.StationKey;
        
        return  attr + "<br>" + graphic.attributes.Latitude   + "<br/> Planted on " + graphic.attributes.Longitude;
        
      }

I am trying to display the Latitude, Longitude info on the popup. I am not sure what if I am doing it right, the popup just says "No Information available" when clicked anywhere on the map or the data points. Am I using the code right ?

Re: Using JavaScript framework to create a mapping app

EdSaunders — Sat, 11 Dec 2021 17:26:31 GMT

Kunal,

The issue is that your feature layer is not being added to the map. You need to add the layer id to the following lines of code:

        var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/layers",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

Try this instead:

        var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/3",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

This will add the layer Export_Output to your app as a feature layer.

Check out the fiddle here.

Hope this helps.

Re: Using JavaScript framework to create a mapping app

kunalshah — Mon, 27 Feb 2012 02:19:20 GMT

Awesome! Thank you so much.. this forum rocks 🙂

Re: Using JavaScript framework to create a mapping app

kunalshah — Sat, 11 Dec 2021 17:26:33 GMT

Kunal,

The issue is that your feature layer is not being added to the map. You need to add the layer id to the following lines of code:

        var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/layers",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

Try this instead:

        var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/3",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

This will add the layer Export_Output to your app as a feature layer.

Check out the fiddle here.

Hope this helps.

Is there a way that I can add all the four feature layers to the map as what happens now is, as we are just adding layer 3, when we click on other data points, it just says No Information Available. I tried to add other layers 0,1,2 using

var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/2",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer);

with different variable names etc. But it is not helping the cause!

Re: Using JavaScript framework to create a mapping app

kunalshah — Tue, 28 Feb 2012 23:36:29 GMT

You can see the result here:
http://geoapps.rc.rit.edu/eInvertebrates/map2.html

Re: Using JavaScript framework to create a mapping app

kunalshah — Sun, 04 Mar 2012 14:07:22 GMT

Someone please help me to solve this problem..

Re: Using JavaScript framework to create a mapping app

EdSaunders — Sat, 11 Dec 2021 17:26:36 GMT

Kunal, sorry, been busy. You need to add the other layers as feature layers as well. The code below adds them all in order:

var featureLayer0 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer0);

var featureLayer1 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer1);

var featureLayer2 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/2",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer2);

var featureLayer3 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/3",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });
        
        map.addLayer(featureLayer3);

Now, when you click on each point it will show a popup. If there are coincident points, the API will choose the point that sits on the top and show the information for that. If you just want to show information for anywhere a user clicks then you should use a query task. This does not rely on feature layers.

Let me know how you go.

Re: Using JavaScript framework to create a mapping app

kunalshah — Tue, 06 Mar 2012 16:38:13 GMT

It is still giving the same result. I have added the four layers to the map, but only few points gives the proper information. Rest of them says "No information available". You can see the result here.
http://geoapps.rc.rit.edu/eInvertebrates/map2.html

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Popup</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/esri/dijit/css/Popup.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriScalebar{
        padding: 20px 20px;
      }
      #map{
        padding:0;
      }
      .esriPopup.myTheme .titlePane,
      .dj_ie7 .esriPopup.myTheme .titlePane .title {
        background-color: #899752;
        color: #333333;
        font-weight: bold;
      }
      .esriPopup.myTheme .titlePane {
        border-bottom: 1px solid #121310;
      }
      .esriPopup.myTheme a {
        color: #d6e68a;
      }
      .esriPopup.myTheme .titleButton,
      .esriPopup.myTheme .pointer,
      .esriPopup.myTheme .outerPointer,
      .esriPopup.myTheme .esriViewPopup .gallery .mediaHandle,
      .esriPopup.myTheme .esriViewPopup .gallery .mediaIcon {
          background-image: url(../images/popup.png);
      }
      .esriPopup.myTheme .contentPane,
      .esriPopup.myTheme .actionsPane {
        border-color: 1px solid #121310;
        background-color: #424242;
        color:#ffffff;
     }

    </style>
    <script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Popup");
      dojo.require("esri.layers.FeatureLayer");

      var map;

      function pageReady() {
        var popup = new esri.dijit.Popup({
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
        }, dojo.create("div"));


        var initExtent = new esri.geometry.Extent({"xmin":-10006637,"ymin":2050020,"xmax":-10000728,"ymax":4051042,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{
          extent:initExtent,
          infoWindow:popup,
          outFields: ["*"]
        });

        dojo.addClass(map.infoWindow.domNode, "myTheme");

        dojo.connect(map,"onClick",function(evt){
          var query = new esri.tasks.Query();
          query.geometry = pointToExtent(map,evt.mapPoint,10);

          var deferred = featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);

           map.infoWindow.setFeatures([deferred]);
           map.infoWindow.show(evt.mapPoint);

        });

        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        var incidentLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer");
        map.addLayer(incidentLayer);


        var template = new esri.InfoTemplate();
template.setTitle("<b>${StationKey}</b>");
        template.setContent(getTextContent);

        var featureLayer = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

        map.addLayer(featureLayer);

var featureLayer0 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

        map.addLayer(featureLayer0);

var featureLayer1 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/2",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

        map.addLayer(featureLayer1);

var featureLayer2 = new esri.layers.FeatureLayer("http://geoapps.rc.rit.edu/ArcGIS/rest/services/eInvertebrates2/MapServer/3",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
         outFields: ["*"],
          infoTemplate:template
        });

        map.addLayer(featureLayer2);

        dojo.connect(map, 'onLoad', function(theMap) {
         //resize the map when the browser resizes
         dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }

     function getTextContent(graphic) {
        var attr = graphic.attributes.StationID;

        return "<br>Station ID: " + attr + "<br>Latitude: " + graphic.attributes.Latitude   + "<br/>Longitude: " + graphic.attributes.Longitude + "<br/>Location: " + graphic.attributes.County + graphic.attributes.State ;

      }
      function formatDate(value){
        var inputDate = new Date(value);
        return dojo.date.locale.format(inputDate, {
          selector: 'date',
          datePattern: 'MMMM d, y'
        });
      }

     function pointToExtent(map, point, toleranceInPixel) {
       var pixelWidth = map.extent.getWidth() / map.width;
       var toleraceInMapCoords = toleranceInPixel * pixelWidth;
       return new esri.geometry.Extent( point.x - toleraceInMapCoords,
                    point.y - toleraceInMapCoords,
                    point.x + toleraceInMapCoords,
                    point.y + toleraceInMapCoords,
                    map.spatialReference );
      }

      dojo.addOnLoad(pageReady);
    </script>
</head>

<body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="border:1px solid #000;padding:0;">
     </div>
    </div>
</body>

</html>[/HTML]

Re: Using JavaScript framework to create a mapping app

EdSaunders — Wed, 07 Mar 2012 11:46:42 GMT

Yeah I forgot you were using a selectquery. Personally I would use an identify task. Check out this fiddle.

Re: Using JavaScript framework to create a mapping app

kunalshah — Wed, 07 Mar 2012 23:59:22 GMT

Yeah I forgot you were using a selectquery. Personally I would use an identify task. Check out this fiddle.

Thanks a lot that worked! 🙂

Re: Using JavaScript framework to create a mapping app

kunalshah — Sat, 11 Dec 2021 17:26:39 GMT

Can you please tell me one last thing as to how to display a legend for my service. I read about the legends in the ArcGIS JavaScript Samples but I am unable to see any legend info when I use the code.

1. I added dojo.require("esri.dijit.Legend");
2. I use this

//create a legend
         var layerInfo = dojo.map(layers, function(layer,index){
          return {layer:layer.layerObject,title:layer.title};
        });
        if(layerInfo.length > 0){
          var legendDijit = new esri.dijit.Legend({
            map:map,
            layerInfos:layerInfo
          },"legend");

          legendDijit.startup();
        }

3. Use these divs to display the legend:

[HTML]<div id="paneHeader" class="roundedCorners">
          Legend
        </div>
        <div style="padding:10px;" id="legend"></div>[/HTML]