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: '© <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);
<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>
html, body { height: 100%; margin: 0; } #map { width: 100%; height: 100%; }