html

Our geospatial plugin's only widget is a geographic map that you can create on any div with a computable width and height.

<div style="width: 640px; height: 480px;"></div>

If the div is not already in relative, absolute or fixed position, the widget will force relative positioning.

fullscreen

The div size does not have to be so specific.

<div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0;"></div>

As in the above example, you can have the map fill the window by setting position to either absolute or fixed and the top, right, bottom and left properties to all zero. The map will follow the size of the window and recenter when the size of the window changes.

Fixed position is preferred because it will not create scroll bars when making the window smaller. However, keep in mind that fixed position is not supported by IE6 and can be odd on some mobile browsers. If you do use absolute position, you can set the overflow style property on the body element to hidden and avoid scroll bars.

<body style="overflow: hidden;">
  <div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"></div>
</body>

box model

The map supports divs that have padding, borders and margins. The plugin will create the map where text would normally go in such a situation, i.e., the map content will be inset from the border by the padding amount.

<style>
  #map {
    width: 90%;
    max-width: 640px;
    height: 480px;
    padding: 8px;
    border: solid 3px #444;
    margin: .5em;
    background: #ddf;
  }
</style>
<div id="map">O HAI</div>
O HAI

inner elements

Any elements inside the map div can be absolutely positioned and will not interfere with map operation. Map images will appear beneath them. This is useful if you want to layout a scale bar for example.

<style>
  #bar {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 16px;
    background: red;
    opacity: .8;
    border-radius: 8px;
    text-align: center;
    font-size: 10px;
  }
  #bar div {
    width: 96px;
    height: 2px;
    margin-bottom: 8px;
    background: #444;
    color: #444;
  }
</style>
<div id="map"><div id="bar"><div></div><span>1134 meters</span></div></div>
1134 meters

This rather large scale bar will not interfere with a user trying to pan the map. Ignore the scale bar value in this example, it's static text.

mobile

The geomap widget works on modern mobile browsers without any additional JavaScript. However, some web design is necessary. For starters, as with any mobile development you should add a viewport meta tag into your head element. This should appear above most other tags so the mobile browser can get ready for a mobile page before doing any other work.

<meta name="viewport" content="width=device-width, minimum-scale=1">

For a fullscreen map, you can also add a maximum-scale attribute.

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

If you have done any other mobile web developement, you're probably frowning at my decision to disable the default zoom capability of the device's web browser. If you haven't done much with mobile, I am disabling double-tap to zoom a page by setting the min and max scale to 1.

In almost all other cases, I would agree that disabling browser zoom is a bad user experience, however for a full-screen mapping application, double-tap has a whole new meaning and users expect it to zoom the map itself, not the page. It is in this case only that I suggest you disable browser page zoom. If you are targeting modern mobile browsers such as iOS, Android, Windows Phone 7 or Opera Mobile, you can used fixed positioning and the HTML for the full screen mobile app would look like the first fullscreen example:

<div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0;"></div>

Other mobile browsers are currently untested.