Merge pull request #16 from boriskrasko/markup

Map zoom (buttons)
boriskrasko · Feb 22, 2024 · b1a218b · b1a218b
2 parents a310843 + 25893f0
commit b1a218b
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/main.js b/main.js
@@ -277,10 +277,19 @@ basemaps.querySelectorAll('li').forEach(li => {
 })
 
 function zoom(direction) {
-  const step = 500; 
+  const step = 500;
+  const rect = mapImage.getBoundingClientRect();
+  const mouseX = rect.width / 2;
+  const mouseY = rect.height / 2;
+  const offsetX = mouseX / rect.width;
+  const offsetY = mouseY / rect.height;
   const currentWidth = mapImage.clientWidth;
   const newWidth = direction === 'in' ? currentWidth + step : currentWidth - step;
   mapImage.style.width = `${newWidth}px`;
+
+  const newRect = mapImage.getBoundingClientRect();
+  mapImage.style.left = `${parseFloat(mapImage.style.left) - (newRect.width - rect.width) * offsetX}px`;
+  mapImage.style.top = `${parseFloat(mapImage.style.top) - (newRect.height - rect.height) * offsetY}px`;
 }
 
 document.querySelector('.zoom-in').addEventListener('click', () => {