topic Re: Changing/Removing legend headings in Javascript API 4.x? in ArcGIS JavaScript Maps SDK Questions

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

MKF62 — Fri, 10 Dec 2021 22:47:24 GMT

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:
Color:
Outline:Style:
Color:
Width:
Value: 1
Label: Quail Habitat
Description:
Symbol:Style:
Color:
Outline:Style:
Color:
Width:

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");‍‍‍‍‍‍‍‍‍
‍
‍
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

MKF62 — Thu, 08 Mar 2018 16:00:59 GMT

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.

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

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:47:26 GMT

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

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

MKF62 — Thu, 08 Mar 2018 17:23:47 GMT

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.

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

FionaRenton1 — Thu, 28 Jun 2018 19:14:18 GMT

Or you can add this to your CSS

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

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

JaredPilbeam2 — Wed, 03 Oct 2018 19:05:45 GMT

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

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

MKF62 — Fri, 19 Oct 2018 12:55:29 GMT

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"
}]
};

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

JaredPilbeam2 — Fri, 19 Oct 2018 14:02:26 GMT

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:

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

cweirpatrickco — Mon, 08 Jul 2024 14:09:56 GMT

^^ occam's razor