Hi all,
I have two Tiled services:
esriBasemaps.usgs = { baseMapLayers: [{ url: "http://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer" }], }; esriBasemaps.USATopo = { baseMapLayers: [{ url: "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer" }], };
I want these two layers to become 1 basemap layer with ID so I can set Opacity on this layer.
map.getLayer(map.basemapLayerIds).setOpacity(ui.value / 100);
Is there a way to do that? Would it be possible with a mix dynamic/tiled service as well?
Solved! Go to Solution.
Alex,
Sure you can. Here is a sample:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/themes/calcite/dijit/calcite.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/themes/calcite/esri/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } </style> <script src="http://js.arcgis.com/3.16/"></script> <script> var map; require([ "esri/map", "esri/dijit/BasemapGallery", "dojo/_base/array", "dojo/parser", "esri/dijit/BasemapLayer", "esri/dijit/Basemap", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", "dojo/domReady!" ], function( Map, BasemapGallery, array, parser, BasemapLayer, Basemap ) { parser.parse(); var USATopo = new BasemapLayer({ url: "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer" }); var usgs = new BasemapLayer({ url: "http://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer" }); var customBasemap = new Basemap({ layers: [usgs, USATopo], title: "customBasemap", thumbnailUrl: "images/safetyThumb.png" }); map = new Map("map", { center: [-70.6508, 43.1452], basemap: customBasemap }); array.map(map.basemapLayerIds, function(layerId){ map.getLayer(layerId).setOpacity(0.6); }); console.info(map.basemapLayerIds); }); </script> </head> <body class="calcite"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;"> </div> </div> </body> </html>
Alex,
Sure you can. Here is a sample:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/themes/calcite/dijit/calcite.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/themes/calcite/esri/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } </style> <script src="http://js.arcgis.com/3.16/"></script> <script> var map; require([ "esri/map", "esri/dijit/BasemapGallery", "dojo/_base/array", "dojo/parser", "esri/dijit/BasemapLayer", "esri/dijit/Basemap", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", "dojo/domReady!" ], function( Map, BasemapGallery, array, parser, BasemapLayer, Basemap ) { parser.parse(); var USATopo = new BasemapLayer({ url: "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer" }); var usgs = new BasemapLayer({ url: "http://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer" }); var customBasemap = new Basemap({ layers: [usgs, USATopo], title: "customBasemap", thumbnailUrl: "images/safetyThumb.png" }); map = new Map("map", { center: [-70.6508, 43.1452], basemap: customBasemap }); array.map(map.basemapLayerIds, function(layerId){ map.getLayer(layerId).setOpacity(0.6); }); console.info(map.basemapLayerIds); }); </script> </head> <body class="calcite"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;"> </div> </div> </body> </html>
I actually do have one question about it. Reading a little bit the documentation about "esri/dijit/BasemapLayer". I says:
"Defines a layer that will be added to a basemap and displayed in the BasemapGallery
dijit."
Does it need basemap gallery to work?
No as you can see from the above sample code I am not using the BasemapGallery widget.
My bad. Thanks
Thank you Robert! That is it.