Hi,

1933
4
Jump to solution
07-25-2016 10:22 AM
SoniaUguna_Urgilés
New Contributor II

I am developing a geographic web with api js and want to place in the table of contents legend with an option to turn on and off , I use the legend function, but do not have the expected result. Can somebody help me.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Sonia,

  You can use the LayerList dijit in the JS API:

<!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>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/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;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
require([
    "esri/arcgis/utils",
    "esri/dijit/LayerList",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(
    arcgisUtils,
    LayerList
) {
    //Create a map based on an ArcGIS Online web map id
    arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
        var myWidget = new LayerList({
           map: response.map,
           layers: arcgisUtils.getLayerList(response),
           showLegend: true
        },"layerList");
        myWidget.startup();
    });

});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<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>
</div>
</body>
</html>

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Emeritus

Sonia,

  You can use the LayerList dijit in the JS API:

<!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>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/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;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
require([
    "esri/arcgis/utils",
    "esri/dijit/LayerList",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(
    arcgisUtils,
    LayerList
) {
    //Create a map based on an ArcGIS Online web map id
    arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
        var myWidget = new LayerList({
           map: response.map,
           layers: arcgisUtils.getLayerList(response),
           showLegend: true
        },"layerList");
        myWidget.startup();
    });

});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<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>
</div>
</body>
</html>
SoniaUguna_Urgilés
New Contributor II

Thank you, Robert Scheitlin and Rickey Fite.

I use LayerList, and table of content of layers are visibled, but don´t understad, why the layer are disabled and can´t turn on and turn off.  What am I doing wrong?... .... The code used is:

      map = new Map("map", {

            basemap: "streets",

            center: [-79, -2.89],

            zoom: 12

        });

   

        layer_fugas = new ArcGISDynamicMapServiceLayer("http://geoportal.etapa.net.ec/arcgis/rest/services/SOAS/Servicio_Fugas/MapServer", {

            "showAttribution": true,

            "id": "codfuga",

        });

        sectores = new ArcGISDynamicMapServiceLayer("http://geoportal.etapa.net.ec/arcgis/rest/services/SOAS/Sectores/MapServer", {

            "showAttribution": true,

            "opacity": 0.30

        });

        cartografia = new ArcGISDynamicMapServiceLayer("http://geoportal.etapa.net.ec/arcgis/rest/services/EMPRESA/Mapa_base/MapServer", {

            "showAttribution": true,

        });

   

        map.on("load", function () {

            busca_fuga(recuperafuga());

            map.infoWindow.resize(150,80);

        });

   

        map.addLayers([layer_fugas, sectores, cartografia]);

   

        map.on ('layer-add-result', function(evt){

        var myWidget = new LayerList({

            map: map,

            showLegend: true,

            layers: [

            {

                layer: cartografia,

                showSubLayers: true,

                showLegend: true,

                showOpacitySlider: true,

                visibility: true,

                id: "Cartografía"

            },

            {

                layer: sectores,

                showSubLayers: true,

                showLegend: true,

                showOpacitySlider: true,

                visibility: true,

                id: "Sectores"

            },

            {

                layer: layer_fugas,

                showSubLayers: false,

                showLegend: true,

                showOpacitySlider: true,

                visibility: true,

                id: "Fugas"

            }

            ]

         },"legend");

        myWidget.startup();

        });

Excuseme, somebody help me???.... Thanks....

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Sonia,

  You are using map.addLayers([layer_fugas, sectores, cartografia]);

so the event that you need to listen for is map.on ('layers-add-result', function(evt){

not

map.on ('layer-add-result', function(evt){

SoniaUguna_Urgilés
New Contributor II

Thanks Robert

I am very grateful with you

0 Kudos