Boxes Example Vector - With jQuery Method

http://openlayers.org/dev/examples/boxes-vector.html

by Mike Gifford

HTML

<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
       <h1 id="title">Boxes Example Vector - With Drupal Method</h1>

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

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

<h1 id="title">AddLayers</h1> 
<div id="map" class="smallmap"></div> 
<div id="info"></div>

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

  <br />
  <p><a href="http://openlayers.org/dev/examples/boxes-vector.html">Original
  OpenLayers Example</a>.</p>

JavaScript

jQuery(document).ready(function($) {

var map;

    //Attach this new method to jQuery
    jQuery.fn.extend({
        //This is where you write your plugin's name
        myMap: function() {
            var box_extents = [
                [-10, 50, 5, 60],
                [-75, 41, -71, 44],
                [-122.6, 37.6, -122.3, 37.9],
                [10, 10, 20, 20]
                ];

            map = new OpenLayers.Map({
                div: jQuery(this).attr('id')
//                ,
//                projection: new OpenLayers.Projection('EPSG:900913'),
//                'displayProjection': new OpenLayers.Projection('EPSG:4326')
            });

            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++) {
                var ext = box_extents[i];
                var bounds = OpenLayers.Bounds.fromArray(ext);
                var 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.zoomToExtent(boxes.getDataExtent());
        }
    });

jQuery('#map').myMap();

});