[GIS] Auto resize map to 100% after content pane is removed in ArcGIS JSAPI

arcgis-javascript-apidojolayouts

Been at this for hours and I can't seem to figure it out.
I'm using AG-JSAPI 3.6

I have a map layout with a bordercontainer and two contentpanes, One is the map div and the other is the left div (which holds the legend, and basemaps and such as child elements).

Anyway, I have a checkbox element on the footer that when clicked, fires off a function that (should ideally) make the left div disappear and the map div expand to the width of the browser.

function toggleDiv() {
    // If statement to check if the checkbox is checked.
if (dijit.byId("ToggleLeft").checked) {
    //Sets the left div's display CSS property to inline and then setting the
    //width property
   dojo.setStyle(dijit.byId("leftDiv").domNode, 'display', 'inline');
   dojo.byId("leftDiv").style.width = '285px';

}
else
{
    // Sets the display css property to "none" which makes the element disappear 
   dojo.setStyle(dijit.byId("leftDiv").domNode, 'display', 'none');

};

}

The thing is, when I resize the browser, the map automatically resizes to the width of the browser. However, I want to do this as soon as the leftDiv element disappears. What js code would I have to use to get this to happen? Any help would be appreciated.

Thanks

Best Answer

The answer I was looking for was provided here!

https://community.esri.com/message/342922?commentID=342922#comment-342922

Cheers

Related Solutions

[GIS] Projection problem with ESRI JSAPI and ArcGIS map service

The issues is that your map is in a projection with wkid:32633 , i.e. UTM 33 N.This isn't the webMercator projections.

That's why if you use the esri.geometry.webMercatorToGeographic() method, you are bound to get wrong results.

You need to properly project the coordinates to Geographic Lat-long. There is nothing out of the box for this kind of coordinate transformation on the client side. You have two options:

Write some custom code for doing this coordinate transformation. This is not as difficult as it sounds.
Use the proj4js library in your application. To do this, follow these steps:
1. Download the latest library from https://github.com/proj4js/proj4js/releases
2. In your HTML file use <script type="text/javascript" src="dist/proj4.js"></script>
3. You'll need to define the projections before you can use it. You can do this by using the following lines of code: var UTM33N= "+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs"; var GCS84="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
4. When you need to transform, you can use the following line: var transformed=proj4(UTM33N,GCS84,[x,y]); where x & y are the coordinates in your given projection. As output you'll get an array with two elements, the longitude, & the Latitude

If you want to do this on the server side, you could always use the Project Operation on the Geometry service of ArcGIS Server. A sample is available here: Project a point

[GIS] Displaying static and dynamic content on top of Map using ArcGIS API for JavaScript

If you just want to place some text on top of the map div, then you could add a div with absolute positioning. No need to use the API for this.

Example code: https://jsbin.com/mijariy/edit?html,output. Look for the roleInfo div, and the CSS for it.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>rolediv on top of map</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #roleInfo {
      top: 20px;
      left: 100px;
      position: absolute;
      z-index: 99;
      border-radius: 8px;
      border: 2px solid gray;
      color: gray;
      background: white;
      padding: 10px;
      opacity: 0.65;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
  <script src="https://js.arcgis.com/4.3/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65]
      });

    });
  </script>
</head>

<body>
  <div id="roleInfo">Role: <span id="role">TBD</span></div>
  <div id="viewDiv"></div>
</body>
</html>

Related Question

ArcGIS Pro – Displaying Dart (Leader) on Callout Text Symbol in ArcGIS Pro Layout