Changing/Removing legend headings in Javascript API 4.x?

3257
7
Jump to solution
03-08-2018 06:43 AM
MollyFoley
Regular Contributor

I've got this legend:

I would really like to remove the "OfficialQH" heading as that is the name of the attribute field. I went back into ArcMap and cleared the heading and overwrote the service but it has not changed. Is there a way to change this? I'm not sure there is based on the unique value renderer seen on my rest services page. It appears to take that heading from the "Field 1" field and it's not like I can remove it otherwise I would have no way to symbolize the my different values.

I can see on my rest services page that the unique value render looks like so:

Renderer:Unique Value Renderer:
Field 1: 

        OfficialQH

 
Field 2: 

        null

 
Field 3: 

        null

 
Field Delimiter: 

        ,

 
Default Symbol:

          N/A

Default Label: 

        null

 
UniqueValueInfos:

      • Value: 0 
        Label: Not Quail Habitat 
        Description: 
        Symbol:Style: 
            esriSFSSolid
         
        Color: 
            [225, 225, 225, 255]
         
        Outline:Style: 
              esriSLSSolid
         
        Color: 
              [0, 0, 0, 255]
         
        Width: 
            1
      • Value: 1 
        Label: Quail Habitat 
        Description: 
        Symbol:Style: 
            esriSFSSolid
         
        Color: 
            [56, 168, 0, 255]
         
        Outline:Style: 
              esriSLSSolid
         
        Color: 
              [0, 0, 0, 255]
         
        Width: 
            1

Javascript legend code:

        //Add a legend to the view
        var legend = new Legend({
          view: view,
          layerInfos: [{
            layer: featureLayer,
            title: "Quail Habitat Status"
          }]
        });
        view.ui.add(legend, "bottom-right");‍‍‍‍‍‍‍‍‍
‍
‍
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Molly,

   Here a sample to remove all legend caption elements:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Legend widget - 4.6</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
  </style>

  <script src="https://js.arcgis.com/4.6/"></script>
  <script>
    require([
        "esri/views/MapView",
        "esri/widgets/Legend",
        "esri/WebMap",
        "esri/core/watchUtils",
        "dojo/query",
        "dojo/aspect",
        "dojo/domReady!"
      ],
      function(
        MapView, Legend, WebMap, watchUtils, query, aspect
      ) {

        var webmap = new WebMap({
          portalItem: { // autocasts as new PortalItem()
            id: "4abe6a830b8f466dacf8abfde567a781"
          }
        });

        var view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(function() {
          // get the first layer in the collection of operational layers in the WebMap
          // when the resources in the MapView have loaded.
          var featureLayer = webmap.layers.getItemAt(0);

          var legend = new Legend({
            view: view,
            layerInfos: [{
              layer: featureLayer,
              title: "NY Educational Attainment"
            }]
          });

          watchUtils.when(legend, "container", function() {
            aspect.after(legend, "scheduleRender", function(response) {
              if (query('.esri-legend__layer-caption')[0]) {
                query('.esri-legend__layer-caption')[0].style.display = 'none';
              }
            });
          });

          // Add widget to the bottom right corner of the view
          view.ui.add(legend, "bottom-right");
        });
      });
  </script>
</head>

<body class="calcite">
  <div id="viewDiv"></div>
</body>

</html>

View solution in original post

7 Replies
MollyFoley
Regular Contributor

I determined that I can change the Alias of the field (and overwrite the service) and this will fix the heading on the map. But still, the heading cannot be removed entirely.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Molly,

   Here a sample to remove all legend caption elements:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Legend widget - 4.6</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
  </style>

  <script src="https://js.arcgis.com/4.6/"></script>
  <script>
    require([
        "esri/views/MapView",
        "esri/widgets/Legend",
        "esri/WebMap",
        "esri/core/watchUtils",
        "dojo/query",
        "dojo/aspect",
        "dojo/domReady!"
      ],
      function(
        MapView, Legend, WebMap, watchUtils, query, aspect
      ) {

        var webmap = new WebMap({
          portalItem: { // autocasts as new PortalItem()
            id: "4abe6a830b8f466dacf8abfde567a781"
          }
        });

        var view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(function() {
          // get the first layer in the collection of operational layers in the WebMap
          // when the resources in the MapView have loaded.
          var featureLayer = webmap.layers.getItemAt(0);

          var legend = new Legend({
            view: view,
            layerInfos: [{
              layer: featureLayer,
              title: "NY Educational Attainment"
            }]
          });

          watchUtils.when(legend, "container", function() {
            aspect.after(legend, "scheduleRender", function(response) {
              if (query('.esri-legend__layer-caption')[0]) {
                query('.esri-legend__layer-caption')[0].style.display = 'none';
              }
            });
          });

          // Add widget to the bottom right corner of the view
          view.ui.add(legend, "bottom-right");
        });
      });
  </script>
</head>

<body class="calcite">
  <div id="viewDiv"></div>
</body>

</html>
MollyFoley
Regular Contributor

That worked great (after I fixed my own mistakes). Thanks!

If anyone else is looking for CSS references, you can find them by going to the API Reference tab on the Javascript API main page > esri/widgets > Legend (or whatever widget you're working with) > Legend.scss file will be listed on the page.

FionaRenton1
Occasional Contributor II

Or you can add this to your CSS

.esri-legend__layer-caption {
display:none;
}

JaredPilbeam2
MVP Regular Contributor

@Molly F

Could you tell me how you got the service title to display? Here's how my legend looks:

The names of the Feature Services and the Layers are being displayed. I'm trying to get my legend to look like yours.

0 Kudos
MollyFoley
Regular Contributor

Sorry for the late response, hope you've figured it out by now, but if you haven't...it's been a while since I did this and I actually had to switch my app to 3.x as I was building it because 4.x is still missing some functionality I needed. I found this in my old code which has all the labels seen in my legend. Maybe that's what you need, to create a renderer with labels?

//Define the UniqueValueRenderer for displaying quail habitat status
var qhRenderer = {
type: "unique-value",
field: "OfficialQH",
legendOptions: { title: "Quail Habitat Status" },
uniqueValueInfos: [{
value: 0,
symbol: {
type: "simple-fill",
color: [225, 225, 225],
outline: {
color: "black",
width: 1
}
},
label: "Not Quail Habitat"
},
{
value: 1,
symbol: {
type: "simple-fill",
color: "green",
outline: {
color: "black",
width: 1
}
},
label: "Quail Habitat"
}]
};

JaredPilbeam2
MVP Regular Contributor

Thanks.

Yes, I actually created new feature services for the three in the above image that had hyphenated names. Before they were part of the feature dataset and "Will County Tourist Attractions" was the name of the file geodatabase. 

Now my legend looks like this: