From 2b1066fd5b576c941847360a53c16e224a5b067c Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Tue, 6 Sep 2022 23:46:08 +0200
Subject: [PATCH] Still implementing mouse handlers.

---
 src/components/map.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/map.tsx b/src/components/map.tsx
index bf9ad98..165ecad 100644
--- a/src/components/map.tsx
+++ b/src/components/map.tsx
@@ -27,6 +27,15 @@ const lat2tile = (lat: number, zoom: number) => {
   return [floor, real - floor];
 };
 
+function tile2long(x: number, z: number) {
+  return (x / Math.pow(2, z)) * 360 - 180;
+}
+
+function tile2lat(y: number, z: number) {
+  var n = Math.PI - (2 * Math.PI * y) / Math.pow(2, z);
+  return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
+}
+
 const Map: react.FC = () => {
   console.log('Log - Rendering <Map />');
 
@@ -93,6 +102,15 @@ const Map: react.FC = () => {
   const mouseUpHandler = (event: any) => {
     event.preventDefault();
     console.log('Log - Up, now do something ! ');
+    const newCenterY =
+      tileCenterY +
+      reminderY +
+      (deltaX + mouseState.current.starting.x - event.pageX);
+    const newCenterX =
+      tileCenterX +
+      reminderX +
+      (deltaY + mouseState.current.starting.y - event.pageY);
+    setCenter([tile2lat(newCenterY, zoom), tile2long(newCenterX, zoom)]);
     mouseState.current = initialMouseState;
     genericHandler(event);
   };