Draw and Modify Features

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

#### Draw and Modify Features

Geometry type

Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.

Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.

Related API documentation:

- ol.Collection
,
- ol.Map
,
- ol.View
,
- ol.events.condition
,
- ol.interaction.Draw
,
- ol.interaction.Modify
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.OSM
,
- ol.source.Vector
,
- ol.style.Circle
,
- ol.style.Fill
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
Draw and Modify Features Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction. var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ layers: [raster], target: 'map', view: new ol.View({ center: [-11000000, 4600000], zoom: 4 }) }); var features = new ol.Collection(); var featureOverlay = new ol.layer.Vector({ source: new ol.source.Vector({features: features}), 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' }) }) }) }); featureOverlay.setMap(map); var modify = new ol.interaction.Modify({ features: features, // the SHIFT key must be pressed to delete vertices, so // that new vertices can be drawn at the same position // of existing vertices deleteCondition: function(event) { return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event); } }); map.addInteraction(modify); var draw; // global so we can remove it later var typeSelect = document.getElementById('type'); function addInteraction() { draw = new ol.interaction.Draw({ features: features, type: /** @type {ol.geom.GeometryType} */ (typeSelect.value) }); 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>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> </select> </form>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Draw and Modify Features</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>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>
          </select>
        </form>
        <script>
          var raster = new ol.layer.Tile({
            source: new ol.source.OSM()
          });

          var map = new ol.Map({
            layers: [raster],
            target: 'map',
            view: new ol.View({
              center: [-11000000, 4600000],
              zoom: 4
            })
          });

          var features = new ol.Collection();
          var featureOverlay = new ol.layer.Vector({
            source: new ol.source.Vector({features: features}),
            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'
                })
              })
            })
          });
          featureOverlay.setMap(map);

          var modify = new ol.interaction.Modify({
            features: features,
            // the SHIFT key must be pressed to delete vertices, so
            // that new vertices can be drawn at the same position
            // of existing vertices
            deleteCondition: function(event) {
              return ol.events.condition.shiftKeyOnly(event) &&
                  ol.events.condition.singleClick(event);
            }
          });
          map.addInteraction(modify);

          var draw; // global so we can remove it later
          var typeSelect = document.getElementById('type');

          function addInteraction() {
            draw = new ol.interaction.Draw({
              features: features,
              type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
            });
            map.addInteraction(draw);
          }

          /**
           * Handle change event.
           */
          typeSelect.onchange = function() {
            map.removeInteraction(draw);
            addInteraction();
          };

          addInteraction();
        </script>
      </body>
    </html>