<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Regular Polygon Example</title>
<link rel="stylesheet" href="../OpenLayers-2.7/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
p {
width: 512px;
}
#config {
margin-top: 1em;
width: 512px;
position: relative;
height: 8em;
}
#controls {
padding-left: 2em;
margin-left: 0;
width: 12em;
}
#controls li {
padding-top: 0.5em;
list-style: none;
}
#options {
font-size: 1em;
top: 0;
margin-left: 15em;
position: absolute;
}
</style>
<script src="../OpenLayers-2.7/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, polygonControl;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.onClick,
'dblclick': this.onDblclick
}, this.handlerOptions
);
},
onClick: function(evt) {
var rad = 0.2 * map.getExtent().getHeight();
polygonControl.handler.setOptions({radius: rad,angle: 0,sides: 40});
},
onDblclick: function(evt) {
var output = document.getElementById(this.key + "Output");
var msg = "dblclick " + evt.xy;
output.value = output.value + msg + "\n";
}
});
var polyOptions,polygonControl;
var single;
function init(){
map = new OpenLayers.Map('map');
var wmsurl = "http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/OpenExtMap/MyShapeFiles/MyMap.map";
var wmsmdi = new OpenLayers.Layer.MapServer( "Wards", wmsurl, {layer:'Wards'});
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer", {onFeatureInsert: circleAdded});
map.addLayers([wmsmdi, polygonLayer]);
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
var rad = 0.2 * map.getExtent().getHeight();
polyOptions = {sides: 40, radius: rad, angle: 0};
polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.RegularPolygon,
{handlerOptions: polyOptions, featureAdded:circleAdded});
map.addControl(polygonControl);
single = new OpenLayers.Control.Click( {hanlerOptions: {"single": true}} );
map.addControl(single);
single.activate();
// document.getElementById('noneToggle').checked = true;
}
function circleAdded(feature){
alert(feature.id);
}
function selectWards(){
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
<div id="config">
<ul id="controls"><b>Map Controls</b>
<li>
<input type="radio" name="type"
value="none" id="noneToggle"
onclick="polygonControl.deactivate()"
checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type"
value="polygon" id="polygonToggle"
onclick="polygonControl.activate()" />
<label for="polygonToggle">draw polygon</label>
</li>
</ul>
</div>
<p>
<input id="selectWards" type="checkbox"
name="selectWards" onchange="selectWards()" />
<label for="drawCircle">Check to select Wards</label>
</body>
</html>