nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Format legend text and number format

EricCompas2

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

Vind meer berichten getagd met

Accepted answers

ZachLiu1

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.

All comments

JasonZou

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

EricCompas2

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

ZachLiu1

Well, it does look much prettier!:D

JasonZou

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

ZachLiu1

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?

JasonZou

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

ZachLiu1

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.