1

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?

2

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>
|improve this answer|||||
  • Perfect-this is what I was looking for:)!! – Ann Oct 31 '13 at 14:16
1

Line 65 will allow you to change the position from top. change top from 10 px to 20px. As far as image for title is concerned, here is a forum about the same: http://forums.arcgis.com/threads/66423-Custom-dijit.TitlePane-icon

|improve this answer|||||
  • Changing to 20px will move the entire element down. I am not looking to do that. My goal is to move 20px down only when the "Switch Basemap" is clicked. i.e the basemap container opens up 20px down as in this example: localgovtemplates2.esri.com/mygovernmentservices – Ann Oct 30 '13 at 20:02
  • This is completely different implementation from a programmer's perspective. In the sandbox example, it is implanted as a titlePane, however, in the local government template, it's an image which opened and hid the layer container div on the click of the image. I can't give you a conceptual workflow but you may want to view the source code and compare to figure out how to implement this. If you have conceptual questions along the way, I am happy to provide more input. – Garima V Oct 30 '13 at 20:41

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.