From cdcf08898f9d553b169adccae36ad74a465a43f3 Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Wed, 17 Jan 2024 09:15:15 +0300
Subject: [PATCH] fix: script is not imported correctly

---
 src/pages/index.astro  | 110 +----------------------------------------
 src/scripts/initMap.js |  94 +++++++++++++++++++++++++++++++++++
 2 files changed, 95 insertions(+), 109 deletions(-)
 create mode 100644 src/scripts/initMap.js

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 957d7c4..9013bc2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -37,113 +37,5 @@ import LocationButton from '@/components/LockedContent';
   </main>
 
   <Button className="w-full">Paylaş</Button>
+  <script src="../scripts/initMap.js"></script>
 </Layout>
-
-<script>
-  // TODO: Move script to a seperate file
-  import L from 'leaflet';
-  import type { LatLngTuple, Marker, LocationEvent, ErrorEvent } from 'leaflet';
-
-  const TARGET_LOCATION: LatLngTuple = [41.01907795861253, 29.01715377829709];
-
-  var map = L.map('map').setView(TARGET_LOCATION, 13);
-
-  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxZoom: 19,
-    attribution:
-      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-  }).addTo(map);
-
-  var targetLocationIcon = L.icon({
-    iconUrl: 'goal.svg',
-    iconSize: [32, 32],
-  });
-
-  L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
-
-  var currentLocationIcon = L.icon({
-    iconUrl: 'blue-dot.png',
-    iconSize: [32, 32],
-  });
-
-  let currentLocationMarker: Marker;
-
-  function onLocationFound(e: LocationEvent) {
-    var radius = e.accuracy;
-
-    if (currentLocationMarker) {
-      currentLocationMarker.setLatLng(e.latlng);
-    } else {
-      currentLocationMarker = L.marker(e.latlng, { icon: currentLocationIcon });
-      currentLocationMarker.addTo(map);
-    }
-  }
-
-  map.on('locationfound', onLocationFound);
-
-  function onLocationError(e: ErrorEvent) {
-    alert(e.message);
-  }
-
-  map.on('locationerror', onLocationError);
-
-  // @ts-expect-error extend object
-  L.Control.GoToCurrentLocation = L.Control.extend({
-    onAdd: function (map: L.Map) {
-      const locationButton = document.createElement('button');
-
-      locationButton.textContent = 'Konumuma Git';
-
-      locationButton.classList.add('custom-map-control-button');
-
-      locationButton.addEventListener('click', () => {
-        map.locate({ setView: true, maxZoom: 16 });
-      });
-
-      return locationButton;
-    },
-
-    onRemove: function (map: L.Map) {
-      // Nothing to do here
-    },
-  });
-
-  // @ts-expect-error extend object
-  L.Control.GoToTargetLocation = L.Control.extend({
-    onAdd: function (map: L.Map) {
-      const locationButton = document.createElement('button');
-
-      locationButton.textContent = 'Hedefe Git';
-
-      locationButton.classList.add('custom-map-control-button');
-
-      locationButton.addEventListener('click', () => {
-        map.setView(TARGET_LOCATION, 16);
-      });
-
-      return locationButton;
-    },
-
-    onRemove: function (map: L.Map) {
-      // Nothing to do here
-    },
-  });
-
-  // @ts-expect-error extend object
-  L.control.currentLocation = function (opts) {
-    // @ts-expect-error extend object
-    return new L.Control.GoToCurrentLocation(opts);
-  };
-
-  // @ts-expect-error extend object
-  L.control.targetLocation = function (opts) {
-    // @ts-expect-error extend object
-    return new L.Control.GoToTargetLocation(opts);
-  };
-
-  // @ts-expect-error extend object
-  L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
-
-  // @ts-expect-error extend object
-  L.control.targetLocation({ position: 'bottomleft' }).addTo(map);
-</script>
diff --git a/src/scripts/initMap.js b/src/scripts/initMap.js
new file mode 100644
index 0000000..d672e43
--- /dev/null
+++ b/src/scripts/initMap.js
@@ -0,0 +1,94 @@
+const TARGET_LOCATION = [41.01907795861253, 29.01715377829709];
+
+var map = L.map('map').setView(TARGET_LOCATION, 13);
+
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution:
+        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+}).addTo(map);
+
+var targetLocationIcon = L.icon({
+    iconUrl: 'goal.svg',
+    iconSize: [32, 32],
+});
+
+L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
+
+var currentLocationIcon = L.icon({
+    iconUrl: 'blue-dot.png',
+    iconSize: [32, 32],
+});
+
+let currentLocationMarker;
+
+function onLocationFound(e) {
+    var radius = e.accuracy;
+
+    if (currentLocationMarker) {
+        currentLocationMarker.setLatLng(e.latlng);
+    } else {
+        currentLocationMarker = L.marker(e.latlng, { icon: currentLocationIcon });
+        currentLocationMarker.addTo(map);
+    }
+}
+
+map.on('locationfound', onLocationFound);
+
+function onLocationError(e) {
+    alert(e.message);
+}
+
+map.on('locationerror', onLocationError);
+
+L.Control.GoToCurrentLocation = L.Control.extend({
+    onAdd: function (map) {
+        const locationButton = document.createElement('button');
+
+        locationButton.textContent = 'Konumuma Git';
+
+        locationButton.classList.add('custom-map-control-button');
+
+        locationButton.addEventListener('click', () => {
+            map.locate({ setView: true, maxZoom: 16 });
+        });
+
+        return locationButton;
+    },
+
+    onRemove: function (map) {
+        // Nothing to do here
+    },
+});
+
+L.Control.GoToTargetLocation = L.Control.extend({
+    onAdd: function (map) {
+        const locationButton = document.createElement('button');
+
+        locationButton.textContent = 'Hedefe Git';
+
+        locationButton.classList.add('custom-map-control-button');
+
+        locationButton.addEventListener('click', () => {
+            map.setView(TARGET_LOCATION, 13);
+        });
+
+        return locationButton;
+    },
+
+    onRemove: function (map) {
+        // Nothing to do here
+    },
+});
+
+L.control.currentLocation = function (opts) {
+    return new L.Control.GoToCurrentLocation(opts);
+};
+
+L.control.targetLocation = function (opts) {
+    return new L.Control.GoToTargetLocation(opts);
+};
+
+L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
+
+L.control.targetLocation({ position: 'bottomleft' }).addTo(map);