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?
Is it possible to add customized text in the legend area (below, above or beside the legend)?
<!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>
Best Answer
The property you want to look into is the legendResponse of each layer.
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