githubmirror/Leaflet

debug/map/zoom-remain-centered.html

40 строк1 KB

Mahendra Pratap Singh

Rename TouchZoom handler to PinchZoom (keep TouchZoom as alias for backward compatibility) (#9642)

20 апр 2025, 14:54

20 апр 2025, 14:5407252eb

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Leaflet debug page - Zoom Remain Centered</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 id="map"></div>
		<script type="module">
			import {TileLayer, LatLng, Map, Marker, Control} from 'leaflet';

			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
			const osm = new TileLayer(osmUrl, {minZoom: 14});
			const latlng = new LatLng(51.1788409, -1.82618);

			const map = new Map('map', {
				center: latlng,
				zoom: 15,
				layers: [osm],
				scrollWheelZoom: 'center', // zoom to center regardless where mouse is
				doubleClickZoom: 'center',
				pinchZoom:       'center'
			});

			new Marker(latlng).addTo(map);

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