Merge pull request #35 from yCozz/add-zoom-buttons

Zoom buttons for mobile use

index.html

@@ -219,6 +219,12 @@
         </svg>
         </div>
     </div>
+	
+	<div id="zoom-buttons">
+		<button id="zoom-in">+</button>
+		<button id="zoom-out">-</button>
+	</div>
+	
     <div id="stats" class="orange">
         <div id="zoomLevelDisplay"></div>
         Map v0.5 alpha

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;
 }

style.css

@@ -165,3 +165,28 @@ a:visited{
 .poi{
     font-variation-settings: "wght" 700;
 }
+
+#zoom-buttons {
+    position: absolute;
+    bottom: 80px; /* Position 10px from the bottom */
+    right: 10px;  /* Position 10px from the right */
+    z-index: 1000; /* Ensure it's above the map */
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+#zoom-buttons button {
+    background-color: #ffffff;
+    border: 1px solid #cccccc;
+    border-radius: 5px;
+    padding: 10px 35px;
+    font-size: 40px;
+    font-weight: bold;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#zoom-buttons button:hover {
+    background-color: #f0f0f0;
+}