schlot

Why is my floating pane under my map and not on top of  it?

Discussion created by schlot on Jun 27, 2014
Latest reply on Jul 8, 2014 by khutchins-esristaff
I have a map that accepts an incoming parameter and based on the value, loads a particular data layer, sets the title etc.  I need to handle the possibility of no incoming argument, presenting the user with a pick list comparable to the values of the incoming parameter.

I will always have a county boundary layer, so I have a load event on the county layer, which checks to see if there is a parameter on the URL.  It will either load additional data or open the floating pane of category choices if there is no parameter provided.

My problem is that the floating pane loads first, and ends up under my map instead of on top of it.  I've tried setting the z-index to 999 for my floating pane, but that didn't help.  I feel like I'm missing something obvious, but I haven't spotted it yet. 
<!DOCTYPE html>
  <html>  
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title>Sample - Floating Pane if no URL parameter</title> 
    <link type="text/css" rel="stylesheet" href="https://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">  
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.9/js/esri/dijit/css/Popup.css"> 
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.9/js/dojo/dojox/layout/resources/FloatingPane.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.9/js/dojo/dojox/layout/resources/ResizeHandle.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.9/js/esri/css/esri.css" > 
    <link type="text/css" rel="stylesheet" href="css/style.css">
 
    <script type="text/javascript">
    var dojoConfig = {
      parseOnLoad: false,
      async:true
    };
    </script>
<script type="text/javascript" src="https://js.arcgis.com/3.9compact/"></script> 
<script type="text/javascript">
    var pathName = "https://ogitest.oa.mo.gov";
    var map, countyLayer, NCDM, ncdmLayer;
   
    require(["dojo/parser", "esri/map", "esri/domUtils","esri/urlUtils",   
     "dojo/dom", "dijit/registry", "dojo/on", "dojo/dom-construct", "dojo/query",
    "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer", 
    "esri/renderers/SimpleRenderer", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",  
    "esri/graphic", "dojo/_base/Color", "dojo/_base/array","dojo/aspect", 
    "dijit/form/Form", "dijit/form/RadioButton", "dijit/form/Button","dijit/form/TextBox",
    "dijit/form/Select", "dijit/TitlePane", "dijit/layout/BorderContainer", 
    "dojox/layout/FloatingPane","dojox/layout/Dock",
    "dojo/domReady!"], 
    function(parser, Map, domUtils, urlUtils, dom, registry, on, domConstruct, query, 
    FeatureLayer,  ArcGISDynamicMapServiceLayer,SimpleRenderer, SimpleLineSymbol, SimpleFillSymbol, Graphic, Color, 
    arrayUtils, aspect){
    parser.parse();     
      var countyFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, 
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([149,149,149]), 2)); 

      map = new Map("mapDiv", {
        basemap: "topo",
        center: [-92.593, 38.5],
        zoom: 7
      });    

      countyLayer = new FeatureLayer(pathName + "/ArcGIS/rest/services/BaseMap/county_simple/MapServer/0", {
        id: "countyLayer",
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["COUNTYNAME"]
      });

      countyRenderer = new SimpleRenderer(countyFillSymbol);
      countyLayer.on('load', checkURL);//checks for NCDM in URL, loads data based on parameter provided
      map.addLayers([countyLayer]);
            
  //load this category specified in the incoming URL parameter
    function loadData(ncdm){
        var ncdmPath, layerName;
        cleanUpLayers();
        switch (ncdm) {
          case "AMI":
            ncdmPath = pathName + "/ArcGIS/rest/services/DHSS/EPHT_ami_county/MapServer";
            layerName = "AMILayer";      
            break;
        
          case "CO":
            ncdmPath = pathName + "/ArcGIS/rest/services/DHSS/EPHT_carbon_county/MapServer";
            layerName = "COLayer";         
            break;
        }
        ncdmLayer = new ArcGISDynamicMapServiceLayer(ncdmPath, {
          id: layerName,
          opacity: '0.7'
        });
        map.addLayers([ncdmLayer]);
  }
      
      function cleanUpLayers(){
        var layers = map.getLayersVisibleAtScale(map.getScale());
        arrayUtils.forEach(layers, function(layer){
          if (layer.id !== 'layer0' && layer.id !== 'countyLayer') {
            map.removeLayer(layer);
          }
        });
      }
 
//get the URL parameter, either load the data or if there isn't a parameter, open the floating pane               
  function checkURL(){
    NCDM = getNCDMFromUrl(document.location.href);
    if (!NCDM) {     
      openFloatingPane('floater_pick');
    } else {
      loadData(NCDM);    
    }
  }
  function getNCDMFromUrl(url){ //extracts the parameter from the url
    var urlObject = urlUtils.urlToObject(url);
    if (urlObject.query && urlObject.query.ncdm) {
      return urlObject.query.ncdm;
    } else {
      return null;
    }
  }
//functions for managing floating panes
  function openFloatingPane(paneId){
    var fp = registry.byId(paneId);
    if ((fp.style == "visibility: hidden;") || (fp.style = "VISIBILITY:hidden;")) {
      fp.style.visibility = "visible";
      fp.show();
    }
  }
  
});
</script>
    </head>
  <body class="claro">  
  <div id='mainWindow' data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" 
     style="width:100%;height:100%;margin:0;">

  <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center',gutters:'false'">  
          <div id="dock_pick" data-dojo-type="dojox/layout/Dock" ></div> 
        <div id="floater_pick" data-dojo-type="dojox/layout/FloatingPane" 
        data-dojo-props= "title:'Choose a category', dockTo:'dock_pick', closable:false, resizable:true, dockable:true"
        style="visibility:hidden;"   >     
        <div id="pickDiv" >
          category picking goes here
</div>
</div>
   </div>
 </div>
</body>
</html>

css:
#floater_pick{
  z-index: 999;
  top:80px;
  left: 80px;
  width: 100px;
  height: 100px;
}

Outcomes