Hi - Am doing some R&D and have the SampleWorldCities coming from ArcGIS Enterprise - https://arcgis.cloud.eaglegis.co.nz/portal/home/webmap/viewer.html?webmap=f16c88ffa42a425e9e26ee932a...
Using JS API 3.27, I need to toggle off the sub layers, for example "World".
I am able to get all of the layer ID's from -
map._layers;
If I then call -
layer = map.getLayer(layersToSet[i].layerID);
layer.hide()
The map does not toggle this layer off in the WebMap but the properties show that it has.
Am I missing something? Or is there another way of handling this with using ArcGIS Server services with within WebMap?
Thanks
Solved! Go to Solution.
Jithen,
Because you have to get the parent layer (ArcGISDyanmicMapServiceLayer class) then use the setVisibleLayers method on that layer.
map.getLayer("SampleWorldCities_9560").setVisibleLayers([2]);
Jithen,
Here is a working example of turning off a layer in your webmap.
<!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>Create web map from id</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<script src="https://js.arcgis.com/3.28/" data-dojo-config="async:true"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"dojo/domReady!"
], function (
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar
) {
ready(function () {
parser.parse();
//if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
arcgisUtils.arcgisUrl = "https://arcgis.cloud.eaglegis.co.nz/portal/sharing/content/items";
arcgisUtils.createMap("f16c88ffa42a425e9e26ee932a3193d4", "map").then(function (response) {
//update the app
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
var map = response.map;
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
console.info(legendLayers);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
}, "legend");
legendDijit.startup();
setTimeout(function(){
var lyr = map.getLayer("SampleWorldCities_9560");
lyr.hide();
}, 2000);
});
});
});
</script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica";
}
#header {
background-color: #E8E8E8;
height: 65px;
margin: 5px 5px;
}
#mainWindow {
width: 100%;
height: 100%;
}
#title {
padding-top: 2px;
padding-left: 10px;
font-size: 18pt;
font-weight: 700;
}
#subtitle {
font-size: small;
padding-left: 40px;
}
#rightPane {
background-color: #E8E8E8;
margin: 5px;
width: 20%;
}
#map {
margin: 5px;
padding: 0;
}
</style>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="legend"></div>
</div>
</div>
</body>
</html>
Thanks. This uses a legend to getLegendLayers and then the layer ID following to layer.hide().
I already have valid layer ID’s through the approach that I have used, just that layer.hide() doesn’t do anything. Well it does - and re-querying the layer shows it as not visible but it still shows on the map.
I don’t need a legend so keen to investigate other options.
Thanks
Jithen,
??? you can remove the whole legend portion and the code I provided still works using your webmap...
Thanks - Just had a deeper look. Should clarify that I am looking to turn off the sub layers within the service so not
SampleWorldCities_9560
But instead -
SampleWorldCities_9560_2
I have tried to turn off the main layer and that works OK. Turning off the sub layer for example for World does not work?
Thanks
So effectively if I do the following -
var lyr = map.getLayer("SampleWorldCities_9560_2"); lyr.hide();
It does not work.
Jithen,
Because you have to get the parent layer (ArcGISDyanmicMapServiceLayer class) then use the setVisibleLayers method on that layer.
map.getLayer("SampleWorldCities_9560").setVisibleLayers([2]);
Thanks! - I did wonder about this. Means extra coding to traverse the layers. Ok - Thanks