get a layer to show only at certain scale

Question

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?

RobertScheitlin__GISP · Answer

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

EvonFranklin · Answer

This would be for a MapView, and yes opacity of layer based on scale.

RobertScheitlin__GISP · Answer

Evon,

Are you asking how to change the opacity of a layer based on the scale? Are you talking about a MapView or SceneView?