diff --git a/src/components/Leaflet/constants.ts b/src/components/Leaflet/constants.ts
new file mode 100644
index 0000000..c7eeee9
--- /dev/null
+++ b/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:
+ '© OpenStreetMap',
+ }
+)
diff --git a/src/components/Leaflet/geolocation.ts b/src/components/Leaflet/geolocation.ts
new file mode 100644
index 0000000..b3ac879
--- /dev/null
+++ b/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 }
diff --git a/src/components/Leaflet/icons.ts b/src/components/Leaflet/icons.ts
new file mode 100644
index 0000000..e068ca3
--- /dev/null
+++ b/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 }
diff --git a/src/components/LockedContent/domUtils.ts b/src/components/LockedContent/domUtils.ts
index 2ca7932..19f9fc2 100644
--- a/src/components/LockedContent/domUtils.ts
+++ b/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,
}
diff --git a/src/components/LockedContent/geolocation.ts b/src/components/LockedContent/geolocation.ts
index 8040505..406da74 100644
--- a/src/components/LockedContent/geolocation.ts
+++ b/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
diff --git a/src/scripts/initSelectionMap.js b/src/scripts/initSelectionMap.js
deleted file mode 100644
index 65102ad..0000000
--- a/src/scripts/initSelectionMap.js
+++ /dev/null
@@ -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:
- '© OpenStreetMap',
-}).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."
-})
diff --git a/src/scripts/initSelectionMap.ts b/src/scripts/initSelectionMap.ts
new file mode 100644
index 0000000..0e185ce
--- /dev/null
+++ b/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."
+ )
+})