fix: change diameter to radius

src/lib/db.ts

@@ -10,5 +10,6 @@ export interface ContentTable {
   author: string
   description: string
   created_at: string
+  radius: number
   unlocked_counter: number
 }

src/pages/index.astro

@@ -85,11 +85,7 @@ const backendUrl = import.meta.env.PUBLIC_BACKEND_URL
           </p>
         </div>
         <input name='geolocation' id='geolocation-input' hidden />
-        <input
-          name='geolocation-diameter'
-          id='geolocation-diameter-input'
-          hidden
-        />
+        <input name='geolocation-radius' id='geolocation-radius-input' hidden />
       </div>
 
       <div>

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()
 

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() {
       '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).addTo(map)
 
-  addTargetLocationMarker(TARGET_LOCATION)
+  addTargetLocationMarker(TARGET_LOCATION, Number(targetRadius))
   targetLocationControl.addTo(map)
   goToCurrentLocationControl.addTo(map)
 }

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()