[GIS] Moving ArcGIS JSAPI Basemap Gallery Widget down 10px when opened

arcgis-javascript-apiarcgis-serverdojojavascript

How can I move the Basemap gallery 10px down from its original position when it's opened. The basemap gallery sample, I am referring can be found here:
http://developers.arcgis.com/en/javascript/sandbox/sandbox.html?sample=widget_basemapdynamic

Also, how can I change the text "Switch Basemap" to an icon image?

Any thoughts?

Best Answer

In order to get the separation of the basemap gallery from its opening button, you'll need to use a different container besides a dijit.TitlePane. The titlepane works like a collapsible display that encloses the inner content inside a solid color div (white in this case).

I've thrown together an example using the sandbox page you've provided. I replaced the titlepane with a simple dijit.form.Button, pulled the container div for the basemap gallery out where it's free to float over the map, and added a little styling to support a floating basemap gallery. Finally, I gave the button an onclick event that lets it change the visibility of the floating basemap gallery.

Now, if you want to animate the basemap gallery as it opens, I'd suggest either looking into css3 transitions, or using the dojo._base.fx library.

<!DOCTYPE html>
  <html>  
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">    
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail{
        border-color: #66FFFF !important;
      }
      #map{
        padding:0;
      }
    </style> 

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script> 
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dijit.form.Button");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("esri.arcgis.utils");

      var map;

      function init() {
        map = new esri.Map("map", {
          center: [19.461, 53.914],
          zoom: 5
        });
        var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");

        var selectionHandler = dojo.connect(basemapGallery,"onSelectionChange",function(){
          dojo.disconnect(selectionHandler);
          //add the esri population layer to the map
          var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {"opacity":0.5});
          map.addLayer(operationalLayer);
        });
        basemapGallery.startup();

        dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
      }

      function toggleView() {
        var container = document.getElementById("basemapcontainer");
        if (container.style.display === "none") {
          container.style.display = "block";
        } else {
          container.style.display = "none";
        }
      }
      dojo.ready(init);
    </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="border:1px solid #000;">

      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit.form.Button" 
             data-dojo-props="onClick:toggleView"
             style="position: absolute; top: 0; right: 0;">Switch Basemap
        </div>
        <div id="basemapcontainer" data-dojo-type="dijit.layout.ContentPane" 
             style="width:380px; height:280px; overflow:auto; background: white; position: absolute; top: 40px; right: 0; display:none;">
          <div id="basemapGallery"></div>
        </div>
      </div>
    </div>
    </div>
  </body> 
</html>
Related Question