JSFiddle - React, Tailwind, and code Playground

by wsgrah

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<script src="//openlayers.org/dev/OpenLayers.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid"> <a class="brand" href="http://scholarslab.org">scholarslab.org</a>

        </div>
    </div>
</div>
<div class="container">
    <div class="row">
         <h1>Bounding Box Test</h1>

        <div id="map"></div>
    </div>
</div>

CSS

body {
    padding-top: 60px;
    padding-bottom: 40px;
}
#map {
    height: 350px;
    background-color: #eee;
}
.olControlAttribution {
    bottom: 3px;
    left: 10px;
    line-height: 9px;
    font-size: 9px;
    color: #ccc;
}

JavaScript

(function () {

    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
    OpenLayers.Util.onImageLoadErrorColor = "transparent";
    OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
    
     map = new OpenLayers.Map({
        div: 'map',
         className: 'foo',
        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 box_extents = [
        [-10, 50, 5, 60],
        [-75, 41, -71, 44],
        [-122.6, 37.6, -122.3, 37.9],
        [10, 10, 20, 20]
    ];

    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.addLayer('ol_wms');
    map.addLayer('boxes');
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    var sf = new OpenLayers.Control.SelectFeature(boxes);
    map.addControl(sf);
    sf.activate();
    map.zoomToMaxExtent();

})();