topic Format legend text and number format in ArcGIS JavaScript Maps SDK Questions

Format legend text and number format

EricCompas — Fri, 16 Aug 2013 15:14:08 GMT

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

Re: Format legend text and number format

ZachLiu1 — Fri, 16 Aug 2013 16:03:03 GMT

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.

Re: Format legend text and number format

JasonZou — Sun, 12 Dec 2021 01:12:59 GMT

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

Re: Format legend text and number format

ZachLiu1 — Fri, 16 Aug 2013 19:48:45 GMT

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?

Re: Format legend text and number format

JasonZou — Fri, 16 Aug 2013 19:51:03 GMT

They are the same as to the application. pjson stands for "Pretty JSON":) It's formatted in a way good for reading.

Re: Format legend text and number format

ZachLiu1 — Fri, 16 Aug 2013 20:52:41 GMT

Well, it does look much prettier!:D

Re: Format legend text and number format

EricCompas — Fri, 16 Aug 2013 21:02:16 GMT

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

Re: Format legend text and number format

JasonZou — Fri, 16 Aug 2013 21:49:12 GMT

You are welcome, Eric. Just keep us posted for what you get.