OpenLayers

by Mike Gifford

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<body onload="init()">
     <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>
</body>

JavaScript

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");

                for (var 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();
            }