JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map" class="smallmap"></div>
CSS
#map{
width:450px;
height:400px;
}
/* avoid pink tiles */
.olImageLoadError {
background-color: transparent !important;
}
JavaScript
var map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
map.addLayers([wmsLayer,polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
var polygon= new OpenLayers.Control.DrawFeature(polygonLayer,OpenLayers.Handler.Polygon);
map.addControl(polygon);
map.setCenter(new OpenLayers.LonLat(51.020848706522152, 5.2810711885084611), 3);
//activate the control
polygon.activate();
polygonLayer.events.register('featureadded',polygonLayer, onAdded);
function onAdded(ev){
var polygon=ev.feature.geometry;
var bounds=polygon.getBounds();
//now do whatever you want with the bounds
//I'm just alerting it
alert(bounds);
}