0

Here is an example code that I use in my work. There are a few issues with this:

The layer title appears one more time in the legend of layerlist.

How can I remove it or change to other text?

enter image description here

Is it possible to add customized text in the legend area (below, above or beside the legend)?

enter image description here

    <!DOCTYPE html>
    <html> 
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
     on iOS devices-->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
     <title>soil map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
    <style>
     html, body, .container, #map {
     height:100%;
     width:100%;
     margin:0;
     padding:0;
     margin:0;
     font-family: "Open Sans";
     }
    #map {
     padding:0;
    } 
    #layerListPane{
     width:25%;
    } 
    .esriLayer{
     background-color: #fff;
    } 
    .esriLayerList .esriList{
     border-top:none;
    } 
    .esriLayerList .esriTitle {
     background-color: #fff;
     border-bottom:none;
    } 
    .esriLayerList .esriList ul{
     background-color: #fff;
    }
     #search {
     display: block;
     position: absolute;
     z-index: 3;
     top: 20px;
     left: 75px;
     }
     #HomeButton {
     position: absolute;
     top: 100px;
     left: 15px;
     z-index: 50;
     }
     </style>
     <script src="http://js.arcgis.com/3.29/"></script>
     <script>
     require([
     "dojo/parser",
     "esri/map",
     "esri/dijit/HomeButton",
     "esri/layers/ArcGISDynamicMapServiceLayer",
     "esri/dijit/LayerList",
     "esri/dijit/Search",
     "esri/dijit/Legend",
     "esri/dijit/Scalebar",
     "dojo/dom",
     "dijit/layout/BorderContainer",
     "dijit/layout/ContentPane",
     "dojo/domReady!"
     ], function (
     parser, 
     Map, HomeButton, ArcGISDynamicMapServiceLayer, LayerList, Search, Legend, Scalebar, dom
     ) {
     parser.parse();

     var map = new Map("map", {
     basemap: "topo",
     center: [-90.125, 40],
     zoom: 8
     });
    dojo.connect(map, "onLoad", mapReady);
    var rasterURL1 = "https://mapsweb.lib.purdue.edu/arcgis/rest/services/Ag/Subirrigation_suitability/MapServer";
    var operationalLayer1 = new ArcGISDynamicMapServiceLayer(rasterURL1,{ opacity: .90 });

     var rasterURL2 = "https://mapsweb.lib.purdue.edu/arcgis/rest/services/Ag/Drainage_class/MapServer";
    var operationalLayer2 = new ArcGISDynamicMapServiceLayer(rasterURL2,{ opacity: .90 });
     map.addLayers([operationalLayer1,operationalLayer2]);

     var layerList = new LayerList({
     map: map,
     layers: [
     {
     layer: operationalLayer1,
     id: "Subirrigation_suitability"
     },
     {
     layer: operationalLayer2,
     id: "Drainage_class"
     }
     ],
     showLegend: true,
     showSubLayers: false,
     showOpacitySlider: true
     },"layerList");
     layerList.startup();
    var search = new Search({
     map: map,
     }, dom.byId("search"));
    search.startup();
    var home = new HomeButton({
     map: map
     }, "HomeButton");
     home.startup();
    var scalebar = new Scalebar({
     map: map,
     scalebarUnit: "dual"
     });
     scalebar.startup();
    }); 

     </script>
     </head>

     <body class="claro">
    <div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
    <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
     <div id="layerList"></div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
     <div id="search"></div>
     <div id="HomeButton"></div>
    </div>
    </div>
    </body>

</html>
  • 1
    Hey welcome to GIS SE. You should take a look at the How to create a Minimal, Reproducible Example page. You pasted your whole code but only a small portion of it is relevant to your question. – Marcelo Villa Aug 16 at 16:42
  • Thanks for your comment. I deleted irrelevant code. Do you have any recommendations for the question? – gis2019 Aug 16 at 17:15
1

The property you want to look into is the legendResponse of each layer.

console.log(operationalLayer1);

if you log individual layers property you will find legendResponse on the list of properties. If you can access it on your script and able to change the layerName property it will be reflected on you map. I once did it in Web AppBuilder for developer edition. here is the tread

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.