topic Re: Displaying feature layer symbol in a custom table of contents in ArcGIS JavaScript Maps SDK Questions

Displaying feature layer symbol in a custom table of contents

ChristianDebono — Sat, 11 Dec 2021 14:23:37 GMT

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?

Re: Displaying feature layer symbol in a custom table of contents

Anonymous User — Thu, 10 Jul 2014 18:44:28 GMT

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.

Re: Displaying feature layer symbol in a custom table of contents

Anonymous User — Thu, 10 Jul 2014 19:56:44 GMT

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

});

};