topic Re: Change Drop Down Title pane in ArcGIS JavaScript Maps SDK Questions

Change Drop Down Title pane

AlexGole1 — Mon, 12 May 2014 17:00:23 GMT

Hi all,
I am trying to create a nice toolbar using html5 and css.
Everything looks like I want it to look but one thing. For each drop down icons, I had to use a dijit/titlepane container to fit my text/checkboxes into a box with a white canvas underneath. The only problem is that I have two drop downs: one from the drop down icon/menu, the second from the title pane. I tried to use two content panes but the result is a transparent box, which I do not want. Any idea how to fix this?
Thank you,
Alex[ATTACH=CONFIG]33757[/ATTACH]
[ATTACH=CONFIG]33758[/ATTACH]

Re: Change Drop Down Title pane

Anonymous User — Tue, 13 May 2014 15:07:36 GMT

Original User: sarahclark

Hi Alex - I've done some of this too, maybe can help. I don't think I quite understand yet -- are you using dijit/DropDownMenu in a dijit/Toolbar? And then within that drop down menu is a title pane? I feel like adding a <div class="white"> to change the color of the content pane would work instead of using the title pane, but I'm just brainstorming.

Re: Change Drop Down Title pane

AlexGole1 — Tue, 13 May 2014 15:38:51 GMT

Hi Alex - I've done some of this too, maybe can help. I don't think I quite understand yet -- are you using dijit/DropDownMenu in a dijit/Toolbar? And then within that drop down menu is a title pane? I feel like adding a <div class="white"> to change the color of the content pane would work instead of using the title pane, but I'm just brainstorming.

Yes. I am using dijit/DropDownMenu in a dijit/Toolbar and added a title pane in the drop down menu in order to get a white canvas to display my different map elements (such as basemap gallery, bookmarks, layers...). I will try to add the <div class="white"> and see if that works.
Thank you for your help!
Alex

Re: Change Drop Down Title pane

Anonymous User — Tue, 13 May 2014 18:00:40 GMT

Original User: sarahclark

I have been using 'Menu' and 'MenuItem' within the 'DropDownButton' (http://dojotoolkit.org/reference-guide/1.9/dijit/form/DropDownButton.html). The background is automatically white. Below is an example of adding a basemap gallery using the drop down on a toolbar-- hopefully that could serve as a template for your other tools, let me know if that helps.

HTML:

<!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>TEST</title>    <!-- CSS -->   <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: 0px;     overflow: hidden;     font-family: Helvetica, Sans-Serif;    }    #navToolbar {     position: absolute;     padding: 0px;     margin: 0px;     top: 0px;     left: 0px;     right: 0px;    }    #map {     padding: 0px;    }   </style>    <!-- Code -->   <script src="http://js.arcgis.com/3.9/"></script>   <script>    require(["esri/map", "esri/dijit/BasemapGallery", "esri/dijit/Basemap", "esri/dijit/BasemapLayer",     "dijit/registry", "dojo/parser", "dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/MenuItem",     "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/Toolbar", "esri/dijit/Print","dojo/domReady!"],     function(Map, BasemapGallery, Basemap, BasemapLayer, registry, parser, DropDownButton,      DropDownMenu, MenuItem, ContentPane, BorderContainer, Toolbar) {      parser.parse();      var map = new Map("map", {      basemap : "topo",      center : [-98, 39],      zoom : 4     });      // Create custom list of basemaps for the gallery     basemapsList = [];     var esriAerial = new Basemap({      layers : [new BasemapLayer({       url : "http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"      })],      title : "ESRI Aerial",      thumbnailUrl : "images/world_imagery.png"     });     basemapsList.push(esriAerial);      // Add the basemap gallery     var basemapGallery = new BasemapGallery({      showArcGISBasemaps : false,      basemaps : basemapsList,      map : map     });     basemapGallery.startup();     // Add the basemap gallery in drop down menu on toolbar     if (basemapGallery.loaded) {      createBasemapGallery();     };      function createBasemapGallery() {      for ( i = 0; i < basemapGallery.basemaps.length; i++) {( function(x) {         registry.byId('basemapMenu').addChild(new MenuItem({          label : basemapGallery.basemaps.title,          onClick : function() {           basemapGallery.select(basemapGallery.basemaps.id);          }         }));        }(i));      }     }     });   </script>   </head>   <body class="claro infinity">   <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false,liveSplitters:false" style="width:100%; height:100%;">    <div id="navToolbar" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">     <div data-dojo-type="dijit/Toolbar">      <div label="Basemaps"  data-dojo-type="dijit/form/DropDownButton">       <div data-dojo-type="dijit/Menu" id="basemapMenu">        <!--The menu items are dynamically created using the basemap gallery layers-->       </div>      </div>     </div>    </div>    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>   </div>   </body> </html>

Re: Change Drop Down Title pane

AlexGole1 — Sat, 11 Dec 2021 21:19:31 GMT

I have been using 'Menu' and 'MenuItem' within the 'DropDownButton' (http://dojotoolkit.org/reference-guide/1.9/dijit/form/DropDownButton.html). The background is automatically white. Below is an example of adding a basemap gallery using the drop down on a toolbar-- hopefully that could serve as a template for your other tools, let me know if that helps.

HTML:

<!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>TEST</title>

  <!-- CSS -->
  <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: 0px;
    overflow: hidden;
    font-family: Helvetica, Sans-Serif;
   }
   #navToolbar {
    position: absolute;
    padding: 0px;
    margin: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
   }
   #map {
    padding: 0px;
   }
  </style>

  <!-- Code -->
  <script src="http://js.arcgis.com/3.9/"></script>
  <script>
   require(["esri/map", "esri/dijit/BasemapGallery", "esri/dijit/Basemap", "esri/dijit/BasemapLayer", 
   "dijit/registry", "dojo/parser", "dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/MenuItem", 
   "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/Toolbar", "esri/dijit/Print","dojo/domReady!"], 
   function(Map, BasemapGallery, Basemap, BasemapLayer, registry, parser, DropDownButton, 
    DropDownMenu, MenuItem, ContentPane, BorderContainer, Toolbar) {

    parser.parse();

    var map = new Map("map", {
     basemap : "topo",
     center : [-98, 39],
     zoom : 4
    });

    // Create custom list of basemaps for the gallery
    basemapsList = [];
    var esriAerial = new Basemap({
     layers : [new BasemapLayer({
      url : "http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
     })],
     title : "ESRI Aerial",
     thumbnailUrl : "images/world_imagery.png"
    });
    basemapsList.push(esriAerial);

    // Add the basemap gallery
    var basemapGallery = new BasemapGallery({
     showArcGISBasemaps : false,
     basemaps : basemapsList,
     map : map
    });
    basemapGallery.startup();
    // Add the basemap gallery in drop down menu on toolbar
    if (basemapGallery.loaded) {
     createBasemapGallery();
    };

    function createBasemapGallery() {
     for ( i = 0; i < basemapGallery.basemaps.length; i++) {( function(x) {
        registry.byId('basemapMenu').addChild(new MenuItem({
         label : basemapGallery.basemaps.title,
         onClick : function() {
          basemapGallery.select(basemapGallery.basemaps.id);
         }
        }));
       }(i));
     }
    }

   });
  </script>

 </head>

 <body class="claro infinity">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false,liveSplitters:false" style="width:100%; height:100%;">
   <div id="navToolbar" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
    <div data-dojo-type="dijit/Toolbar">
     <div label="Basemaps"  data-dojo-type="dijit/form/DropDownButton">
      <div data-dojo-type="dijit/Menu" id="basemapMenu">
       <!--The menu items are dynamically created using the basemap gallery layers-->
      </div>
     </div>
    </div>
   </div>
   <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>

 </body>
</html>

I am impressed. I have been looking for this for a long time. Thank you Sarah!

Re: Change Drop Down Title pane

Anonymous User — Tue, 13 May 2014 18:26:42 GMT

Original User: sarahclark

Excellent, glad to help!

Re: Change Drop Down Title pane

AlexGole1 — Tue, 13 May 2014 19:09:14 GMT

Excellent, glad to help!

Ok. I am not sure why my basemap dropdown button is not working and throwing off my map. Any idea? Here is my code http://jsbin.com/wuxon/1/edit. Thanks for all your help again!
Alex

Re: Change Drop Down Title pane

Anonymous User — Sat, 11 Dec 2021 21:19:34 GMT

Original User: sarahclark

Man I just went down a rabbit hole with this one...I'm pretty much a newb as well so sorry I can't be of more help. I had to strip down your code a bunch to get this to work so the skeleton is below. However, I did revisit an issue with the basemapGallery dijit that I encountered before and finally got it resolved. If 'showArcGISBasemaps:true' is set then it's important to use the basemaps.on("load") syntax. FYI if it's ever set to false this will NEVER fire because load only fires for fetching ArcGIS.com basemaps (which is the issue I encountered before building a custom list). Anywho...I tried to mimic your set-up below so you could try to add to it from a working base.

<!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>TEST</title>
  <!-- CSS -->
  <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">

  <!-- Code -->
  <script src="http://js.arcgis.com/3.9/"></script>

  <style>
   html, body, #map {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
   }
  </style>

  <script>
   require(["esri/map", "dojo/parser", "dojo/on", "esri/dijit/BasemapGallery", 
   "dijit/registry", "dijit/MenuItem", "dijit/Toolbar", "dijit/form/Button", 
   "dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/layout/BorderContainer", 
   "dijit/layout/ContentPane", "dijit/layout/AccordionContainer"], 
   function(Map, parser, on, BasemapGallery, registry, MenuItem) {
    parser.parse();

    var map = new Map("map", {
     basemap : "topo",
     center : [-98, 39],
     zoom : 4
    });

    // Add the basemap gallery
    var basemapGallery = new BasemapGallery({
     showArcGISBasemaps : true,
     map : map,

    });
    basemapGallery.startup();

    if (basemapGallery.showArcGISBasemaps) {
     basemapGallery.on("load", function() {
      console.log('base');
      createBasemapGallery();
     });
    } else {
     createBasemapGallery();
    }
    // Add the basemap gallery in drop down menu on toolbar

    function createBasemapGallery() {
     for ( i = 0; i < basemapGallery.basemaps.length; i++) {( function(x) {
        console.log(basemapGallery.basemaps.title);
        registry.byId('basemapMenu').addChild(new MenuItem({
         label : basemapGallery.basemaps.title,
         onClick : function() {
          basemapGallery.select(basemapGallery.basemaps.id);
         }
        }));
       }(i));
     }
    }

   });
  </script>
 </head>

 <!--ESRI's layout-->

 <body class="claro">
  <!--Border Container settings-->
  <section data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, liveSplitters:true" style="width: 100%; height: 100%; padding-top:0px;">
   <!--Border Container settings-->
   <!-- Tags end on line afterwards to eliminate any whitespace -->
   <!--This is the header of the application-->
   <section data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">

    <h1>Fire Plan Web Mapping Application</h1>
   </section>
   <section data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:true">
    <section data-dojo-type="dijit/layout/AccordionContainer">
     <section data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
      <section id="tocsection">
       TOC Placeholder
      </section>
     </section>
    </section>
   </section>
   <section id="map" class="map" data-dojo-type="dijit/layout/ContentPane" region="center" data-dojo-props="region:'center'">
    <section id="fancy" data-dojo-type="dijit/Toolbar" style="background-color:black; height:35px;">

     <!--Additional widgets go below there-->
     <div label="Basemaps" data-dojo-type="dijit/form/DropDownButton">
      <div data-dojo-type="dijit/Menu" id="basemapMenu"></div>
     </div>

    </section>
   </section>
  </section>
 </body>
</html>

Re: Change Drop Down Title pane

AlexGole1 — Sat, 11 Dec 2021 21:19:37 GMT

Man I just went down a rabbit hole with this one...I'm pretty much a newb as well so sorry I can't be of more help. I had to strip down your code a bunch to get this to work so the skeleton is below. However, I did revisit an issue with the basemapGallery dijit that I encountered before and finally got it resolved. If 'showArcGISBasemaps:true' is set then it's important to use the basemaps.on("load") syntax. FYI if it's ever set to false this will NEVER fire because load only fires for fetching ArcGIS.com basemaps (which is the issue I encountered before building a custom list). Anywho...I tried to mimic your set-up below so you could try to add to it from a working base.

<!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>TEST</title>
  <!-- CSS -->
  <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">

  <!-- Code -->
  <script src="http://js.arcgis.com/3.9/"></script>

  <style>
   html, body, #map {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
   }
  </style>

  <script>
   require(["esri/map", "dojo/parser", "dojo/on", "esri/dijit/BasemapGallery", 
   "dijit/registry", "dijit/MenuItem", "dijit/Toolbar", "dijit/form/Button", 
   "dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/layout/BorderContainer", 
   "dijit/layout/ContentPane", "dijit/layout/AccordionContainer"], 
   function(Map, parser, on, BasemapGallery, registry, MenuItem) {
    parser.parse();

    var map = new Map("map", {
     basemap : "topo",
     center : [-98, 39],
     zoom : 4
    });

    // Add the basemap gallery
    var basemapGallery = new BasemapGallery({
     showArcGISBasemaps : true,
     map : map,

    });
    basemapGallery.startup();

    if (basemapGallery.showArcGISBasemaps) {
     basemapGallery.on("load", function() {
      console.log('base');
      createBasemapGallery();
     });
    } else {
     createBasemapGallery();
    }
    // Add the basemap gallery in drop down menu on toolbar

    function createBasemapGallery() {
     for ( i = 0; i < basemapGallery.basemaps.length; i++) {( function(x) {
        console.log(basemapGallery.basemaps.title);
        registry.byId('basemapMenu').addChild(new MenuItem({
         label : basemapGallery.basemaps.title,
         onClick : function() {
          basemapGallery.select(basemapGallery.basemaps.id);
         }
        }));
       }(i));
     }
    }

   });
  </script>
 </head>

 <!--ESRI's layout-->

 <body class="claro">
  <!--Border Container settings-->
  <section data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, liveSplitters:true" style="width: 100%; height: 100%; padding-top:0px;">
   <!--Border Container settings-->
   <!-- Tags end on line afterwards to eliminate any whitespace -->
   <!--This is the header of the application-->
   <section data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">

    <h1>Fire Plan Web Mapping Application</h1>
   </section>
   <section data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:true">
    <section data-dojo-type="dijit/layout/AccordionContainer">
     <section data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
      <section id="tocsection">
       TOC Placeholder
      </section>
     </section>
    </section>
   </section>
   <section id="map" class="map" data-dojo-type="dijit/layout/ContentPane" region="center" data-dojo-props="region:'center'">
    <section id="fancy" data-dojo-type="dijit/Toolbar" style="background-color:black; height:35px;">

     <!--Additional widgets go below there-->
     <div label="Basemaps" data-dojo-type="dijit/form/DropDownButton">
      <div data-dojo-type="dijit/Menu" id="basemapMenu"></div>
     </div>

    </section>
   </section>
  </section>
 </body>
</html>

Sorry Sarah. As you noticed I am a newb as well :-). You are doing a much better job at this than I am. I really appreciate your effort and help on this. I am trying out your code now.
Thanks again,
Alex

Re: Change Drop Down Title pane

Anonymous User — Tue, 13 May 2014 22:50:24 GMT

Original User: sarahclark

Don't be sorry! I am very pleased I finally understand the basemapGallery dijit load event! That would have haunted me 🙂

Re: Change Drop Down Title pane

AlexGole1 — Wed, 14 May 2014 18:41:21 GMT

Don't be sorry! I am very pleased I finally understand the basemapGallery dijit load event! That would have haunted me 🙂

That works perfectly! Seems like you have a great grasp over the JS API already! Now, one last technical question for you. Would it possible to add images next to each basemap title? ;-). I would understand if you were getting tired of my questions. I feel like I am almost there.
Thank you for your patience and great job!
Alex

Re: Change Drop Down Title pane

AlexGole1 — Sat, 11 Dec 2021 21:19:27 GMT

Yes. I am using dijit/DropDownMenu in a dijit/Toolbar and added a title pane in the drop down menu in order to get a white canvas to display my different map elements (such as basemap gallery, bookmarks, layers...). I will try to add the <div class="white"> and see if that works.
Thank you for your help!
Alex

It seems like the <div class="white"> messed up my toolbar and the dropdown menu is still transparent. Attached is an screen shot of how it looks when I added the <div class="white">, the second image it how it is supposed to look. Where

 <section data-dojo-type="dijit/form/DropDownButton" data-dojo-props="iconClass:'bookmarks', showLabel:false, style:'float:left'">
               <span>Bookmarks</span>
                  <section class="white" data-dojo-type="dijit/layout/ContentPane" style="width:auto; !important; height:auto !important; overflow:auto;">
                     <section id="bookmarks">
                     </section>
                  </section>
               </section>

Where did I make a mistake?

[ATTACH=CONFIG]33783[/ATTACH][ATTACH=CONFIG]33784[/ATTACH]