reefactor: initSelectionMap

src/components/Leaflet/constants.ts

@@ -0,0 +1,10 @@
+import L from "leaflet"
+
+export const openstreetmapTiles = L.tileLayer(
+  "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+  {
+    maxZoom: 19,
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  }
+)

src/components/Leaflet/geolocation.ts

@@ -0,0 +1,18 @@
+import L from "leaflet"
+
+function updateMarkerLocation(
+  marker: L.Marker,
+  icon: L.Icon,
+  position: L.LatLng,
+  map: L.Map
+) {
+  if (marker) {
+    marker.setLatLng(position)
+  } else {
+    marker = L.marker(position, { icon })
+    marker.addTo(map)
+  }
+
+  return marker
+}
+export { updateMarkerLocation }

src/components/Leaflet/icons.ts

@@ -0,0 +1,13 @@
+import L from "leaflet"
+
+var targetLocationIcon = L.icon({
+  iconUrl: "goal.svg",
+  iconSize: [32, 32],
+})
+
+var currentLocationIcon = L.icon({
+  iconUrl: "blue-dot.png",
+  iconSize: [32, 32],
+})
+
+export { targetLocationIcon, currentLocationIcon }

src/components/LockedContent/domUtils.ts

@@ -6,6 +6,12 @@ function updateText(elemId: string, text: string) {
   else console.error("Element could not be found!")
 }
 
+function updateInputValue(elemId: string, value: string) {
+  const elem = document.getElementById(elemId) as HTMLInputElement
+  if (elem) elem.value = value
+  else console.error("Element could not be found!")
+}
+
 function toggleClass(elemId: string, className: string) {
   const elem = document.getElementById(elemId)
   if (elem) elem.classList.toggle(className)
@@ -48,6 +54,7 @@ export {
   removeElement,
   toggleClass,
   updateText,
+  updateInputValue,
   revealContent,
   addAttribute,
 }

src/components/LockedContent/geolocation.ts

@@ -16,6 +16,7 @@ function locationSuccessCallback(
   position: GeolocationPosition,
   targetPosition: LatLngTuple
 ) {
+  // Enable current location control
   removeClasses("current-location-control", "disabled-button")
   const newPosition = position.coords
 

src/scripts/initSelectionMap.js

@@ -1,111 +0,0 @@
-import { onLocationError } from "@/lib/error"
-import { toast } from "@/lib/utils"
-
-var map = L.map("map").setView([41.024857599001905, 28.940787550837882], 10)
-
-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)
-
-let targetLocationMarker
-
-let targetLocationCircle
-
-var targetLocationIcon = L.icon({
-  iconUrl: "goal.svg",
-  iconSize: [32, 32],
-})
-
-var currentLocationIcon = L.icon({
-  iconUrl: "blue-dot.png",
-  iconSize: [32, 32],
-})
-
-let currentLocationMarker
-
-function startWatchingLocation() {
-  map.locate({ watch: true })
-}
-
-function onLocationSuccess(locationEvent) {
-  const position = locationEvent.latlng
-
-  const currentPos = {
-    lat: position.lat,
-    lng: position.lng,
-  }
-
-  if (currentLocationMarker) {
-    currentLocationMarker.setLatLng(currentPos)
-  } else {
-    currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon })
-    currentLocationMarker.addTo(map)
-  }
-}
-
-map.on("locationerror", onLocationError)
-
-map.on("locationfound", onLocationSuccess)
-
-L.Control.AskPermisson = L.Control.extend({
-  onAdd: function (map) {
-    const locationButton = document.createElement("button")
-
-    locationButton.textContent = "Konum İzni Ver"
-
-    locationButton.classList.add("custom-map-control-button")
-
-    locationButton.type = "button"
-
-    locationButton.addEventListener("click", (ev) => {
-      if (locationButton.textContent != "Konumuma Git") {
-        startWatchingLocation()
-        locationButton.textContent = "Konumuma Git"
-      } else {
-        if (currentLocationMarker) {
-          map.setView(currentLocationMarker.getLatLng(), 12)
-        } else {
-          toast(
-            "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin."
-          )
-        }
-      }
-      L.DomEvent.stopPropagation(ev)
-    })
-
-    return locationButton
-  },
-})
-
-L.control.askPermission = function (opts) {
-  return new L.Control.AskPermisson(opts)
-}
-
-L.control.askPermission({ position: "bottomleft" }).addTo(map)
-
-map.on("click", (e) => {
-  if (targetLocationMarker) {
-    targetLocationMarker.setLatLng(e.latlng)
-    targetLocationCircle.setLatLng(e.latlng)
-  } else {
-    targetLocationMarker = L.marker(e.latlng, {
-      icon: targetLocationIcon,
-    }).addTo(map)
-
-    targetLocationCircle = L.circle(e.latlng, {
-      color: "blue",
-      fillColor: "#30f",
-      fillOpacity: 0.2,
-      radius: 50,
-    }).addTo(map)
-  }
-
-  const pos = targetLocationMarker.getLatLng()
-  document.getElementById("coordinates").innerText =
-    `${pos.lat}. Enlem, ${pos.lng}. Boylam`
-  document.getElementById("geolocation-input").value = `${pos.lat},${pos.lng}`
-  document.getElementById("location-selected-confirmation").innerText =
-    "Konum seçildi, bir sonraki adıma geçebilirsiniz."
-})

src/scripts/initSelectionMap.ts

@@ -0,0 +1,125 @@
+import L from "leaflet"
+import { openstreetmapTiles } from "@/components/Leaflet/constants"
+import { toast } from "@/lib/utils"
+import {
+  currentLocationIcon,
+  targetLocationIcon,
+} from "@/components/Leaflet/icons"
+import {
+  addClasses,
+  removeClasses,
+  updateInputValue,
+  updateText,
+} from "@/components/LockedContent/domUtils"
+import { updateMarkerLocation } from "@/components/Leaflet/geolocation"
+
+var map = L.map("map").setView([41.024857599001905, 28.940787550837882], 10)
+
+openstreetmapTiles.addTo(map)
+
+let targetLocationMarker: L.Marker
+
+let targetLocationCircle: L.Circle
+
+let currentLocationMarker: L.Marker
+
+map.on("locationerror", () =>
+  toast(
+    "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin."
+  )
+)
+
+map.on("locationfound", (ev) => {
+  removeClasses("current-location-control", "disabled-button")
+  addClasses("ask-permission-control", "disabled-button")
+
+  currentLocationMarker = updateMarkerLocation(
+    currentLocationMarker,
+    currentLocationIcon,
+    ev.latlng,
+    map
+  )
+})
+
+const CurrentLocationControl = L.Control.extend({
+  onAdd: function (map: L.Map) {
+    const locationButton = document.createElement("button")
+
+    locationButton.textContent = "Konumuma Git"
+
+    locationButton.classList.add("custom-map-control-button", "disabled-button")
+
+    locationButton.type = "button"
+
+    locationButton.id = "current-location-control"
+
+    locationButton.addEventListener("click", (ev) => {
+      console.log(currentLocationMarker)
+      if (currentLocationMarker) {
+        map.setView(currentLocationMarker.getLatLng(), 12)
+      } else {
+        toast("Konumunuza erişilemiyor, lütfen biraz bekleyip tekrar deneyin.")
+      }
+      L.DomEvent.stopPropagation(ev)
+    })
+
+    return locationButton
+  },
+})
+
+const AskPermissonControl = L.Control.extend({
+  onAdd: function (map: L.Map) {
+    const locationButton = document.createElement("button")
+
+    locationButton.textContent = "Konum İzni Ver"
+
+    locationButton.classList.add("custom-map-control-button")
+
+    locationButton.type = "button"
+
+    locationButton.id = "ask-permission-control"
+
+    locationButton.addEventListener("click", (ev) => {
+      map.locate({ watch: true })
+      L.DomEvent.stopPropagation(ev)
+    })
+
+    return locationButton
+  },
+})
+
+const askPermissionControl = new AskPermissonControl({ position: "bottomleft" })
+
+const currentLocationControl = new CurrentLocationControl({
+  position: "bottomleft",
+})
+
+askPermissionControl.addTo(map)
+
+currentLocationControl.addTo(map)
+
+map.on("click", (e) => {
+  if (targetLocationMarker) {
+    targetLocationMarker.setLatLng(e.latlng)
+    targetLocationCircle.setLatLng(e.latlng)
+  } else {
+    targetLocationMarker = L.marker(e.latlng, {
+      icon: targetLocationIcon,
+    }).addTo(map)
+
+    targetLocationCircle = L.circle(e.latlng, {
+      color: "blue",
+      fillColor: "#30f",
+      fillOpacity: 0.2,
+      radius: 50,
+    }).addTo(map)
+  }
+
+  const pos = targetLocationMarker.getLatLng()
+  updateText("coordinates", `${pos.lat}. Enlem, ${pos.lng}. Boylam`)
+  updateInputValue("geolocation-input", `${pos.lat},${pos.lng}`)
+  updateText(
+    "location-selected-confirmation",
+    "Konum seçildi, bir sonraki adıma geçebilirsiniz."
+  )
+})