ArcGIS WebMap - MapImage Sub Layer Visibility

428
7
Jump to solution
05-06-2019 05:32 AM
JithenSingh
Esri Contributor

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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]);

View solution in original post

0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
JithenSingh
Esri Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jithen,

  ??? you can remove the whole legend portion and the code I provided still works using your webmap...

0 Kudos
JithenSingh
Esri Contributor

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

0 Kudos
JithenSingh
Esri Contributor

So effectively if I do the following - 

var lyr = map.getLayer("SampleWorldCities_9560_2");
lyr.hide();

It does not work.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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]);

View solution in original post

0 Kudos
JithenSingh
Esri Contributor

Thanks! - I did wonder about this. Means extra coding to traverse the layers. Ok - Thanks

0 Kudos