[GIS] Openlayers 4 unselect a feature

openlayers

How can I unselect a feature in custom hyperlink onclick?

Basically I have select interaction that changes style of a marker and after I click anywhere on the map, then feature is unselected (goes back to default style). This part works just fine.

Now I have hyperlink "button" which closes overlay and should also perform unselection for selected feature. Unfortunately I can't really find a way to do this.

I have tried to attach selected feature to close button and setStyle to null, but no avail. Also tried to set default style on the marker, but then marker won't change when clicked on it again.

Example can be found at
http://jsfiddle.net/c3o6fy7g/5/

Explanation: red marker should change to pink and overlay is supposed to appear. Clicking on "x" closes overlay and should do unselect on the feature, after which marker should change back to green.

"x" button functionality is given at line 18 aka "closer.onclick = function() {"

Best Answer

You can simply add the following line within your closer click event:

select.getFeatures().clear();

select.getFeatures() will return the currently selected feature(s), and clear() will remove them from the selection.

Related Solutions

[GIS] How unselect a feature ithat select with OpenLayers-3.8.2’s selectInteraction

On ol3 3.11.2, the event.selected.clear(); does not exist, so you need to use the selectionInteraction.getFeatures().clear();

[GIS] OpenLayers 3: getting rid of ‘blue dot’ selection icon

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(!)

Best Answer

Related Solutions

[GIS] How unselect a feature ithat select with OpenLayers-3.8.2’s selectInteraction

[GIS] OpenLayers 3: getting rid of ‘blue dot’ selection icon

Related Question