<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>measure.html</title>
<style type="text/css">
#map {
width: 800px;
height: 600px;
border: 1px solid gray;
}
#controlToggle li {
list-style: none;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var map, drawControls, select, measureControl;
wkt = new OpenLayers.Format.WKT();
function selectionAction(geometry) {
var str = wkt.write(geometry);
str = str.replace(/,/g, ', ');
measureControl.showDistance(geometry);
} //function selectionAction...
var options = {
hover: false,
onSelect: selectionAction
};
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
measureControl = new OpenLayers.Control.Measure();
map.addLayers([wmsLayer, polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(measureControl);
drawControls = {
line: new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Path),
select: new OpenLayers.Control.SelectFeature(polygonLayer, options),
hover: new OpenLayers.Control.SelectFeature(polygonLayer,
{hover: true})
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
}
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
// -->
</script>
</head>
<body onload="init()">
<h1>OpenLayers Draw Feature Example</h1>
<div id="map"></div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="line" id="lineToggle"
onclick="toggleControl(this);" />
<label for="lineToggle">line</label>
</li>
<li>
<input type="radio" name="type" value="select" id="selectToggle"
onclick="toggleControl(this);" />
<label for="selectToggle">select feature on click</label>
</li>
</ul>
</body>
</html>