Custom TOC / Legend Javascript API

6563
6
Jump to solution
05-28-2015 09:31 AM
JosephRogan
New Contributor III

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!

0 Kudos
1 Solution

Accepted Solutions
BenFousek
Occasional Contributor III

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.

View solution in original post

6 Replies
BenFousek
Occasional Contributor III

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.

ChrisSmith7
Frequent Contributor

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...

0 Kudos
BenFousek
Occasional Contributor III

Hey Chris are you talking about feature or dynamic layers?

0 Kudos
ChrisSmith7
Frequent Contributor

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.

0 Kudos
BenFousek
Occasional Contributor III

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.

ChrisSmith7
Frequent Contributor

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!

0 Kudos