Boxes Example Vector

Demonstrate marker and box type annotations on a map.

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
       <h1 id="title">Boxes Example Vector</h1>

        <div id="tags">
            box, vector, annotation, light
        </div>

        <p id="shortdesc">
            Demonstrate marker and box type annotations on a map.
        </p>
        
        <div id="map" class="smallmap"></div>

        <div id="docs"></div>

CSS

/**
 * CSS Reset
 * From Blueprint reset.css
 * http://blueprintcss.googlecode.com
 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/**
 * Basic Typography
 */
body {
    font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #222;
    background: #fff;
    margin: 1em 1.5em;
}
pre, code {
    margin: 1.5em 0;
    white-space: pre;
}
pre, code {
    font: 1em 'andale mono', 'lucida console', monospace;
    line-height:1.5;
}
a[href] {
    color: #436976;
    background-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
    color: #003a6b;
    background-color: transparent;
    font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    margin: 0;
    padding-top: 0.5em;
}
h1 {
    font-size: 130%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #fcb100;
}
h2 {
    font-size: 120%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #aaa;
}
h3 {
    font-size: 110%;
    margin-bottom: 0.5em;
    text-decoration: underline;
}
h4 {
    font-size: 100%;
    font-weight: bold;
}
h5 {
    font-size: 100%;
    font-weight: bold;
}
h6 {
    font-size: 80%;
    font-weight: bold;
}

.olControlAttribution {
    bottom: 5px;
}



/**
 * Map Examples Specific
 */
.smallmap {
    width: 512px;
    height: 256px;
    border: 1px solid #ccc;
}
#tags {
    display: none;
}

#docs p {
   ...

JavaScript

(function($) {

    var box_extents = [
        [-10, 50, 5, 60],
        [-75, 41, -71, 44],
        [-122.6, 37.6, -122.3, 37.9],
        [10, 10, 20, 20]
        ];
    var map;

    (function init() {
        map = new OpenLayers.Map('map');

        var ol_wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {
            layers: 'basic'
        });

        var boxes = new OpenLayers.Layer.Vector("Boxes");
        var i;

        for (i = 0; i < box_extents.length; i++) {
            ext = box_extents[i];
            bounds = OpenLayers.Bounds.fromArray(ext);

            box = new OpenLayers.Feature.Vector(bounds.toGeometry());
            boxes.addFeatures(box);
        }

        map.addLayers([ol_wms, boxes]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        var sf = new OpenLayers.Control.SelectFeature(boxes);
        map.addControl(sf);
        sf.activate();
        map.zoomToMaxExtent();
    })();

})(jQuery);