Displaying feature layer symbol in a custom table of contents

[ChristianDebono]

I have built a custom table of contents similar  to the TOC widget http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109. The only problem I have is how I am going to display the feature layer icon as the legend.

function generateLegend(listOfLayers){ 
 require(["esri/layers/FeatureLayer", "dojo/on"],
 function (FeatureLayer, on) {
      
  //initialazing the feature layer and adding them in a list and on the map
  var layerList = [];
  for(var i=0; i < listOfLayers.length; i++){
   layerList = new FeatureLayer(urlList);
   map.addLayer(layerList);
  }  

  for(var i = 0; i < nameList.length; i++){
   var layerId =  "Layer" + i; //id for the layer
   var layerPostid = "teste" + i; //id for the layer   
   
                        //I also want to display the icon here
   //html list to be dispalyed on the browser
   layerDisplay += "<li id='" + layerPostid + "'><input type='checkbox' checked='yes' id=" + layerId + ">" + legendIcon + "<a href='#' id=" + layerId + " onclick='return false;'>" + nameList + "</a><ul><li><div class='slider'></div></li></ul></li>";    
  } 
 
  layerDisplay += "</ul>";   
  //displaying the legend 
  $("#tocLegend").html(layerDisplay);           
     
 });
}

Any ideas how I could achieve this please?

[Anonymous User]

You can use esri/request from the JavaScript API to get legend image urls from the server: ArcGIS REST API‌ documentation gives more information. Sorry I don't have time to post code but that should help get you started.

[Anonymous User]

So here is some code...sorry not sure how to format in the new forums:

function legendRequest(mapServerURL, thisLayer2) {

    //mapserverURL is something like "http://www.server.com/arcgis/rest/services/myMap/MapServer"

    var fetchURL = mapServerURL + '/legend/';

    // Use server requests to get the legend symbol image urls

    var legendRequestPromise = esriRequest({

               url : fetchURL,

               content : {

               f : "json"

                },

               handleAs : "json"

  });

   legendRequestPromise.then(function(jsonResults) {

             console.log(jsonResults);

            // If you look at the JSON response in the console you can see where image urls are given

            // layers --> 0 -->legend --> 0 -->url

            // Then use these to construct the URL to place in your html divs (format: mapserverURL/layerID/images/imageURL)

   }, function(error) {

                 console.log("Error: ", error.message);

   });

};