Full window maps

I like making slippy maps that fill the browser window. Every time I do this, I forget how to do it right. It’s easy to screw up and make a map that causes the window to have a vertical scrollbar, or that doesn’t fill the whole window. Firefox used to have a different CSS model which caused some of my maps to only fill the upper left of the window, like 2 map tiles. Chrome recently changed and now my maps are broken that way in Chrome. Here’s a screenshot of how it looks:

Screen Shot 2014-09-27 at 11.10.06 AM

So how to fix it? The notes below are only testing desktop Chrome 37.0.2062.124 on a Mac. This d3noob block has a full window Leaflet map that works well and is simple. The crux of it is

body { padding: 0; margin: 0; }
html, body, #map { height: 100%; width: 100%; }

  <div id="map"></div>

If you don’t set the margin on the body to 0, then Chrome’s default is an 8 pixel margin on the entire body and you end up with scrollbars because the 100% map now hangs 8 pixels off the window. The padding: 0 may not be necessary; Chrome’s default seems to be no padding on the body already. But it’s harmless and seems like a good idea for a full reset.

It’s also common to see overflow: hidden on the body, to suppress all scrollbars. I think that’s also harmless and even possibly a good idea, but is not strictly necessary. It also causes problems for other full screen webapps that aren’t maps. Logs of Lag has a “natural” height of about 800px. I used to set overflow: hidden to work around a scrollbar bug, but then that broke the case where the window is shorter than 800px and you really do want a scrollbar. Not something that’s likely to come up in a map, but maybe in other full window app contexts.

The height: 100% must be set on all of html, body, map. If it’s not set, then the height calculates to 0 and you end up with nothing displayed. The width: 100% seems unnecessary, you can remove it entirely and it still renders full width. But it seems harmless.

I wasn’t able to reproduce the “show only two tiles” brokenness in my screenshot above in Leaflet with a simple example of a page with just a map div. It may be not possible any more, not sure.

The bug is showing up for me with my Polymaps maps though, even if I set all the widths and heights and stuff as described above. Turns out for Polymaps you also have to set the size of the SVG that you put inside your map div. I did this by hacking in a svg { width: 100%; height: 100%; } in my stylesheet, which obviously only works if you have no other SVG elements on the page. Since Polymaps is long since EOL, there’s not much point trying to figure out anything better.