nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Multiple Layers for 1 basemap

AlexGole

Hi all,

I have two Tiled services:

USA_Topo_Maps (MapServer)

World_Topo_Map (MapServer)

 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?

Finde mehr Beiträge mit dem Tag

Accepted answers

rscheitlin

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>

All comments

AlexGole

My bad. Thanks

rscheitlin

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

AlexGole

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?

AlexGole

Thank you Robert! That is it.

rscheitlin

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>

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.