<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 800px;
height: 475px;
border: 1px solid black;
}
.olControlPanel {
float:right;
right: 0px;
height: 30px;
width: 200px;
}
.olControlPanel div {
float: right;
height: 25px;
margin: 1px;
width: 25px;
}
.olControlPanel .olControlMouseDefaultsItemActive {
background-color: blue;
background-image: url("../img/panning-hand-on.png");
}
.olControlPanel .olControlMouseDefaultsItemInactive {
background-color: orange;
background-image: url("../img/panning-hand-off.png");
}
.olControlPanel .olControlMeasureItemActive {
background-color: blue;
background-image: url("../img/measuring-stick-on.png");
}
.olControlPanel .olControlMeasureItemInactive
{
background-color: orange;
background-image: url("../img/measuring-stick-off.png");
}
</style>
<script src="../lib/Firebug/firebug.js"></script>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map( 'map', { controls: [] } );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
vlayer = new OpenLayers.Layer.Vector( "Editable" );
map.addLayer(vlayer);
map.addControl(new OpenLayers.Control.PanZoomBar());
var measureOptions = {"done": measureDone, "point": measurePoint, "cancel": measureCancel};
var panel = new OpenLayers.Control.Panel();
panel.addControls([
new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path, { 'displayClass': 'olControlMeasure', handlerOptions: measureOptions })
]);
map.addControl(panel);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
function measureDone (line) {
alert("measureDone");
OpenLayers.Console.dir(line);
}
function measurePoint (point) {
alert("measurePoint");
}
function measureCancel (line) {
alert("measureCancel");
}
// -->
</script>
</head>
<body onload="init()">
<div id="panel"></div>
<div id="map"></div>
</body>
</html>