Format legend text and number format

2575
7
Jump to solution
08-16-2013 08:14 AM
EricCompas
New Contributor III
Anyone figured out a way to customize the way numbers are formatted in the dijit legend widget? Instead of:

500000 - 1000000

I'd like to customize the formatting like you can in desktop to improve legibility:

500,000 - 1,000,000
500k - 1,000k
$500,000 - $1,000,000

Haven't found any solutions out there yet -- appreciate any help.

Thanks,

Eric
0 Kudos
1 Solution

Accepted Solutions
ZachLiu1
Occasional Contributor II
I think you should reformat the legend in the original mxd and refresh the map service, or you can contact the author of the service.

View solution in original post

0 Kudos
7 Replies
ZachLiu1
Occasional Contributor II
I think you should reformat the legend in the original mxd and refresh the map service, or you can contact the author of the service.
0 Kudos
JasonZou
Occasional Contributor III
Zach's approach should be the easiest solution if you can modify the MXD used for the map service. If you happen to use third-party map service, you may need to develop a custom legend dijit that you will have full control over how to format the legend labels.

Here is a code snippet showing the workflow. You can render the legend the way you like inside the function loadLegend.

dojo.forEach(map.layerIds, function(layerId) {
     var legendRequest = esri.request({
      url: map.getLayer(layerId).url + "/legend?f=json",
      handleAs: "json"
     });
      
     legendRequest.then(
         // if the legend REST service succeeds, create the placeholder for each layer legend
      function(data) { 
           if (data && data.layers && data.layers.length > 0) {
            // create the placeholder for each layer legend
               loadLegend(data.layers, layerId);
           } 
      }, function(error) {
           console.log(error);
     });
});

// legendNode is the container node for the legend
loadLegend: function(layers, svcLayerId) {
     dojo.forEach(layers, function(layer) {
      var legends = layer.legend;
      
      if (legends.length > 0) {
       var newLegendContainer = dojo.create("div", {className: "clsLegendNodeContainer"}, legendNode);
       var newLegendLayerName = dojo.create("div", {className: "clsLegendLayerName", innerHTML: layer.displayName || layer.layerName}, newLegendContainer);
       var newLegend, newLabel, imageSrc;
       
     dojo.forEach(legends, function(aLegend) {
           newLegend = dojo.create("div", {className: "clsLayerLegend"}, newLegendContainer);
           
           imageSrc = "data:" + aLegend.contentType + ";base64," + aLegend.imageData;
           dojo.create("img", {src: imageSrc}, newLegend);
         
           dojo.create("label", {className: "clsLegendLabel", innerHTML: aLegend.label}, newLegend);
      });
      }
     });     
}
0 Kudos
ZachLiu1
Occasional Contributor II
Hi, Jason,
This is also a good lesson for me. One question I have is when I test the url for the legend by Service Directory, the end of the url is f=pjson instead of f=json. Are they the same?
0 Kudos
JasonZou
Occasional Contributor III
They are the same as to the application. pjson stands for "Pretty JSON":) It's formatted in a way good for reading.
0 Kudos
ZachLiu1
Occasional Contributor II
Well, it does look much prettier!:D
0 Kudos
EricCompas
New Contributor III
I am using the ClassBreaksRenderer (which overrides the MXD legend), so I do need to set this programmatically (to be honest, I didn't know that the dijit legend widget would honor those formatting settings, so thanks Zach for adding that bit of knowledge).

Jason, I will try your code -- I do want more control over how the legend is formatted, so this will be really helpful.

I did find in the meantime that the addBreak method does allow you to add a custom text label (see https://developers.arcgis.com/en/javascript/jsapi/classbreaksrenderer-amd.html#addbreak), so that's yet another way of formatting the label.

Thank you both for the help!

Eric
0 Kudos
JasonZou
Occasional Contributor III
You are welcome, Eric. Just keep us posted for what you get.
0 Kudos