overlays group leaflet

by tomik23

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
 <div id="map"></div>

CSS

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

#map {
  width: 100%;
  height: 100%;
}

JavaScript

let zoom = 6;
let lat = 52.2297700;
let lon = 21.0117800;

let citiesA = L.layerGroup();
let citiesB = L.layerGroup();
let allCity = L.layerGroup();

L.marker([52.435920583590125, 21.42333984375]).bindPopup('1').addTo(citiesA),
  L.marker([52.1267438596429, 21.42333984375]).bindPopup('1').addTo(citiesA),
  L.marker([52.03897658307622, 20.950927734375004]).bindPopup('1').addTo(citiesA),
  L.marker([52.328625488430184, 20.753173828125004]).bindPopup('1').addTo(citiesA),
  L.marker([52.48947038534306, 20.928955078125004]).bindPopup('1').addTo(citiesA);

L.marker([51.19999983412071, 17.215576171875004]).bindPopup('1').addTo(citiesB),
  L.marker([50.98609893339354, 17.468261718750004]).bindPopup('1').addTo(citiesB),
  L.marker([50.84063582806037, 17.149658203125004]).bindPopup('1').addTo(citiesB),
  L.marker([50.972264889367494, 16.743164062500004]).bindPopup('1').addTo(citiesB),
  L.marker([51.337475662965225, 16.907958984375004]).bindPopup('1').addTo(citiesB);


let map = L.map('map', {
  minZoom: 0,
  maxZoom: 18,
  layers: [citiesA]
}).setView([lat, lon], zoom);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

let overlays = {
  Warszawa: citiesA,
  Wrocław: citiesB,
  'Wszystkie miasta': allCity
};

overlays['Wszystkie miasta'].on('add', function() {
  setTimeout(function() {
    for (let overlay in overlays) {
      overlays[overlay].addTo(map);
    }
  }, 0);
});

overlays['Wszystkie miasta'].on('remove', function () {
  setTimeout(function () {
    for (let overlay in overlays) {
      map.removeLayer(overlays[overlay]);
    }
  }, 0);
});


let control = L.control.layers(null, overlays).addTo(map);