githubmirror/Leaflet

debug/map/scroll.html

45 строк1 KB

Jon Koops

Drop UMD and make ESM the default entrypoint (#8826)

17 мар 2025, 17:59

17 мар 2025, 17:597ac9875

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Leaflet debug page - Scroll</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.js"
				}
			}
		</script>
	</head>
	<body>
		<div style="position: absolute; top: 100px; left: 100px; border: 1px solid green">
			<div style="position: relative; margin-top: 500px; width: 800px; border: 1px solid red; margin-left: 200px">
				<div style="height: 600px; overflow: auto">
					<div id="map" style="width: 600px; height: 1000px; border: 1px solid #ccc"></div>
				</div>
			</div>
		</div>
		<script type="module">
			import {TileLayer, LatLng, Map, Popup} from 'leaflet';

			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
			const osm = new TileLayer(osmUrl, {maxZoom: 18});
			const latlng = new LatLng(50.5, 30.51);

			const map = new Map('map', {center: latlng, zoom: 15, layers: [osm]});

			let s = '';
			for (let i = 0; i < 100; i++) {
				s += 'Test<br>';
			}

			new Popup({maxHeight: 100})
				.setContent(s)
				.setLatLng(latlng)
				.openOn(map);
		</script>
	</body>
</html>