<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>OpenLayers - Circle Control</title>
<style type="text/css">
#olmap {
width: 400px;
height: 400px;
}
</style>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="Circle.js"></script>
<script type="text/javascript">
var map, circleControl;
function load() {
map = new OpenLayers.Map('olmap', {'maxResolution': 1.40625/2});
var ol_wms = new OpenLayers.Layer.WMS( "World Map",
"http://labs.metacarta.com/wms-c/Basic.py?", {layers: 'basic', format: 'image/png' } );
map.addLayer(ol_wms);
var vlayer = new OpenLayers.Layer.Vector("Polygon Layer");
map.addLayer(vlayer);
circleControl = new Application.Control.Circle();
map.addControl(circleControl);
circleControl.activate();
circleControl.dragControl.onDrag = function(feature, pixel) {
var centroid = feature.geometry.getCentroid();
$('longitude').value = centroid.x;
$('latitude').value = centroid.y;
};
map.zoomToMaxExtent();
}
function updateCircle() {
circleControl.updateCircle(
new OpenLayers.LonLat($('longitude').value, $('latitude').value),
$('radius').value
);
}
</script>
</head>
<body onload="load()">
<div id="olmap"></div>
<input type="text" id="longitude" name="longitude" value="0" onblur="updateCircle()"/>
<input type="text" id="latitude" name="latitude" value="10" onblur="updateCircle()"/>
<select id="radius" name="radius" onchange="updateCircle()" >
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
<input type="button" value="validate" onclick="updateCircle()" />
</body></html>