0

In my application I'm using basemap gallery widget for the user to switch between basemaps. However, when the basemap has been switched the map.getBasemap() keeps returning the original basemap assigned to the map in the constructor instead of the current basemap.

Also map.getLayer(map.basemapLayerIds) returns undefined after the basemap has been changed by the basemapGallery widget.

How can I return the reference of actual current basemap which is displayed in the map?

1

This will show you what the current basemap is

<!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="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #map {
        padding: 0;
    }
    </style>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
    var map;
    require([
      "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "dojo/parser",

      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
      "dojo/domReady!"
    ], function (
      Map, BasemapGallery, arcgisUtils,
      parser
    ) {
        parser.parse();

        map = new Map("map", {
        basemap: "topo",
        center: [-105.255, 40.022],
        zoom: 13
        });

        //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
        var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
        }, "basemapGallery");
        basemapGallery.startup();

        basemapGallery.on("error", function (msg) {
         console.log("basemap gallery error:  ", msg);
        });

        basemapGallery.on("selection-change", function () {
         console.log(basemapGallery.getSelected().title);
        });

    });
    </script>
</head>

<body class="claro">
    <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 style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane"
             data-dojo-props="title:'Switch Basemap', closable:false,  open:false">
            <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
            </div>
        </div>
        </div>

    </div>
    </div>
</body>

</html>
2
  • That returns a title string. I need a reference to the basemap layer object in order to set transparency on it. Thanks for your response though. – Matej Apr 15 '14 at 20:42
  • 1
    You can get the basemap using var basemap = basemapGallery.getSelected();. Note that some basemaps consist of two layers (Imagery with Labels and possibly Terrain with Labels). – kenbuja Apr 15 '14 at 20:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.