Openlayers5 hide features

Question

I have some code to init map with points. Coord of points I get from json and in the end of file I have a filter. I need to hide/show some points on map. How I can do it? setStyle() or change size of image don't work. Any idea?

// coordinates
var coordinatesJson;
function init(paramsFilter) {
  $.getJSON("/wp-content/themes/ukid/mapdata.php",function(data){
    coordinatesJson = data;
    dataReady(paramsFilter);
  });
}
function dataReady(paramsFilter) {
  // coordinates points
  var coordinates = [];
  $.each(coordinatesJson, function (index, value) {
    coordinates[index] = ol.proj.fromLonLat([parseFloat(value['longitude']), parseFloat(value['latitude'])]);
  });
  
  // features points
  var features = [];
  $.each(coordinates, function (index, value) {
    features[index] = new ol.Feature({
      geometry: new ol.geom.Point(value),
      // name: 'Null Island',
      color: 'green',
      type: 'kindergarten',
      size: [32,32]
    });
  });

  $.each(coordinatesJson, function(index, value){
    features[index].values_.name = value['post_title'];
    features[index].values_.post_name = value['post_name'];
    features[index].values_.city = value['city'];
    features[index].values_.area = value['area'];
  });
  
// support for render map
  var source = new ol.source.Vector({
    features: features
  });

  var clusterSource = new ol.source.Cluster({
    distance: 40,
    source: source
  });


// clusters and style of point
  var clusters = new ol.layer.Vector({
    source: clusterSource,
    style: function(feature) {
      var size = feature.get('features').length;
      var color = feature.get('features')[0].get('color');
      var size = feature.get('features')[0].get('size');
      var  style = new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: '/wp-content/themes/ukid/img/kindergarten-icon.png',
          imgSize: size
        })
      });
      return style;
    }
  });
  
// support for render map
  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

// render map
  var map = new ol.Map({
    layers: [raster, clusters],
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([30.5238, 50.45466]),
      zoom: 11
    })
  });

// filter map
  if (paramsFilter) {
    let featuresList = source.forEachFeature(function(callback){
      if (paramsFilter['type']) {
        if (callback['values_']['type'] != paramsFilter['type']) {
          // HOW HIDE MAP POINT ?
        }
      }
      if (paramsFilter['city']) {
        if (callback['values_']['city'] != paramsFilter['city']) {
          // HOW HIDE MAP POINT ?
        }
      }
      if (paramsFilter['area']) {
        if (callback['values_']['area'] != paramsFilter['area']) {
          // HOW HIDE MAP POINT ?
        }
      }
    });
  }
}
init();

Answer 1

Just add certain features to the vector source, so that only they will show. Such as:

source.clear();
features.forEach(function (ftr) {
  if (ftr.get("someProperty")>10) {
    source.addFeature(ftr);
  }
});