get a layer to show only at certain scale

EvonFranklin · ‎01-30-2017

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 · ‎01-30-2017

Evon,

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

EvonFranklin · ‎01-30-2017

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

RobertScheitlin__GISP · ‎01-30-2017

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