debug/tests/custom-panes.html - main - githubmirror/Leaflet

debug/tests/custom-panes.html

65 строк2 KB

Simon Legner

Rename `Map` to `LeafletMap` and keep `Map` as alias (#9892)

11 ноя 2025, 21:28

11 ноя 2025, 21:282e9b617

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Leaflet debug page - Custom Panes</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>
		<style>
			body { max-width: 1200px }
			#mapSvg { width: 500px; height: 500px; margin: 20px }
			#mapCanvas { width: 500px; height: 500px; margin: 20px }
			.left { float: left; text-align: center }
			.right { float: right; text-align: center }
		</style>
		<div class="right">
			<h1>Canvas</h1>
			<div id="mapCanvas"></div>
		</div>
		<div class="left">
			<h1>SVG</h1>
			<div id="mapSvg"></div>
		</div>
		<script type="module">
			import {TileLayer, LeafletMap, Marker, CircleMarker} from 'leaflet';

			function makeMap(container, options) {
				const osm = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18});
				const map = new LeafletMap(container, options)
					.setView([50.5, 30.51], 15)
					.addLayer(osm);

				map.createPane('custom1');
				map.createPane('custom2');
				map.getPane('custom1').style.zIndex = 601;
				map.getPane('custom2').style.zIndex = 701;

				const panes = ['overlayPane', 'custom1', 'custom2'];

				function makeFeatures(i) {
					new Marker([50.505 - i * 0.005, 30.51]).addTo(map);
					new CircleMarker([50.505 - i * 0.005, 30.51], {radius: 30, pane: panes[i]})
						.bindPopup(() => `Pane: ${panes[i]}`)
						.addTo(map);
				}

				for (let i = 0; i < 3; i++) {
					makeFeatures(i);
				}
			}

			makeMap('mapSvg');
			makeMap('mapCanvas', {preferCanvas: true});
		</script>
	</body>
</html>