feat: add live location

feat: show distance in km

src/pages/index.astro

@@ -12,6 +12,8 @@ import {
 
 import { CalendarIcon } from '@radix-ui/react-icons';
 import { LockClosedIcon } from '@radix-ui/react-icons';
+
+import '../styles/locked-page.css';
 ---
 
 <Layout>
@@ -54,7 +56,9 @@ import { LockClosedIcon } from '@radix-ui/react-icons';
 </Layout>
 
 <script>
-  let map: google.maps.Map;
+  import distance from '../utils/distance';
+
+  let map: google.maps.Map, infoWindow: google.maps.InfoWindow;
   async function initMap(): Promise<void> {
     const { Map } = (await google.maps.importLibrary(
       'maps'
@@ -63,6 +67,88 @@ import { LockClosedIcon } from '@radix-ui/react-icons';
       center: { lat: -34.397, lng: 150.644 },
       zoom: 8,
     });
+
+    infoWindow = new google.maps.InfoWindow();
+
+    const locationButton = document.createElement('button');
+    const locationInfo = document.createElement('button');
+
+    locationButton.textContent = 'Konumuma Git';
+    locationInfo.textContent = 'Mesafe hesaplanıyor...';
+
+    locationButton.classList.add('custom-map-control-button');
+    locationInfo.classList.add('custom-map-control-button');
+
+    map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
+    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(locationInfo);
+
+    setInterval(
+      () =>
+        navigator.geolocation.getCurrentPosition(
+          (position: GeolocationPosition) => {
+            const pos = {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude,
+            };
+
+            const mapPos = map.getCenter();
+
+            const totalDistanceInKM = distance(
+              pos.lat,
+              pos.lng,
+              mapPos?.lat(),
+              mapPos?.lng()
+            );
+
+            locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM.toFixed(
+              0
+            )} km`;
+          },
+          () => {
+            handleLocationError(true, infoWindow, map.getCenter()!);
+          }
+        ),
+      5000
+    );
+
+    locationButton.addEventListener('click', () => {
+      // Try HTML5 geolocation.
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(
+          (position: GeolocationPosition) => {
+            const pos = {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude,
+            };
+
+            // infoWindow.setPosition(pos);
+            // infoWindow.setContent('Location found.');
+            // infoWindow.open(map);
+            map.setCenter(pos);
+          },
+          () => {
+            handleLocationError(true, infoWindow, map.getCenter()!);
+          }
+        );
+      } else {
+        // Browser doesn't support Geolocation
+        handleLocationError(false, infoWindow, map.getCenter()!);
+      }
+    });
+  }
+
+  function handleLocationError(
+    browserHasGeolocation: boolean,
+    infoWindow: google.maps.InfoWindow,
+    pos: google.maps.LatLng
+  ) {
+    infoWindow.setPosition(pos);
+    infoWindow.setContent(
+      browserHasGeolocation
+        ? 'Error: Konumunuz tespit edilemedi.'
+        : 'Error: Tarayıcınız konum tespitini desteklemiyor.'
+    );
+    infoWindow.open(map);
   }
 
   initMap();

src/styles/locked-page.css

@@ -0,0 +1,19 @@
+.custom-map-control-button {
+    background-color: #fff;
+    border: 0;
+    border-radius: 2px;
+    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+    margin: 10px;
+    padding: 0 0.5em;
+    font:
+      400 18px Roboto,
+      Arial,
+      sans-serif;
+    overflow: hidden;
+    height: 40px;
+    cursor: pointer;
+  }
+
+  .custom-map-control-button:hover {
+    background: rgb(235, 235, 235);
+  }

src/utils/distance.js

@@ -0,0 +1,21 @@
+export default function distance(lat1, lon1, lat2, lon2, unit = 'K') {
+    if ((lat1 == lat2) && (lon1 == lon2)) {
+        return 0;
+    }
+    else {
+        var radlat1 = Math.PI * lat1 / 180;
+        var radlat2 = Math.PI * lat2 / 180;
+        var theta = lon1 - lon2;
+        var radtheta = Math.PI * theta / 180;
+        var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
+        if (dist > 1) {
+            dist = 1;
+        }
+        dist = Math.acos(dist);
+        dist = dist * 180 / Math.PI;
+        dist = dist * 60 * 1.1515;
+        if (unit == "K") { dist = dist * 1.609344 }
+        if (unit == "N") { dist = dist * 0.8684 }
+        return dist;
+    }
+}