How can I get a sub layer to only show at smaller scale levels with lower opacity then at larger scales to show at full opacity?
Evon,
Are you asking how to change the opacity of a layer based on the scale? Are you talking about a MapView or SceneView?
This would be for a MapView, and yes opacity of layer based on scale.
Evon,
Here is a sample that shows how to watch the views scale and then make the change to the layers opacity:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Get started with MapView - Create a 2D map - 4.2</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/renderers/ClassBreaksRenderer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"dojo/domReady!"
], function(Map, MapView, MapImageLayer, ClassBreaksRenderer,
SimpleFillSymbol, TextSymbol) {
// helper function to create a symbol
function createSymbol(color) {
return new SimpleFillSymbol({
color: color,
outline: {
width: 0.5,
color: [255, 255, 255, 0.4]
},
style: "solid"
})
}
var renterUnitsRenderer = new ClassBreaksRenderer({
field: "RENTER_OCC",
normalizationField: "HSE_UNITS",
normalizationType: "field",
defaultSymbol: new SimpleFillSymbol({
style: "backward-diagonal",
outline: {
width: 0.5,
color: "gray"
}
}),
classBreakInfos: [{
minValue: 0,
maxValue: 0.25,
label: "< 25%",
symbol: createSymbol("#f8e3c2")
}, {
minValue: 0.25,
maxValue: 0.5,
label: "25% - 50%",
symbol: createSymbol("#e5998c")
}, {
minValue: 0.5,
maxValue: 0.75,
label: "50% - 75%",
symbol: createSymbol("#d86868")
}, {
minValue: 0.75,
maxValue: 1.00,
label: "> 75%",
symbol: createSymbol("#9b3557")
}]
});
var layer = new MapImageLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
title: "Census Demographics",
sublayers: [{
id: 1,
title: "% Renter Occupied Housing Units",
renderer: renterUnitsRenderer,
definitionExpression: "POP07_SQMI >= 5100",
visible: true,
labelsVisible: true,
labelingInfo: [{
labelExpression: "[RENTER_OCC]",
labelPlacement: "always-horizontal",
symbol: new TextSymbol({
color: "white",
haloColor: "#9b3557",
haloSize: 1,
font: {
size: 10
}
}),
minScale: 37000
}],
// points to the block groups layer
source: {
mapLayerId: 1
}
}]
});
var map = new Map({
basemap: "streets",
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 13,
center: [-122.436, 37.764]
});
view.watch("scale", checkScale);
function checkScale() {
if(view.scale < 40000){
layer.opacity = 0.25;
}else{
layer.opacity = 1;
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>