on Code

Quickest Way to the Generic Map Site Layout

The typical web mapping site is laid out something like this:

Header, footer, large pane for a map, smaller pane for the verbiage. You’ve seen this a thousand times. If your client is a blabber mouth, you get a right-hand sidebar for verbiage overflow. If your client is left handed, he/she will want to flip the map and side pane around (and no amount of arguing will help - left handed people are notoriously irrational). But that’s basically it. Via some illicit magic (usually JavaScript), the sidebar and map pane size themselves on load and window resize to make the whole thing exactly fill the screen.

This is basically a gut-punch to the HTML/CSS box model and flow. Squint at that image above and tell me what you see.

Yes, that’s right. You see ArcMap. But that’s neither here nor there - in terms of usability it’s not a bad way to go. My point is HTML/CSS don’t naturally want to make a desktop style layout.

I’ve been working on GeoPortal v2 (woot!) whenever I can clear a hole on my desk, and I’ve been looking for the easiest way to make that layout. Most solutions (including what I usually use) involve JavaScript hacks to handle sizing the middle content on page load and window resize. I wanted to make a JavaScript-free version that didn’t include a whole lot of extra DOM objects to do CSS trickery.

Here’s what I came up with. On the good side, there’s zero JavaScript involved. On the bad side, it absolute positions 3 of the 4 content areas. Whenever I absolute position something, I usually rock back in my chair for a minute and try to figure out when exactly it was I became an idiot. But in this case, it’s the simplest, easiest way I can think of to do it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <style>
        body { padding: 0; margin: 0; }
        header { width: 100%; height: 70px; background: cyan; }
        footer { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 20px; background: red; }
        aside { position: absolute; left: 0px; top: 70px; bottom: 20px; width: 300px;  background: green; overflow-x: hidden; overflow-y: auto; }
        #main { position: absolute; top: 70px; left: 300px; right: 0px; bottom: 20px; background: pink; }
        #toolbar { width: 100%; height: 30px; background: yellow;}
        #map { position: absolute; top: 30px; left: 0px; right: 0px; bottom: 0px; background: orange; }
    </style>

    <script src="http://maps.google.com/maps/api/js?v=3.4&amp;sensor=false"></script>
</head>

<body>

    <header>Header</header>
    <div id="main">
      <div id="toolbar">toolbar</div>
      <div id="map">map</div>
    </div>
    <aside>aside</aside>

    <footer style="clear: both">footer</footer>

  <script>

  var myOptions = {
      zoom: 16,
      center: new google.maps.LatLng(35.1859, -80.8274),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
       scaleControl: true,
       maxZoom: 18,
       minZoom: 10
     };

  // Initialize map
     map = new google.maps.Map(document.getElementById("map"), myOptions);
  </script>
</body>
</html>

I tossed a map in there so you get the idea. Essentially the map and sidebar are absolute positioned about 70px from the top and 20px from the bottom. The sidebar is given a width of 300px. The map is given a position of right: 0 and left: 300 (the width of the sidebar).

I can’t say I’m in love with it, but it works. Let me know if you have something better.