Hi,
I am currently developing a simple web application using version 3.17 of the API.
I have created a webmap in ArcGIS Online and am using the utility function to pull the map into my app. The webmap contains 3 layers and I need the ability to toggle between each layer.
I have tried using the Layer List widget, however, I only want to have one layer visible/active at a given time.
Any advice on the best method to do this would be greatly appreciated!
Solved! Go to Solution.
Ben,
Here is a sample that demos what you are wanting:
<!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.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/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.18/"></script>
<script>
var _operLayers, theMap;
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dojo/on",
"dojo/_base/lang",
"dojo/_base/array",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList,
on,
lang,
array
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response) {
//set one layer in the webmap to be visible initially.
theMap = response.map;
_operLayers = response.itemInfo.itemData.operationalLayers;
array.map(_operLayers, lang.hitch(this, function(lyr){
if(lyr.layerObject){
if(lyr.title === "NDFD_Precipitation"){
lyr.layerObject.setVisibility(true);
lyr.visibility = true;
}else{
lyr.layerObject.setVisibility(false);
lyr.visibility = false;
}
}
}));
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
}, "layerList");
myWidget.startup();
on(myWidget, "toggle", lang.hitch(this, function(evt){
array.map(myWidget.layers, function(layer, indx){
if(evt.visible){
if(indx !== evt.layerIndex){
layer.layer.setVisibility(false);
layer.visibility = false;
}
}
});
}));
});
});
</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>
Ben,
Here is a sample that demos what you are wanting:
<!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.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/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.18/"></script>
<script>
var _operLayers, theMap;
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dojo/on",
"dojo/_base/lang",
"dojo/_base/array",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList,
on,
lang,
array
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response) {
//set one layer in the webmap to be visible initially.
theMap = response.map;
_operLayers = response.itemInfo.itemData.operationalLayers;
array.map(_operLayers, lang.hitch(this, function(lyr){
if(lyr.layerObject){
if(lyr.title === "NDFD_Precipitation"){
lyr.layerObject.setVisibility(true);
lyr.visibility = true;
}else{
lyr.layerObject.setVisibility(false);
lyr.visibility = false;
}
}
}));
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
}, "layerList");
myWidget.startup();
on(myWidget, "toggle", lang.hitch(this, function(evt){
array.map(myWidget.layers, function(layer, indx){
if(evt.visible){
if(indx !== evt.layerIndex){
layer.layer.setVisibility(false);
layer.visibility = false;
}
}
});
}));
});
});
</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>
This works perfectly Robert - many thanks!
Any idea how to achieve this in 4.* versions ?
@AngularArchitect In 4.x it would look like this:
<!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 Widget 4.19</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/css/main.css" />
<style>
html,
body,
.container,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
margin: 0;
font-family: "Open Sans";
}
#viewDiv {
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/4.19/"></script>
<script>
var _operLayers, theMap;
require([
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
], function (
MapView,
WebMap,
LayerList
) {
var webmap = new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: "f63fed3f87fc488489e27c026fa5d434"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv"
});
view.when(()=>{
view.map.layers.map((lyr)=> {
lyr.watch('visible', function(visible){
if(visible){
view.map.layers.map((layer, index) => {
if(layer.title !== lyr.title){
layer.visible = false;
}
});
}
//console.info(visible, lyr.title);
}, lyr.title);
if (lyr.title === "World Transportation") {
lyr.visible = true;
} else {
lyr.visible = false;
}
});
var layerList = new LayerList({
view: view,
container: "layerList"
});
});
});
</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="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>