diff --git a/index.html b/index.html
index c079a32..91fda02 100644
--- a/index.html
+++ b/index.html
@@ -219,6 +219,12 @@
+
+
Map v0.5 alpha
diff --git a/index.js b/index.js
index 81f3648..491e8a4 100644
--- a/index.js
+++ b/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;
}
diff --git a/style.css b/style.css
index 3cfa957..bc4d395 100644
--- a/style.css
+++ b/style.css
@@ -164,4 +164,29 @@ 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;
}
\ No newline at end of file