openlayers/examples/draw-features.html

Build tools and sources for developing OpenLayers based mapping applications

---
layout: example.html
title: Draw Features
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 id="map" class="map"></div>
<form class="form-inline">
  <label>Geometry type &nbsp;</label>
  <select id="type">
    <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>
    <option value="None">None</option>
  </select>
</form>