Divide the draw features example into two examples

examples/draw-features.html

@@ -5,11 +5,8 @@ shortdesc: Example of using the ol.interaction.Draw interaction.
 docs: >
   Example of using the Draw interaction. Select a geometry type from the
   dropdown above to start drawing. To finish drawing, click the last
-  point. To activate freehand drawing for lines and polygons, hold the `Shift`
+  point. To activate freehand drawing for lines, polygons, and circles, hold
-  key. Square drawing is achieved by using Circle mode with a `geometryFunction`
+  the `Shift` key.
-  that creates a 4-sided regular polygon instead of a circle. Box drawing uses a
-  custom `geometryFunction` that takes start and end point of a line with 2
-  points and creates a rectangular box.
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
@@ -20,8 +17,6 @@ tags: "draw, edit, freehand, vector"
     <option value="LineString">LineString</option>
     <option value="Polygon">Polygon</option>
     <option value="Circle">Circle</option>
-    <option value="Square">Square</option>
-    <option value="Box">Box</option>
     <option value="None">None</option>
   </select>
 </form>

examples/draw-features.js

@@ -5,10 +5,6 @@ goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.OSM');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Circle');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
 
 var raster = new ol.layer.Tile({
   source: new ol.source.OSM()
@@ -17,22 +13,7 @@ var raster = new ol.layer.Tile({
 var source = new ol.source.Vector({wrapX: false});
 
 var vector = new ol.layer.Vector({
-  source: source,
+  source: source
-  style: new ol.style.Style({
-    fill: new ol.style.Fill({
-      color: 'rgba(255, 255, 255, 0.2)'
-    }),
-    stroke: new ol.style.Stroke({
-      color: '#ffcc33',
-      width: 2
-    }),
-    image: new ol.style.Circle({
-      radius: 7,
-      fill: new ol.style.Fill({
-        color: '#ffcc33'
-      })
-    })
-  })
 });
 
 var map = new ol.Map({
@@ -50,18 +31,9 @@ var draw; // global so we can remove it later
 function addInteraction() {
   var value = typeSelect.value;
   if (value !== 'None') {
-    var geometryFunction;
-    if (value === 'Square') {
-      value = 'Circle';
-      geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
-    } else if (value === 'Box') {
-      value = 'Circle';
-      geometryFunction = ol.interaction.Draw.createBox();
-    }
     draw = new ol.interaction.Draw({
       source: source,
-      type: /** @type {ol.geom.GeometryType} */ (value),
+      type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
-      geometryFunction: geometryFunction
     });
     map.addInteraction(draw);
   }

examples/draw-shapes.html

@@ -0,0 +1,25 @@
+---
+layout: example.html
+title: Draw Shapes
+shortdesc: Using the ol.interaction.Draw to create regular shapes
+docs: >
+  This demonstrates the use of the `geometryFunction` option for the
+  `ol.interaction.Draw`. Select a shape type from the dropdown above to start
+  drawing. To activate freehand drawing, hold the `Shift` key. Square drawing is
+  achieved by using `type: 'Circle'` type with a `geometryFunction` that creates
+  a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'`
+  with a `geometryFunction` that creates a box-shaped polygon instead of a
+  circle.  Star drawing uses a custom geometry function that coverts a circle
+  into a start using the center and radius provided by the draw interaction.
+tags: "draw, edit, freehand, vector"
+---
+<div id="map" class="map"></div>
+<form class="form-inline">
+  <label>Shape type &nbsp;</label>
+  <select id="type">
+    <option value="Square">Square</option>
+    <option value="Box">Box</option>
+    <option value="Star">Star</option>
+    <option value="None">None</option>
+  </select>
+</form>

examples/draw-shapes.js

@@ -0,0 +1,86 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.Polygon');
+goog.require('ol.interaction.Draw');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.OSM');
+goog.require('ol.source.Vector');
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.OSM()
+});
+
+var source = new ol.source.Vector({wrapX: false});
+
+var vector = new ol.layer.Vector({
+  source: source
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new ol.View({
+    center: [-11000000, 4600000],
+    zoom: 4
+  })
+});
+
+var typeSelect = document.getElementById('type');
+
+var draw; // global so we can remove it later
+function addInteraction() {
+  var value = typeSelect.value;
+  if (value !== 'None') {
+    var geometryFunction;
+    if (value === 'Square') {
+      value = 'Circle';
+      geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
+    } else if (value === 'Box') {
+      value = 'Circle';
+      geometryFunction = ol.interaction.Draw.createBox();
+    } else if (value === 'Star') {
+      value = 'Circle';
+      geometryFunction = function(coordinates, geometry) {
+        if (!geometry) {
+          geometry = new ol.geom.Polygon(null);
+        }
+        var center = coordinates[0];
+        var last = coordinates[1];
+        var dx = center[0] - last[0];
+        var dy = center[1] - last[1];
+        var radius = Math.sqrt(dx * dx + dy * dy);
+        var rotation = Math.atan2(dy, dx);
+        var newCoordinates = [];
+        var numPoints = 12;
+        for (var i = 0; i < numPoints; ++i) {
+          var angle = rotation + i * 2 * Math.PI / numPoints;
+          var fraction = i % 2 === 0 ? 1 : 0.5;
+          var offsetX = radius * fraction * Math.cos(angle);
+          var offsetY = radius * fraction * Math.sin(angle);
+          newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
+        }
+        newCoordinates.push(newCoordinates[0].slice());
+        geometry.setCoordinates([newCoordinates]);
+        return geometry;
+      };
+    }
+    draw = new ol.interaction.Draw({
+      source: source,
+      type: /** @type {ol.geom.GeometryType} */ (value),
+      geometryFunction: geometryFunction
+    });
+    map.addInteraction(draw);
+  }
+}
+
+
+/**
+ * Handle change event.
+ */
+typeSelect.onchange = function() {
+  map.removeInteraction(draw);
+  addInteraction();
+};
+
+addInteraction();