Community

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

3314
3
06-27-2014 09:12 AM
TracySchloss
by
Frequent Contributor
‎06-27-2014 09:12 AM
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;
}
0 Kudos
3 Replies
TimWitt
by
Frequent Contributor
‎06-27-2014 10:02 AM
Tracy,

Did you try and add the following to your css:

position: absolute;


Let me know if that works.

Tim
0 Kudos
TracySchloss
by
Frequent Contributor
‎06-27-2014 12:29 PM
No, it didn't help.  It sounded good though.
0 Kudos
KellyHutchins
by Esri Frequent Contributor
Esri Frequent Contributor
‎07-08-2014 03:22 PM

Tracy,

I don't think the panel is getting parsed/styled correctly because it is hidden when you display the application. I used a simplified version of your code to test and if you set the visiblity to visible then hide it after the app loads it works. Here's an example.

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






   <style>


      html,body, #mapDiv {


        height:100%;


        width:100%;


        margin:0;


      }






    #floater_pick{  


      z-index: 999;  


      top:80px;  


      left: 80px;  


      width: 100px;  


      height: 100px;  


    }  


   </style>


    <script type="text/javascript">  


    var dojoConfig = {  


      async:true


    };  


    </script>  


<script type="text/javascript" src="https://js.arcgis.com/3.9compact/"></script>   


<script type="text/javascript">  






    var map;  


     


    require(["dojo/parser", "esri/map", "esri/domUtils","esri/urlUtils",     


     "dojo/dom", "dijit/registry", "dojo/on", "dojo/dom-construct", "dojo/query",  "dojo/dom", "dojo/dom-style",


    "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,   dom, domStyle,


    FeatureLayer,  ArcGISDynamicMapServiceLayer,SimpleRenderer, SimpleLineSymbol, SimpleFillSymbol, Graphic, Color,   


    arrayUtils, aspect){  


    parser.parse();       






    //hide floating pane


    domStyle.set("floater_pick", "visibility", "hidden");










      map = new Map("mapDiv", {  


        basemap: "topo",  


        center: [-92.593, 38.5],  


        zoom: 7  


      });      






      map.on("load", function(){


        //show the panel 


        openFloatingPane("floater_pick");


      });


              






  


//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:visible;"   >       


        <div id="pickDiv" >  


          category picking goes here  


</div>  


</div>  


   </div>  


 </div>  


</body>  


</html>