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 :

And the my code :

map.on('zoomend ', function(e) {
    if (map.getZoom() < 3) {
            'fillOpacity': '0.7'
    } else if (map.getZoom() >= 3) {
            'fillOpacity': '0.0'

1 Answers

Vadim Gremyachev On Best Solutions

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

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


  • 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