draw-features.html

---
template: example.html
title: Draw features example
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`
  key. Square drawing is achieved by using Circle mode with a `geometryFunction`
  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 class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
    <form class="form-inline">
      <label>Geometry type &nbsp;</label>
      <select id="type">
        <option value="None">None</option>
        <option value="Point">Point</option>
        <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>
      </select>
    </form>
  </div>
</div>