Update the measure example

examples/measure.html

@@ -1,20 +1,24 @@
 ---
 layout: example.html
 title: Measure
-shortdesc: Example of using the ol.interaction.Draw interaction to create a simple measuring application.
+shortdesc: Using a draw interaction to measure lengths and areas.
 docs: >
-  <p><i>NOTE: By default, length and area are calculated using the projected coordinates. This is not accurate for projections like Mercator where the projected meters do not correspond to meters on the ground. To get a standarized measurement across all projections, use the geodesic measures.</i></p>
+  <p>The <code>ol.Sphere.getLength()</code> and <code>ol.Sphere.getArea()</code>
+  functions calculate spherical lengths and areas for geometries.  Lengths are
+  calculated by assuming great circle segments between geometry coordinates.
+  Areas are calculated as if edges of polygons were great circle segments.</p>
+  <p>Note that the <code>geometry.getLength()</code> and <code>geometry.getArea()</code>
+  methods return measures of projected (planar) geometries.  These can be very
+  different than on-the-ground measures in certain situations — in northern
+  and southern latitudes using Web Mercator for example.  For better results,
+  use the functions on <code>ol.Sphere</code>.</p>
 tags: "draw, edit, measure, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
   <label>Measurement type &nbsp;</label>
-    <select id="type">
+  <select id="type">
-      <option value="length">Length (LineString)</option>
+    <option value="length">Length (LineString)</option>
-      <option value="area">Area (Polygon)</option>
+    <option value="area">Area (Polygon)</option>
-    </select>
+  </select>
-    <label class="checkbox">
-      <input type="checkbox" id="geodesic">
-      use geodesic measures
-    </label>
 </form>

examples/measure.js

@@ -8,7 +8,6 @@ goog.require('ol.geom.Polygon');
 goog.require('ol.interaction.Draw');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.proj');
 goog.require('ol.source.OSM');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Circle');
@@ -17,8 +16,6 @@ goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
-var wgs84Sphere = new ol.Sphere(6378137);
-
 var raster = new ol.layer.Tile({
   source: new ol.source.OSM()
 });
@@ -137,7 +134,6 @@ map.getViewport().addEventListener('mouseout', function() {
 });
 
 var typeSelect = document.getElementById('type');
-var geodesicCheckbox = document.getElementById('geodesic');
 
 var draw; // global so we can remove it later
 
@@ -148,19 +144,7 @@ var draw; // global so we can remove it later
  * @return {string} The formatted length.
  */
 var formatLength = function(line) {
-  var length;
+  var length = ol.Sphere.getLength(line);
-  if (geodesicCheckbox.checked) {
-    var coordinates = line.getCoordinates();
-    length = 0;
-    var sourceProj = map.getView().getProjection();
-    for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
-      var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
-      var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
-      length += wgs84Sphere.haversineDistance(c1, c2);
-    }
-  } else {
-    length = Math.round(line.getLength() * 100) / 100;
-  }
   var output;
   if (length > 100) {
     output = (Math.round(length / 1000 * 100) / 100) +
@@ -179,16 +163,7 @@ var formatLength = function(line) {
  * @return {string} Formatted area.
  */
 var formatArea = function(polygon) {
-  var area;
+  var area = ol.Sphere.getArea(polygon);
-  if (geodesicCheckbox.checked) {
-    var sourceProj = map.getView().getProjection();
-    var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
-        sourceProj, 'EPSG:4326'));
-    var coordinates = geom.getLinearRing(0).getCoordinates();
-    area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
-  } else {
-    area = polygon.getArea();
-  }
   var output;
   if (area > 10000) {
     output = (Math.round(area / 1000000 * 100) / 100) +