topic Re: Custom TOC / Legend Javascript API in ArcGIS JavaScript Maps SDK Questions

Custom TOC / Legend Javascript API

JosephRogan — Thu, 28 May 2015 16:31:55 GMT

I am trying to build a Custom TOC / Legend with the ArcGIS Javascript API. I have tried many different prebuild widgets and other googlable things but none of them seem to work completely, or be compatible with my browser requirements of IE9. So I've been working on my own.

The issue I am having now is accessing the Legend image/symbol/png of each layer within my ArcGISDynamicMapServiceLayer so that I can insert it in the HTML. I can see that there is a JSON thing for it within the REST page. How do I access this and use it within my JavaScript page? My JSON knowledge is small, but I'm sure once I learn this it will help with many other tasks. Thanks!

Re: Custom TOC / Legend Javascript API

BenFousek — Sat, 11 Dec 2021 13:27:38 GMT

The legend json can be gotten via an esriRequest to https://SERVER/arcgis/rest/services/SERVICE/legend

Example of a single layer legend info:

{
  "layerId": 0,
  "layerName": "City Limits",
  "layerType": "Feature Layer",
  "minScale": 0,
  "maxScale": 0,
  "legend": [{
    "label": "",
    "url": "d81c20bbbe11d1b64ebe9ad98f2e9062",
    "imageData": "iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAADFJREFUOI1jYaAyYKGZgf/+7WugxCAmJqcGFAOpBUYNHDVw1MBRA+lsIKw8o5qB1AIA8kUFF7zjdA0AAAAASUVORK5CYII=",
    "contentType": "image/png",
    "height": 20,
    "width": 20
  }]
}

The "layerId" and "legend.url" properties can then be use to form a url for img src.

In the above example:

https://SERVER/arcgis/rest/services/SERVICE/MapServer/0/images/d81c20bbbe11d1b64ebe9ad98f2e9062

with aforementioned properties in bold.

Gets a bit more complicated with categories and renderers.

cmv-app/legendUtil.js at master · cmv/cmv-app · GitHub here's a utility class I use. It's written to back a specific widget but has examples of the requests and handling the responses.

Re: Custom TOC / Legend Javascript API

ChrisSmith7 — Thu, 28 May 2015 17:37:13 GMT

This probably wasn't the best way to go, but for my case, I needed a custom legend for a renderer with multiple category values.

I tried pulling it out of the renderer directly, but didn't have much luck (I got color and symbol info, but no SVGs), so the class just piggy-backs off of what I send to the renderer.

From these parameters, I dynamically construct the SVGs and embed them onto the map by tying into a notify framework I'm already using. Works well for my case, and is extensible for all of my foreseeable needs (hopefully); however, I will definitely need to look into Ben's idea more...

Re: Custom TOC / Legend Javascript API

BenFousek — Thu, 28 May 2015 17:41:51 GMT

Hey Chris are you talking about feature or dynamic layers?

Re: Custom TOC / Legend Javascript API

ChrisSmith7 — Thu, 28 May 2015 17:54:58 GMT

It's a feature layer dynamically creating from a JSON x/y dataset I'm getting from a proc call. I am creating the feature collection in code, and from that, the feature layer, then, applying a UniqueValueRenderer.

Re: Custom TOC / Legend Javascript API

BenFousek — Thu, 28 May 2015 18:08:27 GMT

I was asking because feature layers are easier yet. You don't need to make a call to the legend endpoint. All the methods and props are right there in the renderer classes. You're on the right track with svg. You can create surfaces and svg using 'dojox/gfx'. Here are the methods for that.

Re: Custom TOC / Legend Javascript API

ChrisSmith7 — Thu, 28 May 2015 18:18:57 GMT

Thanks, I'll check it out.

Not to go too far off the original topic, legends have always been a little tricky for me since I do a lot of binding to JSON datasets. One of the things I'm doing is similar to:

Gas price data by state mashup | ArcGIS API for JavaScript

In 3.13, the legend creation is broken - I filed a bug with Esri:

BUG-000086150 - Legend fails with JSON data in ArcGIS API for Java..

Rather than creating my own legend, I lightly massaged what the API returned, but this method fails in 3.13 since the legend is having rendering problems. Esri isn't sure when the bug will be fixed, so if I need to upgrade to the latest version before this is fixed, I will need to look into this more closely - that and getting a meaningful legend to show up when using the print/export service!