debug/map/controls.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Leaflet debug page - Control</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
		<link rel="stylesheet" href="../../dist/leaflet.css" />
		<link rel="stylesheet" href="../css/screen.css" />
		<script type="importmap">
			{
				"imports": {
					"leaflet": "../../dist/leaflet-src.esm.js"
				}
			}
		</script>
	</head>
	<body>
		<div id="map"></div>
		<script type="module">
			import {TileLayer, Map, Marker, LatLng, Control} from 'leaflet';

			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
			const osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
			const osm = new TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
			const osm2 = new TileLayer(osmUrl, {attribution: 'Hello world'});

			const map = new Map('map').addLayer(osm).setView(new LatLng(50.5, 30.512), 15);

			const marker = new Marker(new LatLng(50.5, 30.505));
			map.addLayer(marker);
			marker.bindPopup('Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of modern browser features while still being accessible on older ones.').openPopup();

			const marker2 = new Marker(new LatLng(50.502, 30.515));
			map.addLayer(marker2);

			const layersControl = new Control.Layers({
				'OSM': osm,
				'OSM2': osm2
			}, {
				'Some marker': marker,
				'Another marker': marker2
			});

			map.addControl(layersControl);
			map.addControl(new Control.Scale());
		</script>
	</body>
</html>