Added zoom buttons for mobile friendly use, increased zoom speed to ease the feel of zooming in

index.js

@@ -11,7 +11,7 @@ const bezierGradeResolution = 80;
 const bezierLengthResolution = 80;
 const bezierCurvatureResolution = 80;
 const padding = 500;
-const zoomFactor = 1.1;
+const zoomFactor = 1.5;
 const trackWidth = {
     base: 110,
     min: 3,
@@ -160,6 +160,7 @@ function mapScrollSetup(){
         }else if(touchCount == 2){
             getTouchAverage();
             zoomAtPosition(touchCenter_x, touchCenter_y, (previousScale * getTouchDistance()/pinchDistance)/mapNav.scale);
+			
         }
         touchCache[e.pointerId].x = e.clientX;
         touchCache[e.pointerId].y = e.clientY;
@@ -228,11 +229,29 @@ function mapScrollSetup(){
         mapNav.y = zoomCursorLocal_y - scaleFactor * (zoomCursorLocal_y-mapNav.y);
         mapNav.scale *= scaleFactor;
     }
+	
+	window.zoomAtPosition = zoomAtPosition;
+	
     map_container.addEventListener('pointerdown', touchDownHandler);
     map_container.addEventListener('wheel', scrollHandler);
     navUpdate();
 }
 
+document.getElementById('zoom-in').addEventListener('click', () => {
+    const centerX = map_container.offsetWidth / 2;
+    const centerY = map_container.offsetHeight / 2;
+    zoomAtPosition(centerX, centerY, zoomFactor); // Use zoomFactor from config.js
+    updateMapview();
+});
+
+document.getElementById('zoom-out').addEventListener('click', () => {
+    const centerX = map_container.offsetWidth / 2;
+    const centerY = map_container.offsetHeight / 2;
+    zoomAtPosition(centerX, centerY, 1 / zoomFactor); // Use zoomFactor from config.js
+    updateMapview();
+});
+
+
 /** Readjust map view to focus on position */
 function updateMapview(){
     if(mapNav == null) return;
@@ -261,6 +280,8 @@ function updateMapview(){
     }
 }
 
+
+
 function forceRedraw(){
     redrawTriggerElement.style.backgroundColor = Color.random().hex;
 }