topic Re: Hi, in ArcGIS JavaScript Maps SDK Questions

Hi,

SoniaUguna_Urgilés — Mon, 25 Jul 2016 17:22:13 GMT

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.

Re: Hi,

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:03:14 GMT

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>

Re: Hi,

SoniaUguna_Urgilés — Thu, 28 Jul 2016 13:54:25 GMT

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

Re: Hi,

RobertScheitlin__GISP — Thu, 28 Jul 2016 15:09:27 GMT

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){

Re: Hi,

SoniaUguna_Urgilés — Thu, 28 Jul 2016 15:25:16 GMT

Thanks Robert

I am very grateful with you