OpenLayers 3: getting rid of 'blue dot' selection icon

Question

I am working on a digitizing tool.

There are four buttons as of now:

• add point
• add line
• add polygon
• remove geometry

The user always starts by first drawing some geometries. I am using the Draw interaction (ol.interaction.Draw) and the geometries are added to a Collection (ol.Collection).

So far so good. Now the user might decide to remove some of the drawn geometries by clicking on them.

Here is an example:

When clicked on the 'remove geometry' button, then:

• drawing is removed to deactivate it
• a Select interaction is created (ol.interaction.Select) to select the geometry to remove it
• when a feature is selected its ID is compared to all other features' IDs in a loop, and once the correct ID is found that feature is removed.

The logic works, but it is extremely difficult to delete a point or a line because of the blue dot that is shown when hovering, which makes it nearly impossible to click the geometries.

For example:

The following yellow point would not be removed as the blue dot is in the way:

If I move the cursor a little bit below the dot the feature will be removed:

The line is almost impossible to remove as the blue dot will move with the cursor as the cursor moves along the line:

For the polygon it works fine, as the blue dot is only shown when hovering around the edge of the geometry, but if you ignore that and click anywhere within the fill, the geometry will be removed as well:

How can I change the appearance of that blue dot? I would be OK with discarding it entirely. I have tried to add a style to the Select Interaction but that does not have any effect. It will just add another style on top of the blue dot.

EDIT: a way to solve this, perhaps, would be to look through that blue dot. Is there a way to click/select and see what is behind the blue dot?

Answer 1

You need to define a style that will be used by your select interaction. This is mine for example:

selectedStyle = {
  LineString: new ol.style.Style({
  stroke: new ol.style.Stroke({
      color: 'blue',
      width: 8
  })
  }),
  Polygon: new ol.style.Style({
  stroke: new ol.style.Stroke({
      color: 'blue',
      width: 4
  }),
  fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
  })
  }),
  Point: new ol.style.Style({
  image: new ol.style.RegularShape({
      fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.5)'
      }),
      stroke: new ol.style.Stroke({
          color: 'red',
          width: 1
      }),
      points: 4,
      radius: 8,
      angle: Math.PI / 4
  })
})
}

In order to apply the correct style we need a style function to check the features:

var selectedStyleFunction = function (feature, resolution) {

var featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
    return featureStyleFunction.call(feature, resolution);
} else {
    var type = feature.getGeometry().getType();
    return selectedStyle[type];
 }
}

Once defined, this can be added to the Select interaction object like this:

    session.interactions.select = new ol.interaction.Select({
    style: selectedStyleFunction,
    multi: true
});

I've tried to simplify this from my own code but hopefully haven't made a mistake(!)