topic add opacity range in ArcGIS JavaScript Maps SDK Questions

add opacity range

anjelinaponkerat — Sat, 11 Dec 2021 06:36:04 GMT

I have a tiled map service. I,m going to add opacity controller for this layer, but I can't!!

this is my code:

var housingLyr = new TileLayer({
  url: "http://localhost:6080/arcgis/rest/services/housing/MapServer",
  id: "ny-housing",
  visible: false,
  opacity: 1
});

<body>

<span id="layerToggle">
  <input type="checkbox" id="housingLyr" />satellite layer
  <input id="opacity" type="range" min="0" max="1" step="0.1" value="1" />
</span>‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: add opacity range

RobertScheitlin__GISP — Wed, 17 Jan 2018 13:48:11 GMT

is this a 4.x or 3.x question? You need to add Tags to your posts with this info. Also since you ask so many questions you need to learn how to properly post code using the advanced editor and Javascript syntax highlighting.

Updated Content Text Editor

Re: add opacity range

anjelinaponkerat — Fri, 19 Jan 2018 07:56:26 GMT

4.6

Re: add opacity range

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:36:07 GMT

Here is a sample:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to MapView - Create a 2D map - 4.6</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/TileLayer",
      "dojo/on",
      "dojo/dom",
      "dojo/domReady!"
    ], function(Map, MapView, TileLayer, on, dom) {

      var map = new Map({
        basemap: "streets"
      });
      
      var terrainLyr = new TileLayer({
        url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
        id: "terrain",
        visible: false,
        opacity: 1
      });
      
      
      on(dom.byId('opacity'), "change", function(evt){
        terrainLyr.opacity = evt.target.value;
      });
      
      on(dom.byId('terrainLyrCB'), "change", function(evt){
        terrainLyr.visible = evt.target.checked;
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65] // longitude, latitude
      });
      map.layers.add(terrainLyr);

    });
  </script>
</head>

<body>
  <span id="layerToggle">
    <input type="checkbox" id="terrainLyrCB" />satellite layer
    <input id="opacity" type="range" min="0" max="1" step="0.1" value="1" />
  </span>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍