I am experimenting with openlayers. I am adding points to the map using this example. However, I also want to delete unwanted points from the map. For example, I clicked 6 points on the map and I want to remove the fifth point, but keep 1, 2, 3, 4, and 6 th point on the map. How can I do this in openLayers. So far, I tried this example and this example, but I had no luck so far. Please help me out.

Update: I have the following JsFiddle shows the code to add points to my map. I want to remove one point, but keep the rest of them on the map.

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'

  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) &&

  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)

   * Handle change event.
  typeSelect.onchange = function() {


Update 2: I can remove the last element using removeLastPoint() inside ol.interaction.Draw.


2 Answers 2


The third example you linked to covers this pretty nicely I think.

You need to add another interaction - a select interaction - to allow selection of a feature when it's clicked. Something like the following -

var selectInteraction = new ol.interaction.Select();

Then you need to add some kind of event (like the user clicking a "Delete" button). In the handler for that event, you can use the following code to delete the feature:

//Get the feature that's selected
var selectedFeature = selectInteraction.getFeatures().item(0);
//Remove it from your feature source

We can create a new variable as sourceVector.
var sourceVector = new ol.source.Vector({features: features})

Then on this line source: new ol.source.Vector({features: features}),

change it to source: sourceVector,

So now if you use sourceVector.removeFeature(sourceVector.getFeatures()[4]); it would remove the fifth point in the array.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.