Still implementing mouse handlers.

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