Improve map zooming!

2 files changed, 11 insertions, 6 deletions

diff --git a/public/common/client.js b/public/common/client.js
index 4a58e47..ad46d99 100644
--- a/public/common/client.js
+++ b/public/common/client.js
@@ -364,14 +364,17 @@ function zoom_map() {
 	let grid = document.querySelector(".grid_center");
 	let mapwrap = document.querySelector(".mapwrap");
 	let map = document.querySelector(".map");
-	map.style.transform = 'none';
-	mapwrap.style.height = 'auto';
+	map.style.transform = null;
+	mapwrap.style.width = null;
+	mapwrap.style.height = null;
 	if (mapwrap.classList.contains("fit")) {
+		let { width: gw, height: gh } = grid.getBoundingClientRect();
 		let { width: ww, height: wh } = mapwrap.getBoundingClientRect();
 		let { width: cw, height: ch } = map.getBoundingClientRect();
-		let scale = ww / cw;
+		let scale = Math.min(ww / cw, gh / ch);
 		if (scale < 1) {
 			map.style.transform = "scale(" + scale + ")";
+			mapwrap.style.width = (cw * scale) + "px";
 			mapwrap.style.height = (ch * scale) + "px";
 		}
 	}
diff --git a/public/common/grid.css b/public/common/grid.css
index 4cedb90..bd06057 100644
--- a/public/common/grid.css
+++ b/public/common/grid.css
@@ -240,14 +240,16 @@ html, body, div {
 	transform: scale(2.0) translate(0,-35px);
 }
 
+.mapwrap {
+	margin: 0 auto;
+}
+
 .mapwrap.fit {
-	overflow: hidden;
+	overflow: clip;
 	max-width: 100%;
 }
 
 .map {
-	margin: 0 auto;
-	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
 	transform-origin: 0 0;
 }