Fix zoom when map container is scaled (#5794)

* fix zoom when container is scaled * add map-scaled debug page
Leaflet · Sep 29, 2017 · 899bdd4 · 899bdd4
1 parent 2a324b0
commit 899bdd4
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/debug/map/map-scaled.html b/debug/map/map-scaled.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<style>
+		#map {
+			width: 400px;
+			height: 300px;
+			transform: scale(1.5, 1.5);
+			transform-origin: 0 0;
+		}
+	</style>
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+		var map = L.map('map')
+				.setView([50.5, 30.51], 15)
+				.addLayer(osm);
+	</script>
+</body>
+</html>
diff --git a/src/dom/DomEvent.js b/src/dom/DomEvent.js
@@ -227,9 +227,11 @@ export function getMousePosition(e, container) {
 
 	var rect = container.getBoundingClientRect();
 
+	var scaleX = rect.width / container.offsetWidth || 1;
+	var scaleY = rect.height / container.offsetHeight || 1;
 	return new Point(
-		e.clientX - rect.left - container.clientLeft,
-		e.clientY - rect.top - container.clientTop);
+		e.clientX / scaleX - rect.left - container.clientLeft,
+		e.clientY / scaleY - rect.top - container.clientTop);
 }
 
 // Chrome on Win scrolls double the pixels as in other platforms (see #4538),