resize events on map in closed titlepane

TracySchloss — Thu, 03 Apr 2014 15:19:42 GMT

I have a map in a titlePane. I want to be able to minimize the titlePane to give more room on the screen. If my titlePane is open when I resize, the map is fine. If I have it closed when I resize my browser window, then the map is cropped and my featureLayer isn't even getting drawn.

I've read some of the threads about how I need to set the map parameter to "autoResize:false" and then manage my map resizing manually. I think I'm doing this, but apparently I have something out of sequence.

http://jsfiddle.net/schlot/qxut9/

Re: resize events on map in closed titlepane

JonathanUihlein — Sat, 11 Dec 2021 06:32:58 GMT

I managed to get your desired functionality working correctly but I had to strip some of your code out to simplify the sample.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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, IE=10" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title>Resize map problem</title> 
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/dijit/css/Popup.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dgrid/css/dgrid.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dgrid/css/skins/claro.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">

    
<script type="text/javascript">
var djConfig = {
  parseOnLoad: false
};
</script>
<script type="text/javascript" src="http://js.arcgis.com/3.8/"></script> 
<script type="text/javascript">
  
  // Globals
  var map, resizeEvt, pathName = "http://gis.dhss.mo.gov";
  
  //   var fieldNames = [];  
  require([
    "dojo/parser","dojox/mobile", "esri/sniff",  "esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent", "esri/dijit/Popup",
    "esri/dijit/InfoWindow", "dojo/dom", "dijit/registry", "dojo/on", "dojo/dom-construct", "dojo/query",
    "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer","esri/dijit/InfoWindow",  "esri/InfoTemplate", 
    "esri/tasks/query",  "esri/tasks/QueryTask", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/graphic",
    "esri/geometry/Circle", "esri/geometry/Geometry","esri/geometry/Point", "dojo/_base/declare","dojo/request", "dojo/promise/all", "dojo/store/Memory",
    "esri/renderers/SimpleRenderer","dojo/_base/Color", "dojo/_base/array", "dijit/TooltipDialog","dijit/popup","esri/lang",
    "dojo/dom-style", "dijit/form/Button", "dijit/form/FilteringSelect", 
    "dgrid/OnDemandGrid", "dgrid/extensions/ColumnHider","dgrid/extensions/DijitRegistry","dgrid/extensions/ColumnResizer","dgrid/Selection",
    "dijit/TitlePane", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/form/Form",
    "dojo/domReady!"
  ], function(
    parser, mobile, has, Map, esriConfig, SpatialReference, Extent, Popup, 
    InfoWindow, dom, registry, on, domConstruct,query,
    FeatureLayer, ArcGISDynamicMapServiceLayer, InfoWindow, InfoTemplate, 
    Query, QueryTask, SimpleFillSymbol, SimpleLineSymbol, Graphic,
    Circle, Geometry, Point, declare, request, all, Memory, SimpleRenderer, Color, arrayUtil, TooltipDialog,DijitPopup,esriLang,
    domStyle, Button, FilteringSelect, 
    Grid, ColumnHider, DijitRegistry, ColumnResizer,Selection, TitlePane, ContentPane, BorderContainer, Form
  ){
    
    parser.parse();
    
    esriConfig.defaults.io.proxyUrl = "http://wwwgis.dhss.mo.gov/Website/proxy/proxy.ashx";
    
    var spatialReference = new SpatialReference({ wkid: 102100});
    var startExtent = new Extent(-10583000, 4287025, -9979000, 4980462, spatialReference);
    var highlightFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 0]), 3), new Color([255, 255, 0, 0.1]))
    var countyFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([94, 149, 193]), 2), new Color([203, 221, 235, 0.5]))
    var popup = new Popup({ fillSymbol: highlightFillSymbol }, domConstruct.create("div"));

    var dialog = new TooltipDialog({
      id: "tooltipDialog",
      style: "position: absolute; width: 90px; font: normal normal normal 10pt Helvetica;z-index:100"
    });
    
    dialog.startup();
    
    map = new Map("mapDiv", {
      center: [-92.593, 38.6],
      zoom: 6,
      basemap:"gray",
      autoResize:false
    });

     var countyLayer = new FeatureLayer(pathName + "/ArcGIS/rest/services/county_simple/MapServer/0", {
       id: "countyLayer"
        });
     
     var countyRenderer = new SimpleRenderer(countyFillSymbol);
     countyLayer.setRenderer(countyRenderer);

    map.addLayers([countyLayer]);  
        
    map.on("load", function(){
      map.graphics.enableMouseEvents();
      map.graphics.on("mouse-out", closeDialog);      
    });
        
    countyLayer.on("mouse-over", function(evt){
      
      var t = "<b>${NAME}</b>"; 
      var content = esriLang.substitute(evt.graphic.attributes,t);
      var highlightGraphic = new Graphic(evt.graphic.geometry,highlightFillSymbol);
      
      map.graphics.add(highlightGraphic);         
      
      dialog.setContent(content);
      domStyle.set(dialog.domNode, "opacity", 0.85);
      
      DijitPopup.open({
        popup: dialog, 
        x: evt.pageX,
        y: evt.pageY
      });
      
    });
    
    resizeEvt = (window.onorientationchange !== undefined && !has('android')) ? "orientationchange" : "resize";
    
    on(window, resizeEvt, function(){ 
      // Only resize the map if the titlePane.open is true
      if(dijit.byId("tp_map").open){  resizeMap(); }
    });
    
    // Show Event for the TitlePane
    on(dijit.byId("tp_map"), "show", function(){
      console.log('show');
      resizeMap();
      
    });
    
    // Hide Event for the TitlePane
    on(dijit.byId("tp_map"), "hide", function(){
      console.log('hide');
      closeDialog();
    });
    
    function closeDialog() {
      map.graphics.clear();
      DijitPopup.close(dialog);
    }
    
    function resizeMap() {
      console.log('resize');
      map.reposition();
      map.resize();
    }

  });
</script>

    </head>
<body class="claro">
  <div id='mainWindow' data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
    <div id="reportContainer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> 
    <div id="tp_map" class="gridPane" data-dojo-type="dijit/TitlePane" data-dojo-props= "title:'Click a county to find information', open:true"  >     
      <div id="mapDiv"> </div>
    </div>
    </div>
  </div>  
</body>
</html>

CSS:

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    overflow:auto;
}

#mainWindow{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#mapDiv{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}

.gridPane{
  width:100% !important;
  height:100% !important;
  padding:0;
  margin:0;
}

#banner {
  height:auto;
  margin: 0;
  padding: 0;
}

#header{
  background-image: url("../images/logo.jpg");
  background-repeat: no-repeat;
  background-color:#1E3A62; /*#dcd9c6;*/  
  color: white; 
  font-size:20pt; text-align: left;
  font-weight:bold;
  font-family:"Century Gothic";
  height:100px;
  margin: 0;
}
#subHeader {
  font-size:16px;
  background-color:#cbddeb;
  font-weight: bold;
  padding:0;
  margin: 0;
}

.basicContainer{
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #FFFFFF;
  height:auto;
}

#countySelect {
  z-index: 999;
}

#reportContainer {
  height:100%;
}

/*
#tp_map{
height:auto;

}

*/
.esriPopup .title  {
  background-color:#CBDDEB;
  color: #CBDDEB;
  font-size:smaller;
  height:5px;
} 
.esriPopup .titlePane {
  background-color:#CBDDEB;
  line-height: 22px;
  padding-left: 8px;
}
 
/*
.hidden {
  visibility:hidden;
  display:none;
}
.visible {
  visibility:visible;
  height:100%;
  display:block;
}
*/

/*
.reportTitlePane{
  color: white;
  background-color: #76a2c5;
  font-family: Arial, Helvetica, sans-serif;
  font-size:12pt;
  font-weight:bold;
  overflow: auto;
}
*/
/*used by the formatted grid*/


.claro .dijitTitlePaneTitle {
    background: #d3e3ef;
    border:solid 1px #29201A;
  }
        
.claro .dijitTitlePaneContentInner {
    padding: 1;
    font-size: 12px;
    overflow:auto;
}
.claro .dijitTitlePaneTextNode {
    font-weight: bold;
    font-size: 12px;
} 

.dgrid {
    position: relative;
    overflow: auto;
    /* This is needed by IE to prevent crazy scrollbar flashing */
    border: 1px solid #dddddd;
   /* height: 30em; */
    display: block;
    color:black;
}

.dgrid-grid {
   /*
 height: 200px;
*/
   height: auto;
/*
  width: auto;
*/

}

.dgrid-header {
    font-weight: normal;
    font-size:11px;
    height: auto;
}
.dgrid-content {
    position: relative;
    margin-top: 16px;
    width:inherit;
}

.dgrid .dgrid-cell {
    min-width: 50px;
   border-color: #dddddd;
}

.dgrid .dgrid-scroller {
    max-height: 200px;
    position: relative;
}
.dgrid .field-OBJECTID, .field-Shape.len {
    min-width: 0px;
}
.title {
    font-weight: bold;
    font-size: medium;
    padding-top: 11px;
}

.details {
    padding: 2px;
    font-size: medium;
}

h2, h3, h4 {
    color: #000000;
}
#downloadForm {
    height: 0px; 
    width: 0px; 
    display:none;
}

Compare the changes I've made and let me know if you have any questions.

Re: resize events on map in closed titlepane

TracySchloss — Fri, 04 Apr 2014 17:57:55 GMT

It works in this stripped down example, but when I combine it with the full project, it still isn't working. I know I must be close, but I haven't figured out where my issues are yet. Since my map is only a set of county boundaries, I might discover the user doesn't want that anyway, they'd just as soon work just from a dropdown of names and call it good.

Re: resize events on map in closed titlepane

JonathanUihlein — Fri, 04 Apr 2014 18:56:38 GMT

I updated your jsfiddle sample to work correctly.

I tried to avoid removing code.

http://jsfiddle.net/qxut9/3/

topic Re: resize events on map in closed titlepane in ArcGIS JavaScript Maps SDK Questions

resize events on map in closed titlepane

Re: resize events on map in closed titlepane

Re: resize events on map in closed titlepane

Re: resize events on map in closed titlepane