diff --git a/src/lib/db.ts b/src/lib/db.ts
index a3beb06..4d2fcd7 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -10,5 +10,6 @@ export interface ContentTable {
author: string
description: string
created_at: string
+ radius: number
unlocked_counter: number
}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3d2cd87..7e0817e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -85,11 +85,7 @@ const backendUrl = import.meta.env.PUBLIC_BACKEND_URL
diff --git a/src/pages/x/index.astro b/src/pages/x/index.astro
index c1a0a70..04839c7 100644
--- a/src/pages/x/index.astro
+++ b/src/pages/x/index.astro
@@ -144,11 +144,15 @@ import { CalendarIcon } from "@radix-ui/react-icons"
const lockedContentContainer = document.getElementById(
"locked-content-container"
)
- if (lockedContentContainer)
+ if (lockedContentContainer) {
lockedContentContainer.dataset.targetPosition = data?.loc
+ }
const leafletMap = document.getElementById("map")
- if (leafletMap) leafletMap.dataset.targetLocation = data?.loc
+ if (leafletMap) {
+ leafletMap.dataset.targetLocation = data?.loc
+ leafletMap.dataset.targetRadius = data?.radius.toString() ?? "50"
+ }
initMap()
diff --git a/src/scripts/initMap.ts b/src/scripts/initMap.ts
index 51b5ba1..c73e8bf 100644
--- a/src/scripts/initMap.ts
+++ b/src/scripts/initMap.ts
@@ -75,7 +75,7 @@ const targetLocationControl = new GoToTargetLocation({
position: "bottomleft",
})
-function addTargetLocationMarker(target: TargetLocation) {
+function addTargetLocationMarker(target: TargetLocation, radius = 50) {
if (target) {
L.marker(target, { icon: targetLocationIcon }).addTo(map)
@@ -83,7 +83,7 @@ function addTargetLocationMarker(target: TargetLocation) {
color: "blue",
fillColor: "#30f",
fillOpacity: 0.2,
- radius: 50,
+ radius,
}).addTo(map)
}
}
@@ -100,6 +100,7 @@ export function initMap() {
map = L.map("map")
const targetLocation = mapEl?.dataset.targetLocation
+ const targetRadius = mapEl?.dataset.targetRadius
const data = targetLocation ? JSON.parse(targetLocation) : null
@@ -113,7 +114,7 @@ export function initMap() {
'©
OpenStreetMap',
}).addTo(map)
- addTargetLocationMarker(TARGET_LOCATION)
+ addTargetLocationMarker(TARGET_LOCATION, Number(targetRadius))
targetLocationControl.addTo(map)
goToCurrentLocationControl.addTo(map)
}
diff --git a/src/scripts/initSelectionMap.ts b/src/scripts/initSelectionMap.ts
index bc24815..176dd62 100644
--- a/src/scripts/initSelectionMap.ts
+++ b/src/scripts/initSelectionMap.ts
@@ -89,11 +89,11 @@ const AskPermissonControl = L.Control.extend({
},
})
-const DiameterControl = L.Control.extend({
+const RadiusControl = L.Control.extend({
onAdd: function (map: L.Map) {
- const diameterContainer = document.createElement("div")
+ const radiusContainer = document.createElement("div")
- diameterContainer.classList.add(
+ radiusContainer.classList.add(
"bg-white",
"h-[40px]",
"p-2",
@@ -102,7 +102,7 @@ const DiameterControl = L.Control.extend({
"gap-2"
)
- const diameterButtonClasses = [
+ const radiusButtonClasses = [
"text-xl",
"border-2",
"border-slate-700",
@@ -115,89 +115,79 @@ const DiameterControl = L.Control.extend({
"hover:bg-gray-300",
]
- const diameterIncreaseButton = document.createElement("button")
+ const radiusIncreaseButton = document.createElement("button")
- diameterIncreaseButton.classList.add(...diameterButtonClasses)
+ radiusIncreaseButton.classList.add(...radiusButtonClasses)
- const diameterDecreaseButton = document.createElement("button")
+ const radiusDecreaseButton = document.createElement("button")
- diameterIncreaseButton.type = "button"
+ radiusIncreaseButton.type = "button"
- diameterDecreaseButton.type = "button"
+ radiusDecreaseButton.type = "button"
- diameterDecreaseButton.classList.add(...diameterButtonClasses)
+ radiusDecreaseButton.classList.add(...radiusButtonClasses)
- const diameterContainerText = document.createElement("p")
+ const radiusContainerText = document.createElement("p")
- const diameterText = document.createElement("p")
+ const radiusText = document.createElement("p")
- diameterContainerText.classList.add("text-xl")
+ radiusContainerText.classList.add("text-xl")
- diameterText.classList.add("text-xl")
+ radiusText.classList.add("text-xl")
- diameterIncreaseButton.textContent = "+"
+ radiusIncreaseButton.textContent = "+"
- diameterDecreaseButton.textContent = "-"
+ radiusDecreaseButton.textContent = "-"
- diameterContainerText.textContent = "Çap: "
+ radiusContainerText.textContent = "Çap: "
- diameterText.textContent = `${targetLocationCircleRadius.toString()}m`
+ radiusText.textContent = `${targetLocationCircleRadius.toString()}m`
- diameterContainer.insertAdjacentElement(
- "afterbegin",
- diameterIncreaseButton
- )
+ radiusContainer.insertAdjacentElement("afterbegin", radiusIncreaseButton)
- diameterContainer.insertAdjacentElement("afterbegin", diameterText)
+ radiusContainer.insertAdjacentElement("afterbegin", radiusText)
- diameterContainer.insertAdjacentElement(
- "afterbegin",
- diameterDecreaseButton
- )
+ radiusContainer.insertAdjacentElement("afterbegin", radiusDecreaseButton)
- diameterContainer.insertAdjacentElement("afterbegin", diameterContainerText)
+ radiusContainer.insertAdjacentElement("afterbegin", radiusContainerText)
- diameterContainer.id = "diameter-control"
+ radiusContainer.id = "radius-control"
- L.DomEvent.on(diameterIncreaseButton, "click", (ev) => {
+ L.DomEvent.on(radiusIncreaseButton, "click", (ev) => {
targetLocationCircleRadius = Math.min(
targetLocationCircleRadius + 100,
2000
)
targetLocationCircle.setRadius(targetLocationCircleRadius)
- diameterText.innerText = `${targetLocationCircleRadius.toString()}m`
+ radiusText.innerText = `${targetLocationCircleRadius.toString()}m`
updateInputValue(
- "geolocation-diameter-input",
+ "geolocation-radius-input",
targetLocationCircleRadius.toString()
)
L.DomEvent.stop(ev)
})
- L.DomEvent.on(diameterIncreaseButton, "dblclick", (ev) =>
- L.DomEvent.stop(ev)
- )
+ L.DomEvent.on(radiusIncreaseButton, "dblclick", (ev) => L.DomEvent.stop(ev))
- L.DomEvent.on(diameterDecreaseButton, "click", (ev) => {
+ L.DomEvent.on(radiusDecreaseButton, "click", (ev) => {
targetLocationCircleRadius = Math.max(
targetLocationCircleRadius - 100,
50
)
targetLocationCircle.setRadius(targetLocationCircleRadius)
- diameterText.innerText = `${targetLocationCircleRadius.toString()}m`
+ radiusText.innerText = `${targetLocationCircleRadius.toString()}m`
updateInputValue(
- "geolocation-diameter-input",
+ "geolocation-radius-input",
targetLocationCircleRadius.toString()
)
L.DomEvent.stop(ev)
})
- L.DomEvent.on(diameterDecreaseButton, "dblclick", (ev) =>
- L.DomEvent.stop(ev)
- )
+ L.DomEvent.on(radiusDecreaseButton, "dblclick", (ev) => L.DomEvent.stop(ev))
- return diameterContainer
+ return radiusContainer
},
})
@@ -207,7 +197,7 @@ const currentLocationControl = new CurrentLocationControl({
position: "bottomleft",
})
-const diameterControl = new DiameterControl({ position: "bottomright" })
+const radiusControl = new RadiusControl({ position: "bottomright" })
askPermissionControl.addTo(map)
@@ -229,7 +219,7 @@ map.on("click", (e) => {
radius: targetLocationCircleRadius,
}).addTo(map)
- diameterControl.addTo(map)
+ radiusControl.addTo(map)
}
const pos = targetLocationMarker.getLatLng()