Legend Alternative

[JeffreySchmidt]

I have found that the legend dijit does not suit my needs entirely.  Its easy to implement, but the legend does not seem to be able to show layers if they were outside the visible scale range and/or checked off... which is the case when my map loads...

So an alternative would be to build a legend... first I made sprites and hard coded everything in... what a time drain!

So I thought about how I could dynamically build one on the fly... only when it is needed...

In my app I have dojo titlepanes that act as the containers for the legend information.  Each layer in my map service gets its own legend. Its similar to a table of contents... They are closed to start, but when clicked, the title pane checks to see if a legend has been built... if not, it builds one...

Using an esri request on the map service legend rest endpoint allowed me create legend info for a bunch of layers regardless of whether it was visible

Here is the code... dont get confused by the layerPrefix... like I said I have a bunch of layers... all aerial data collection info...

I guess if anyone has a better solution or has a tweak Id be happy to see it posted, otherwise just wanted to share if people found themselves with a similar scenario...

Jeff

var aerial2000LegendTitlePane = new TitlePane({
  title: "Legend", 
  legendBuilt: false,
  onClick: function(){
  makeLegend("aerial2000", "http://mydomain/arcgis/rest/services/mymapservice/MapServer/legend", 12);
  }, 
  open: false}, 'aerial2000LegendTitlePane');

The inputs include

• a name prefix which corresponds to my html structure
• the map service legend endpoint
• the id of the layer in the map service

/*********************************** 
build legend
************************************/
function makeLegend(layerPrefix, serviceURL, serviceLayerID) {

  if (registry.byId(layerPrefix + "LegendTitlePane").get("legendBuilt") == false) {
  var theLegend = esriRequest({
  url: serviceURL, 
  handleAs: 'json', 
  content: { f: 'json' }, 
  callbackParamName: 'callback'}
  );
  theLegend.then(function(response) {
  console.log("Success: ", response);
  var filteredArray = array.filter(response.layers, function(item){
  return item.layerId == serviceLayerID;
  });

  registry.byId(layerPrefix + "LegendTitlePane").set("content", domConstruct.create("div",{id: layerPrefix + "Legend"}));

  array.forEach(filteredArray[0].legend, function (item, idx){
  var legendRow = domConstruct.create("div",{class: "LegendRow"}, layerPrefix + "Legend", 'last');
  var iconDiv = domConstruct.create("div", {style: " vertical-align: middle;display:inline-block;width:" + item.width + "px;height:" + item.height + "px;background:url(data:image/png;base64," + item.imageData + ") no-repeat;"}, legendRow, "first");
  var labelDiv = domConstruct.create("div", {style: " vertical-align: middle;display:inline-block;", innerHTML: item.values[0]}, legendRow, "last");
  });

  registry.byId(layerPrefix + "LegendTitlePane").set("legendBuilt", true);
  }, function(error) {
  console.log("Error: ", error);
  domConstruct.create("span", {innerHTML: "Legend Not Available"}, layerPrefix + "Legend", "first");
  });
  }

}