Multiple Layers for 1 basemap

AlexGole · ‎03-21-2016

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?

RobertScheitlin__GISP · ‎03-22-2016

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>

View solution in original post

RobertScheitlin__GISP · ‎03-22-2016

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>

AlexGole · ‎03-22-2016

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?

RobertScheitlin__GISP · ‎03-22-2016

No as you can see from the above sample code I am not using the BasemapGallery widget.

AlexGole · ‎03-22-2016

My bad. Thanks

AlexGole · ‎03-22-2016

Thank you Robert! That is it.