Display Polygons Layers according to zoom level of the map and clicks

Question

So I have an OpenStreetMap map(with Leaflet), and I put a Europe javascript layer (I inserted Id in the javascript to differentiate every countries). Each country highlight when I do a hover on it with my mouse. When I click on a country, it automatically zoom on it.

And I would like, that, when I click on the country, the layer of the country disappear (according to the zoom level) (but the other countries have to stay "layered". (knowing that, after that, I will try to put markers on a country that will display only if the country layer disappears, and where we can zoom on it by clicking on it).

Ps: I followed this website to do what I have at this moment : https://leafletjs.com/examples/choropleth/

And the my code : https://jsfiddle.net/Gio687351/3bwsnu8z/2/

map.on('zoomend ', function(e) {
    if (map.getZoom() < 3) {
        map.fitBounds(layer.getBounds())
        map.removeLayer(Europe-Layer.js)
        map.setStyle({
            'fillOpacity': '0.7'
        });
    } else if (map.getZoom() >= 3) {
        map.fitBounds(layer.getBounds())
        map.addLayer(statesData);
        map.setStyle({
            'fillOpacity': '0.0'
        });
    }
}); 

Answer 1

Layer visibility could be managed via fill-opacity and opacity style properties as demonstrated below:

function toggleLayerVisibility(map, layer) {
  if (selectedLayerId) {
    geojson.resetStyle(layer);
    selectedLayerId = null;
  } else {
    //hide a layer
    layer.setStyle({
      opacity: 0,
      fillOpacity: 0.0
    });
    selectedLayerId = layer._leaflet_id; //save identifier of a selected layer
  }
}

Explanation:

• setting opacity: 0 and fillOpacity: 0 hides the layer
• selectedLayerId is used to store the identifier of currently selected layer

Given the provided example, the following demo demonstrates how to hide a clicked layer