knabe14

Basemap Gallery

Discussion created by knabe14 on Jun 25, 2013
Latest reply on Jun 25, 2013 by knabe14
I'm having difficulties adding the basemap gallery to my application. more on the HTML side. Could anybody take a look and give me some hints. Everytime I add it somewhere or change either left or right it messes up my whole page.

<div id="content" data-dojo-type="dijit.layout.BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">
    <div id="header" dojotype="dijit.layout.ContentPane" region="top">       
      </div>
       

  <div id="rightPane"
       data-dojo-type="dijit.layout.ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit.layout.AccordionContainer">
      <div data-dojo-type="dijit.layout.ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">

        <div id="legendDiv"></div>

      </div>

      <div data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="title:'Layers'">
          <input id="SurveyPointsCB"  type="checkbox" onclick='updateSurveyPointsVisibility()'/><label> Survey Points</label><br />
          <input id ="CCTVObservationsCB"  type="checkbox" onclick='updateCCTVObservations()' /><label> CCTV Observations</label>   
          <input id="ManholesCB"  type="checkbox" onclick='updateManholes()' /><label> Manholes</label>   
          <input id="InletsCB" type="checkbox" onclick='updateInlets()' /><label>Inlets</label>
              <input id="InfallsCB" type="checkbox" onclick='updateInfalls()'/><label>Infalls</label>
              <input id="OutfallsCB" type="checkbox" onclick='updateOutfalls()'/><label>Outfalls</label>
              <input id="ChannelFeaturesCB" type="checkbox" onclick='updateChannelFeatures()'/><label>Channel Features</label>
              <input id="PipeFeaturesCB" type="checkbox" onclick='updatePipeFeatures()'/><label>Pipe Features</label>
              <input id="PlayaCentroidsCB" type="checkbox" onclick='updatePlayaCentroids()'/><label>Playa Centroids</label>
              <input id="PipesCB" type="checkbox" onclick='updatePipes()'/><label>Pipes</label>
              <input id="FlumesCB" type="checkbox" onclick='updateFlumes()' /><label>Flumes</label>
              <input id="DamsCB" type="checkbox" onclick='updateDams()' /><label>Dams</label>
              <input id="ChannelsCB" type="checkbox" onclick='updateChannels()' /><label>Channels</label>
              <input id="VirtualLinksCB" type="checkbox" onclick='updateVirtualLinks()'/><label>Virtual Links</label>
              <input id="StormWaterSystemsCB" type="checkbox" onclick='updateStormWater()' /><label>Stormwater Systems</label>
              <input id="FootprintCB" type="checkbox" onclick='updateAssetFootprints()'/><label>Assest Footprints</label>
              <input id="PlayaLakesCB" type="checkbox" onclick='updatePlayaLakes()'/><label>Playa Lakes</label>
              <input id ="CCTVRouteCB"  type="checkbox" onclick='updateCCTVVisibility()'/><label> CCTV Route</label><br />
  
      </div>
    </div>
  </div>
  <div id="map"
       data-dojo-type="dijit.layout.ContentPane"
       data-dojo-props="region:'center'"
       style="padding:0;">
  
  </div>
    <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
        <table style="width:100%">
            <tr>
                <td style="text-align:left; width:50%">
                <span id="selectedTool" style="position:absolute; left:20px; bottom:2px; color:#000; z-index:50;">Selected Tool</span>                
                </td>
                <td style="text-align:right; width:50%">
                    <span id="coords" style="position:absolute; right:20px; bottom:2px; color:#000; z-index:50;"></span>
                </td>
            </tr>
        </table>
      </div>
      
</div>
  
</body>
     

</html>


I need this to go in there

  <div style="position:absolute; left:20px; bottom:60px; z-Index:999;">
          <div data-dojo-type="dijit.TitlePane" 
               data-dojo-props="title:'Switch Basemap', closable:false,  open:false">
            <div data-dojo-type="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery" ></div></div>
          </div>
        </div> 


Thanks!

Nick

Outcomes