topic Re: Hide Service Name in Legend ? in ArcGIS JavaScript Maps SDK Questions

Hide Service Name in Legend ?

victhomas — Sat, 11 Dec 2021 22:56:59 GMT

Hello All,

Was just wondering if I there is a way to hide or not show the REST service name "USA" in the legend widget? Please see the screenshot and the code that I have. Any help would be appreciated. Thanks.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Legend</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:90%;
      }
      
      #legendDiv {
        left:40px;
        top:30px;
        width: 200px;
        height: 350px;
        background-color: white;
      }
    </style>
    <script src="https://js.arcgis.com/3.27/"></script>
    <script>
      var map, layer;
			require([
			"esri/map",
			"esri/layers/ArcGISDynamicMapServiceLayer",
			"esri/layers/ImageParameters",
			"esri/layers/FeatureLayer",
			"esri/dijit/Legend"
			],
			function (Map, ArcGISDynamicMapServiceLayer, ImageParameters,FeatureLayer,Legend) 
			{

				layer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",{
				});
				map = new Map("mapDiv", {
					//basemap: "topo",
					center: [-100.015, 38.652],
					zoom: 11
				});
				layer.setVisibleLayers([3]);
				map.addLayer(layer);
				const legend = new Legend(
				{
					map: map,
					
				}, "legendDiv");
				legend.startup();
				
			});
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv"></div>
	<div id="legendDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Hide Service Name in Legend ?

KenBuja — Sat, 11 Dec 2021 22:57:01 GMT

This is the way to hide it. Play with the setTimeout interval. If you set it too short, then the text will not be removed.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Legend</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:90%;
      }
      
      #legendDiv {
        left:40px;
        top:30px;
        width: 200px;
        height: 350px;
        background-color: white;
      }
    </style>
    <script src="https://js.arcgis.com/3.28/"></script>
    <script>
      var map, layer;
               require([
               "esri/map",
               "esri/layers/ArcGISDynamicMapServiceLayer",
               "esri/layers/ImageParameters",
               "esri/layers/FeatureLayer",
               "esri/dijit/Legend",
                 'dojo/query'
               ],
               function (Map, ArcGISDynamicMapServiceLayer, ImageParameters,FeatureLayer,Legend,query) 
               {

                    layer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",{
                    });
                    map = new Map("mapDiv", {
                         //basemap: "topo",
                         center: [-100.015, 38.652],
                         zoom: 11
                    });
                    layer.setVisibleLayers([3]);
                    map.addLayer(layer);
                    const legend = new Legend(
                    {
                         map: map,
                         
                    }, "legendDiv");
                    legend.startup();
                    setTimeout(function(){
                      query('.esriLegendServiceLabel')[0].style.display="none";
                    },300);
                 
                    
               });
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv"></div>
     <div id="legendDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Hide Service Name in Legend ?

victhomas — Thu, 13 Jun 2019 15:51:24 GMT

Ken,

I use your code, but not getting the expected result, still showing the service name in the legend. I set the TimeOut to 1 digit and even 6 digits number just in case it work the other way around, but still seeing the service name. It would be great if it only show the layer name.

Thanks,

Re: Hide Service Name in Legend ?

KenBuja — Thu, 13 Jun 2019 16:07:12 GMT

Can you post your code? Did you add in the dojo/query module and the query argument? When I set it less than 100, it would keep the name. Sometimes at 200, the name would disappear, but not all times.

Re: Hide Service Name in Legend ?

victhomas — Thu, 13 Jun 2019 16:16:44 GMT

Ken,

I used your code. All I did was just replace the 300 with a 3, refresh the page and its still there. I even tried it with 300000.

thanks,

Re: Hide Service Name in Legend ?

KenBuja — Thu, 13 Jun 2019 16:45:36 GMT

Here's the code in a JSBin. Does this work for you? JS Bin - Collaborative JavaScript Debugging

3 would be way too short. This is time in milliseconds. 300000 would mean it would hide it five minutes later.

Re: Hide Service Name in Legend ?

victhomas — Thu, 13 Jun 2019 17:00:05 GMT

Ken,

No, unfortunately. It work for a split second if I change it 200, but when zoom in and pan around its back.

I'm beginning to think that maybe using ArcGISDynamicMapServiceLayer is not ideal.

thanks,

Re: Hide Service Name in Legend ?

KenBuja — Sat, 11 Dec 2021 22:57:04 GMT

I see that also. Add this

map.on('zoom-end', function (){
  setTimeout(function(){
    query('.esriLegendServiceLabel')[0].style.display="none";
},200);‍‍‍‍‍‍‍‍‍‍‍‍

Re: Hide Service Name in Legend ?

victhomas — Thu, 13 Jun 2019 17:50:40 GMT

I lower it 2 millisecond and it looks like its working when zoom in and out. But the service name is still there when the page first load, or if I hit refresh. Is there anyway that we can rid off it, not showing it at all without the setTimeout()?

Should I be thinking about using esri/layers/FeatureLayer, would a FeatureLayer give me more fine control on what to display and how?

Thanks,

Re: Hide Service Name in Legend ?

KenBuja — Sat, 11 Dec 2021 22:57:07 GMT

The problem with the Legend widget is there aren't any events firing when it has finished being instantiated or modified. I don't know why the class is getting displayed again on each zoom.

The code I put in the last post was in addition to the original setTimeout code. That would fire when the map and legend is first drawn. The other code fires whenever the map zooms.

setTimeout(function(){
  query('.esriLegendServiceLabel')[0].style.display="none";
},300);
                 
map.on('zoom-end', function (){
  setTimeout(function(){
    query('.esriLegendServiceLabel')[0].style.display="none";
  },2);
});‍‍‍‍‍‍‍‍‍

The legend widget for 4.x is more robust. JS Bin - Collaborative JavaScript Debugging

Re: Hide Service Name in Legend ?

victhomas — Thu, 13 Jun 2019 19:55:37 GMT

can we not use the legend widget at all? maybe create a custom legend with the layer's service predefined symbology published from the .mxd and add in the layer title or wording however we want? At the end of the day I want to be able to dynamically display the layer name/title based on the language that the users selected, i.e. water for english, aqua for spanish

Re: Hide Service Name in Legend ?

KenBuja — Sat, 11 Dec 2021 22:57:10 GMT

I have overlooked one easy way to get rid of that text. You can use the layerInfos property to add a blank title

const legend = new Legend(
{
  map: map,
  layerInfos: [{
    layer: layer,
    title: " "
  }]                         
}, "legendDiv");‍‍‍‍‍‍‍‍