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.
Solved! Go to Solution.
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>
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>
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....
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){
Thanks Robert
I am very grateful with you