OpenLayers 6/7: Toggle feature visibility

Question

How can I toggle the visibility of a feature in OpenLayers?

There are similar posts, which answers suggests to change the feature style. However, I have a scenario where the style is unknown, so I can't assign it back when I want to show the feature again. Similar posts:

• OpenLayers toggle feature visibility (Show/hide)
• https://gis.stackexchange.com/questions/270387/show-hide-features-on-layer-in-openlayers

Here is a JSFiddle to make demonstration easier: https://jsfiddle.net/aejko5n6/

It would be great if something like this was possible:

function toggleVisiblity() {
  console.log('button click!');
  
  if(lineFeature.get('hidden')) {
    lineFeature.unset('hidden');
  } else {
    lineFeature.set('hidden', true);
  }
  
  vector.changed();
}

Answer 1

One way to toggle the feature visibility would be to add or remove the feature from the source:

function toggleVisiblity() {
  console.log('button click!');
  let source = vector.getSource();
  if (source.hasFeature(lineFeature)) {
    source.removeFeature(lineFeature)
    console.log("feature removed");
  } else {
    source.addFeature(lineFeature);
    console.log("feature added")
  }
}

proof of concept fiddle

code snippet:

function toggleVisiblity() {
  console.log('button click!');
  let source = vector.getSource();
  if (source.hasFeature(lineFeature)) {
    source.removeFeature(lineFeature)
    console.log("feature removed");
  } else {
    source.addFeature(lineFeature);
    console.log("feature added")
  }
}

var coord1 = [-5707673.76, -3499420.81];
var coord2 = [-6707673.76, -3499420.81];

var lineStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#ffcc33',
    width: 3
  })
});
var styleMarker = new ol.style.Style({
  image: new ol.style.Icon({
    scale: .7,
    anchor: [0.5, 1],
    src: '//raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker.png'
  })
});

var marker1 = new ol.geom.Point(coord1);
var featureMarker1 = new ol.Feature(marker1);
var marker2 = new ol.geom.Point(coord2);
var featureMarker2 = new ol.Feature(marker2);

var line = new ol.geom.LineString([coord1, coord2]);
var lineFeature = new ol.Feature(line);

var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [lineFeature, featureMarker1, featureMarker2]
  }),
  style: [lineStyle, styleMarker]
});

var map = new ol.Map({
  target: 'map',
  layers: [new ol.layer.Tile({
    source: new ol.source.OSM()
  }), vector],
  view: new ol.View({
    center: coord1,
    zoom: 5
  })
});

var translate1 = new ol.interaction.Translate({
  features: new ol.Collection([featureMarker1])
});
var translate2 = new ol.interaction.Translate({
  features: new ol.Collection([featureMarker2])
});
map.addInteraction(translate1);
map.addInteraction(translate2);

var coordMarker1, coordMarker2;
translate1.on('translatestart', function(evt) {
  coordMarker2 = marker2.getCoordinates();
});
translate1.on('translating', function(evt) {
  line.setCoordinates([coordMarker2, evt.coordinate]);
});
translate2.on('translatestart', function(evt) {
  coordMarker1 = marker1.getCoordinates();
});
translate2.on('translating', function(evt) {
  line.setCoordinates([coordMarker1, evt.coordinate]);
});

map.on('pointermove', function(e) {
  if (e.dragging) return;
  var hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

html,
body,
#map {
  width: 100%;
  height: 100%;
  margin: 0;
}

#map {
  position: absolute;
  z-index: 5;
}

#msg {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translate(-50%, 5px);
  background-color: rgba(40, 40, 40, .8);
  padding: 10px;
  color: #eee;
  width: 350px;
  text-align: center;
}

<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
<link rel="stylesheet" type="text/css" href="https://openlayers.org/en/v6.15.1/css/ol.css">

<div id="map" class="map"></div>
<div id="msg" onclick="toggleVisiblity()">Toggle Feature Visibility</div>