Padding Your Stuff

[ReneRubalcava]

Another neat feature that's part of the ArcGIS API for JavaScript 4.0beta1 is this concept of view padding. At first glance, you may be wondering exactly what view padding does.

Here is a sample from the docs that is a good demonstration of what view padding actually does. Looking at this sample you see Liberty Island and a DOM element with some text on the right.

What may not seem obvious is the center of the map was set as the location of Liberty Island, but by setting the view padding, the view will offset the center of the map by that padding amount. Remember, it's the view that controls how the map is drawn. This allows you to add sidebars, footers or headers to your map, but still be able to utilize as much of the map as possible. Think of it almost as a frame around the map where each side can be resized as needed.

Maybe you've done side panels in your application that take up a lot of space, cover up the map in certain situations when they don't need to, or you resize the map to allow the sidebar to fit. Now you have another option to just adjust the padding the of the view to offset this for you.

This also means you can adjust how the map and ui elements to interact when something is updated. Maybe you want to resize the side panel when not in use, so you probably want to adjust the view padding at the same time.

You could do that by adjust the sample above a little bit.

require([
  "esri/Map",
  "esri/views/SceneView",
  "esri/widgets/Search",
  "dojo/on",
  "dojo/domReady!"
], function(
  Map,
  SceneView,
  Search,
  on
) {
  //Create the map
  var map = new Map({
    basemap: "topo"
  });

  //Create the view set the view padding to be 320 px
  var view = new SceneView({
    container: "viewDiv",
    map: map,
    center: [-118, 34],
    zoom: 9,
    padding: {
      right: 320
    }
  });
  
  view.then(function() {
    var searchWidget = new Search({
      view: view
    }, "searchDiv");
    searchWidget.startup();
  });
  
  var resize = document.getElementById("resize");
  on(resize, "click", function() {
    if (view.padding.right === 320) {
      view.padding = { right: 18 };
    } else {
      view.padding = { right: 320 };
    }
  });

  //Using the view.padding to update the css
  var updatePadding = function(padding) {
    var right = padding.right + "px";
    var paddingRight = document.querySelector("#padding").style;
    paddingRight.width = right;
    paddingRight.visibility = "visible";
  };
  
  updatePadding(view.padding);
  
  // watch for view padding updates
  view.watch('padding', function(val) {
    updatePadding(val);
  });
});

In this case, we are watching for a button click and adjusting the view padding, which in turn will resize the side panel. That's not too difficult to accomplish the in the EsriJS beta.

You can view a demo of this application here.

View padding in the current beta release is one of those nice little touches to the API that provides a lot of flexibility to you as a developer. It allows you to get creative with your user-interface and how that impacts your users interaction with the map. So have some fun with it.

For more geodev tips and tricks, check out my blog.