1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
4 <link rel="stylesheet" href="style.css" type="text/css" />
5 <style type="text/css">
20 <script src="../lib/OpenLayers.js"></script>
21 <script type="text/javascript">
22 var map, measureControls;
23 OpenLayers.Util.onImageLoadErrorColor = "transparent";
25 map = new OpenLayers.Map('map');
27 var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
28 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
30 map.addLayers([wmsLayer]);
31 map.addControl(new OpenLayers.Control.LayerSwitcher());
32 map.addControl(new OpenLayers.Control.MousePosition());
34 // style the sketch fancy
35 var sketchSymbolizers = {
38 graphicName: "square",
43 strokeColor: "#333333"
48 strokeColor: "#666666",
49 strokeDashstyle: "dash"
54 strokeColor: "#666666",
59 var style = new OpenLayers.Style();
61 new OpenLayers.Rule({symbolizer: sketchSymbolizers})
63 var styleMap = new OpenLayers.StyleMap({"default": style});
66 line: new OpenLayers.Control.Measure(
67 OpenLayers.Handler.Path, {
70 layerOptions: {styleMap: styleMap}
74 polygon: new OpenLayers.Control.Measure(
75 OpenLayers.Handler.Polygon, {
78 layerOptions: {styleMap: styleMap}
85 for(var key in measureControls) {
86 control = measureControls[key];
88 "measure": handleMeasurements,
89 "measurepartial": handleMeasurements
91 map.addControl(control);
94 map.setCenter(new OpenLayers.LonLat(0, 0), 3);
96 document.getElementById('noneToggle').checked = true;
99 function handleMeasurements(event) {
100 var geometry = event.geometry;
101 var units = event.units;
102 var order = event.order;
103 var measure = event.measure;
104 var element = document.getElementById('output');
107 out += "measure: " + measure.toFixed(3) + " " + units;
109 out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
111 element.innerHTML = out;
114 function toggleControl(element) {
115 for(key in measureControls) {
116 var control = measureControls[key];
117 if(element.value == key && element.checked) {
120 control.deactivate();
125 function toggleGeodesic(element) {
126 for(key in measureControls) {
127 var control = measureControls[key];
128 control.geodesic = element.checked;
133 <body onload="init()">
134 <h1 id="title">OpenLayers Measure Example</h1>
136 Demonstrates the measure control to measure distances and areas.
138 <div id="map" class="smallmap"></div>
142 <ul id="controlToggle">
144 <input type="radio" name="type" value="none" id="noneToggle"
145 onclick="toggleControl(this);" checked="checked" />
146 <label for="noneToggle">navigate</label>
149 <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
150 <label for="lineToggle">measure distance</label>
153 <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
154 <label for="polygonToggle">measure area</label>
157 <input type="checkbox" name="geodesic" id="geodesicToggle" onclick="toggleGeodesic(this);" />
158 <label for="geodesicToggle">use geodesic measures</label>
161 <p>Note that the geometries drawn are planar geometries and the
162 metrics returned by the measure control are planar measures by
163 default. If your map is in a geographic projection or you have the
164 appropriate projection definitions to transform your geometries into
165 geographic coordinates, you can set the "geodesic" property of the control
166 to true to calculate geodesic measures instead of planar measures.</p>