Hide Service Name in Legend ?

915
11
Jump to solution
06-12-2019 06:33 PM
victhomas
New Contributor III

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>
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

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

11 Replies
KenBuja
MVP Honored Contributor

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
New Contributor III

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,

0 Kudos
KenBuja
MVP Honored Contributor

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.

0 Kudos
victhomas
New Contributor III

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,

0 Kudos
KenBuja
MVP Honored Contributor

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.

0 Kudos
victhomas
New Contributor III

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,

0 Kudos
KenBuja
MVP Honored Contributor

I see that also. Add this

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

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,

0 Kudos
KenBuja
MVP Honored Contributor

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 

0 Kudos