nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Hi,

SoniaUguna_Urgilés

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.

Finde mehr Beiträge mit dem Tag

Accepted answers

RobertScheitlin__GISP

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>

All comments

SoniaUguna_Urgilés

Thanks Robert

I am very grateful with you

RobertScheitlin__GISP

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

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

RobertScheitlin__GISP

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>

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.