Hide Service Name in Legend ?

victhomas · ‎06-12-2019

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

KenBuja · ‎06-13-2019

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

View solution in original post

KenBuja · ‎06-13-2019

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

victhomas · ‎06-13-2019

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,

KenBuja · ‎06-13-2019

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.

victhomas · ‎06-13-2019

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,

KenBuja · ‎06-13-2019

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.

victhomas · ‎06-13-2019

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,

KenBuja · ‎06-13-2019

I see that also. Add this

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

victhomas · ‎06-13-2019

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,

KenBuja · ‎06-13-2019

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