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>
Solved! Go to Solution.
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>
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.
4.6
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>