3 Replies - 2345 Views - Last Post: 24 August 2012 - 07:32 AM

#1 gvsulakerfan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 24-August 12

Drop Down Boxes not in right spot?

Posted 24 August 2012 - 06:52 AM

Very new to programming and development. Trying to put together a simple web mapping application and have created 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.

I know the code is a mess. I plan on cleaning that up after I get the app fully functional. Any ideas on what I might be missing? I'm sure its plain as day.

<!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>


Is This A Good Question/Topic? 0
  • +

Replies To: Drop Down Boxes not in right spot?

#2 BenignDesign  Icon User is online

  • holy shitin shishkebobs
  • member icon




Reputation: 5911
  • View blog
  • Posts: 10,330
  • Joined: 28-September 07

Re: Drop Down Boxes not in right spot?

Posted 24 August 2012 - 07:07 AM

Do you work for ArcGIS or are you trying to swipe their code?
Was This Post Helpful? 0
  • +
  • -

#3 gvsulakerfan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 24-August 12

Re: Drop Down Boxes not in right spot?

Posted 24 August 2012 - 07:11 AM

Its a mashup of a sample that they freely provide, with some stuff that I have written.
Was This Post Helpful? 0
  • +
  • -

#4 BenignDesign  Icon User is online

  • holy shitin shishkebobs
  • member icon




Reputation: 5911
  • View blog
  • Posts: 10,330
  • Joined: 28-September 07

Re: Drop Down Boxes not in right spot?

Posted 24 August 2012 - 07:32 AM

Fair enough.

Personally, if putting the drop-downs in the same div are going to cause functionality issues, I would keep them in separate divs. You can always adjust your CSS to place them where it looks like they're in the same div.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1