Snap Interaction

Example of using the snap interaction together with draw and modify interactions.

Example of using the snap interaction together with draw and modify interactions. The snap interaction must be added last, as it needs to be the first to handle the pointermove event.

<!DOCTYPE html>
<html>
  <head>
    <title>Snap Interaction</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src=""></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <form id="options-form" automplete="off">
      <div class="radio">
        <label>
          <input type="radio" name="interaction" value="draw" id="draw" checked>
          Draw &nbsp;
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="interaction" value="modify">
          Modify &nbsp;
        </label>
      </div>
      <div class="form-group">
        <label>Draw type &nbsp;</label>
        <select name="draw-type" id="draw-type">
          <option value="Point">Point</option>
          <option value="LineString">LineString</option>
          <option value="Polygon">Polygon</option>
          <option value="Circle">Circle</option>
        </select>
      </div>
    </form>
    <script>
      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var vector = new ol.layer.Vector({
        source: new ol.source.Vector(),
        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({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
          center: [-11000000, 4600000],
          zoom: 4
        })
      });

      var Modify = {
        init: function() {
          this.select = new ol.interaction.Select();
          map.addInteraction(this.select);

          this.modify = new ol.interaction.Modify({
            features: this.select.getFeatures()
          });
          map.addInteraction(this.modify);

          this.setEvents();
        },
        setEvents: function() {
          var selectedFeatures = this.select.getFeatures();

          this.select.on('change:active', function() {
            selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
          });
        },
        setActive: function(active) {
          this.select.setActive(active);
          this.modify.setActive(active);
        }
      };
      Modify.init();

      var optionsForm = document.getElementById('options-form');

      var Draw = {
        init: function() {
          map.addInteraction(this.Point);
          this.Point.setActive(false);
          map.addInteraction(this.LineString);
          this.LineString.setActive(false);
          map.addInteraction(this.Polygon);
          this.Polygon.setActive(false);
          map.addInteraction(this.Circle);
          this.Circle.setActive(false);
        },
        Point: new ol.interaction.Draw({
          source: vector.getSource(),
          type: 'Point'
        }),
        LineString: new ol.interaction.Draw({
          source: vector.getSource(),
          type: 'LineString'
        }),
        Polygon: new ol.interaction.Draw({
          source: vector.getSource(),
          type: 'Polygon'
        }),
        Circle: new ol.interaction.Draw({
          source: vector.getSource(),
          type: 'Circle'
        }),
        getActive: function() {
          return this.activeType ? this[this.activeType].getActive() : false;
        },
        setActive: function(active) {
          var type = optionsForm.elements['draw-type'].value;
          if (active) {
            this.activeType && this[this.activeType].setActive(false);
            this[type].setActive(true);
            this.activeType = type;
          } else {
            this.activeType && this[this.activeType].setActive(false);
            this.activeType = null;
          }
        }
      };
      Draw.init();


      /**
       * Let user change the geometry type.
       * @param {Event} e Change event.
       */
      optionsForm.onchange = function(e) {
        var type = e.target.getAttribute('name');
        var value = e.target.value;
        if (type == 'draw-type') {
          Draw.getActive() && Draw.setActive(true);
        } else if (type == 'interaction') {
          if (value == 'modify') {
            Draw.setActive(false);
            Modify.setActive(true);
          } else if (value == 'draw') {
            Draw.setActive(true);
            Modify.setActive(false);
          }
        }
      };

      Draw.setActive(true);
      Modify.setActive(false);

      // The snap interaction must be added after the Modify and Draw interactions
      // in order for its map browser event handlers to be fired first. Its handlers
      // are responsible of doing the snapping.
      var snap = new ol.interaction.Snap({
        source: vector.getSource()
      });
      map.addInteraction(snap);
    </script>
  </body>
</html>