Respond to Resize

[curran]

When the page resizes, the map should respond accordingly. The width and height passed into the tile layout needs to be recomputed on resize.

Similar to http://bl.ocks.org/curran/3a68b0c81991e2e94b19

[curran]

Hi @irfanalidv , here are some notes on how this might be approached.

Making a visualization respond to resize can be tricky, but it is a common requirement and is well worth learning how to do. What's required is to find all references to width and height, and modify the code such that it can be executed again and again with different sizes.

From the example mentioned above, you can listen for browser resize events like this:

      function redraw(){

        // Extract the width and height that was computed by CSS.
        var width = chartDiv.clientWidth;
        var height = chartDiv.clientHeight;

        // Use the extracted size to set the size of an SVG element.
        svg
          .attr("width", width)
          .attr("height", height);

        // Render the whole visualization.
      }

      // Draw for the first time to initialize.
      redraw();

      // Redraw based on the new size whenever the browser window is resized.
      window.addEventListener("resize", redraw);

In our case, we'll need to modify index.html to introduce a function that is responsible for rendering the visualization, which we can invoke every time the browser resizes.

We already have zoomed, which is pretty close to what we want. It may be useful to make a resize function that only deals with things that use width and height, then at the end of that function invoke zoomed.

To get started, try moving all the things that depend on width and height into a resize function.

As one example, consider this statement:

var tile = d3.tile()
    .size([width, height]);

This can be broken up into two statements, with one going into the resize function:

var tile = d3.tile();
function resize(){
  var width = chartDiv.clientWidth;
  var height = chartDiv.clientHeight;
  tile.size([width, height]);
}

You can similarly break up the following:

var projection = d3.geoMercator()
    .scale((1 << 12) / 2 / Math.PI)
    .translate([width / 2, height / 2]);
...
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
...

Please give it a try, and post intermediate work in a new pull request. Thanks!