Multiple Drop Downs in same div

CraigMcDade — Fri, 24 Aug 2012 14:12:21 GMT

I have two drop down menus: 1 for a search function and 1 to open up a basemap gallery. I would like them both to be in either the header or the main content pane. However, when I put them in the same div id the map doesn't draw. The map draws as the code is written now and the drop boxes function as expected, however, the search function is placed in a very small (16px high) window area.

This may be more of a HTML or CSS question, but I can't seem to locate the error in why both can't be placed in the same area of the page?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
      <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
      <title> 
      </title>
      <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css" />
      <style type="text/css"> 
         html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
         .esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail{
         border-color: #66FFFF !important;
         }
         #header { 
         padding-top:5px; 
         padding-left:10px; 
         background-color:darkgreen; color:white; font-size:18pt; 
         text-align:left; font-weight:bold;
         height:40px; 
         } 
         #map{
         padding:0;
         }
      </style>
      <script type="text/javascript"> 
         var djConfig = {
           parseonload: true
         };
      </script> 
      <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
      <script type="text/javascript"> 
         dojo.require("dijit.dijit"); // optimize: load dijit layer
         dojo.require("dijit.layout.BorderContainer");
         dojo.require("dijit.layout.ContentPane");
         dojo.require("esri.map");
         dojo.require("dijit.TitlePane");
         dojo.require("esri.dijit.BasemapGallery");
         dojo.require("esri.arcgis.utils");
         dojo.require("esri.tasks.locator");
         
         var map, locator;
         
         function init() {
           var initExtent = new esri.geometry.Extent({"xmin":-9265357.374781793,
         "ymin":3337183.1320917513,
         "xmax":-9021064.632382275,
         "ymax":3476757.145740537,
         "spatialReference":{"wkid":102100}});
           
         map = new esri.Map("map",{extent:initExtent});
           
           createBasemapGallery();
           
           //resize the map when the browser resizes
           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
         
         locator = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");
           dojo.connect(locator, "onAddressToLocationsComplete", showResults);
           
           map.infowindow.resize(200,125);
         }
         
         function locate() {
           map.graphics.clear();
           var address = {"SingleLine":dojo.byId("address").value};
           locator.outSpatialReference= map.spatialReference;
           var options = {
             address:address,
             outFields:["Loc_name"]
           }
           locator.addressToLocations(options);
         }
         
         function showResults(candidates) {
           var candidate;
           var symbol = new esri.symbol.SimpleMarkerSymbol();
           var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");
         
           symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_ROUND);
           symbol.setColor(new dojo.Color([153,0,51,0.75]));
         
           var geom;
           
           dojo.every(candidates,function(candidate){
             console.log(candidate.score);
             if (candidate.score > 80) {
               console.log(candidate.location);
               var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };   
               geom = candidate.location;
               var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);
               //add a graphic to the map at the geocoded location
               map.graphics.add(graphic);
               //add a text symbol to the map listing the location of the matched address.
               var displayText = candidate.address;
               var font = new esri.symbol.Font("16pt",esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL,esri.symbol.Font.WEIGHT_BOLD,"Helvetica");
              
               var textSymbol = new esri.symbol.TextSymbol(displayText,font,new dojo.Color("#666633"));
               textSymbol.setOffset(0,8);
               map.graphics.add(new esri.Graphic(geom, textSymbol));
               return false; //break out of loop after one candidate with score greater  than 80 is found.
             }
           });
           if(geom !== undefined){
             map.centerAndZoom(geom,15);
           }
         
         }
         
         function createBasemapGallery() {
           var basemapGallery = new esri.dijit.BasemapGallery({
             showArcGISBasemaps: true,
             map: map
           }, "basemapGallery");
         
           var selectionHandler = dojo.connect(basemapGallery,"onselectionchange",function(){
             dojo.disconnect(selectionHandler);
             //add the operational layers to the map
             var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://<myserver>/arcgis/rest/services/Dynamic/Parks/MapServer", {"opacity":1});
             map.addLayer(operationalLayer);
           });
           
           basemapGallery.startup();
           
           
           dojo.connect(basemapGallery, "onerror", function(msg) {console.log(msg)});
         }
         
         
         
         //show map on load 
         dojo.addonload(init);
      </script> 
   </head>
   <body class="claro">
      <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
         <div id="header" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="top" align="left">
            Template
         </div>
         <!--Search Function-->
         <div id="top" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="top" align="right">
            <div style="position:absolute; right:160px; top:10px;">
               <div dojoType="dijit.TitlePane" title="Search" closable="false" open="false">
                  <b><i>  Search by Address:</i></b>  
                  <br /> 
                  <textarea type="text" id="address">Enter Address</textArea> 
                  <br /> 
                  <button dojotype="dijit.form.Button" onclick="locate()">Search</button> 
               </div>
               <div id="locate"></div>
            </div>
         </div>
         <!--Layer Toggle-->
         <!--Basemap-->
         <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;">
            <div style="position:absolute; right:20px; top:10px; z-Index:98;">
               <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false" open="false">
                  <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
                     <div id="basemapGallery"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Re: Multiple Drop Downs in same div

BenFousek — Fri, 24 Aug 2012 14:34:57 GMT

Your first issue is that you call dojo.addonload(init); it should be dojo.addOnLoad(init). Dojo classes are case sensitive. So are esri classes. map.infowindow.resize(200,125) should be map.infoWindow.resize(200,125).

After I fixed addOnLoad and ran it, more errors popped up. If you don't have the FireBug plugin for Firefox get it. It's dang near impossible to develop in the JSAPI without it (even simple maps).

Re: Multiple Drop Downs in same div

CraigMcDade — Fri, 24 Aug 2012 15:03:50 GMT

Hmm. Well I guess my problems are a bit more complicated than I thought. My map works in Chrome, but in IE or Firefox it fails, even with the changes your indicated.

topic Multiple Drop Downs in same div in ArcGIS JavaScript Maps SDK Questions

Multiple Drop Downs in same div

Re: Multiple Drop Downs in same div

Re: Multiple Drop Downs in same div