add opacity range

363
3
Jump to solution
01-16-2018 11:21 PM
anjelinaponkerat
Occasional Contributor II

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>
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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  

0 Kudos
anjelinaponkerat
Occasional Contributor II

4.6

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos