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