Draw Shapes

This example uses OpenLayers v4.0.1. The latest is v.

#### Draw Shapes

Shape type

Using the ol.interaction.Draw to create regular shapes

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.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.geom.Polygon
,
- ol.interaction.Draw
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.OSM
,
- ol.source.Vector

Copy Edit
Draw Shapes Using the ol.interaction.Draw to create regular shapes 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(); <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>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Draw Shapes</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <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>
        <script>
          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();
        </script>
      </body>
    </html>