topic Re: Why is my floating pane under my map and not on top of it? in ArcGIS JavaScript Maps SDK Questions

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

TracySchloss — Fri, 27 Jun 2014 16:12:54 GMT

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;
}

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

TimWitt — Fri, 27 Jun 2014 17:02:06 GMT

Tracy,

Did you try and add the following to your css:

position: absolute;

Let me know if that works.

Tim

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

TracySchloss — Fri, 27 Jun 2014 19:29:41 GMT

No, it didn't help. It sounded good though.

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

KellyHutchins — Tue, 08 Jul 2014 22:22:09 GMT

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>