add opacity range

anjelinaponkerat · ‎01-16-2018

Hi

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

RobertScheitlin__GISP · ‎01-22-2018

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

View solution in original post

RobertScheitlin__GISP · ‎01-17-2018

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

anjelinaponkerat · ‎01-18-2018

4.6

RobertScheitlin__GISP · ‎01-22-2018

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