fix: type diameter to radius

astro.config.mjs

@@ -2,11 +2,13 @@ import { defineConfig } from 'astro/config';
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
 
+const devMode = import.meta.env.DEV
+
 // https://astro.build/config
 export default defineConfig({
   integrations: [react(), tailwind({
     applyBaseStyles: false
   })],
   output: "static",
-  site: "https://konulukonum.log101.dev"
+  site: devMode ? "http://localhost:4321" : "https://konulukonum.log101.dev"
 });

src/components/Leaflet/icons.ts

@@ -1,12 +1,12 @@
 import L from "leaflet"
 
 var targetLocationIcon = L.icon({
-  iconUrl: "https://konulukonum.log101.dev/goal.svg",
+  iconUrl: "/goal.svg",
   iconSize: [32, 32],
 })
 
 var currentLocationIcon = L.icon({
-  iconUrl: "https://konulukonum.log101.dev/blue-dot.png",
+  iconUrl: "/blue-dot.png",
   iconSize: [32, 32],
 })
 

src/components/LockedContent/geolocation.ts

@@ -14,7 +14,8 @@ import { toast } from "@/lib/utils"
 // Update the elements according to distance remaining
 function locationSuccessCallback(
   position: GeolocationPosition,
-  targetPosition: LatLngTuple
+  targetPosition: LatLngTuple,
+  radius: number
 ) {
   // Enable current location control
   removeClasses("current-location-control", "disabled-button")
@@ -27,7 +28,7 @@ function locationSuccessCallback(
   )
 
   // If user has arrived to destination
-  if (distance < 100) {
+  if (distance < radius) {
     // Change the description texts
     updateText("button-text", "İçeriği Göster")
     updateText("locked-content-description", "İçeriği görmek için butona bas!")

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,6 +85,7 @@ const backendUrl = import.meta.env.PUBLIC_BACKEND_URL
           </p>
         </div>
         <input name='geolocation' id='geolocation-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

@@ -21,6 +21,8 @@ let targetLocationMarker: L.Marker
 
 let targetLocationCircle: L.Circle
 
+let targetLocationCircleRadius = 50
+
 let currentLocationMarker: L.Marker
 
 map.on("locationerror", () =>
@@ -87,12 +89,116 @@ const AskPermissonControl = L.Control.extend({
   },
 })
 
+const RadiusControl = L.Control.extend({
+  onAdd: function (map: L.Map) {
+    const radiusContainer = document.createElement("div")
+
+    radiusContainer.classList.add(
+      "bg-white",
+      "h-[40px]",
+      "p-2",
+      "flex",
+      "items-center",
+      "gap-2"
+    )
+
+    const radiusButtonClasses = [
+      "text-xl",
+      "border-2",
+      "border-slate-700",
+      "max-h-[30px]",
+      "flex",
+      "items-center",
+      "p-2",
+      "rounded-lg",
+      "bg-gray-100",
+      "hover:bg-gray-300",
+    ]
+
+    const radiusIncreaseButton = document.createElement("button")
+
+    radiusIncreaseButton.classList.add(...radiusButtonClasses)
+
+    const radiusDecreaseButton = document.createElement("button")
+
+    radiusIncreaseButton.type = "button"
+
+    radiusDecreaseButton.type = "button"
+
+    radiusDecreaseButton.classList.add(...radiusButtonClasses)
+
+    const radiusContainerText = document.createElement("p")
+
+    const radiusText = document.createElement("p")
+
+    radiusContainerText.classList.add("text-xl")
+
+    radiusText.classList.add("text-xl")
+
+    radiusIncreaseButton.textContent = "+"
+
+    radiusDecreaseButton.textContent = "-"
+
+    radiusContainerText.textContent = "Yarıçap: "
+
+    radiusText.textContent = `${targetLocationCircleRadius.toString()}m`
+
+    radiusContainer.insertAdjacentElement("afterbegin", radiusIncreaseButton)
+
+    radiusContainer.insertAdjacentElement("afterbegin", radiusText)
+
+    radiusContainer.insertAdjacentElement("afterbegin", radiusDecreaseButton)
+
+    radiusContainer.insertAdjacentElement("afterbegin", radiusContainerText)
+
+    radiusContainer.id = "radius-control"
+
+    L.DomEvent.on(radiusIncreaseButton, "click", (ev) => {
+      targetLocationCircleRadius = Math.min(
+        targetLocationCircleRadius + 100,
+        2000
+      )
+      targetLocationCircle.setRadius(targetLocationCircleRadius)
+
+      radiusText.innerText = `${targetLocationCircleRadius.toString()}m`
+      updateInputValue(
+        "geolocation-radius-input",
+        targetLocationCircleRadius.toString()
+      )
+      L.DomEvent.stop(ev)
+    })
+
+    L.DomEvent.on(radiusIncreaseButton, "dblclick", (ev) => L.DomEvent.stop(ev))
+
+    L.DomEvent.on(radiusDecreaseButton, "click", (ev) => {
+      targetLocationCircleRadius = Math.max(
+        targetLocationCircleRadius - 100,
+        50
+      )
+      targetLocationCircle.setRadius(targetLocationCircleRadius)
+      radiusText.innerText = `${targetLocationCircleRadius.toString()}m`
+      updateInputValue(
+        "geolocation-radius-input",
+        targetLocationCircleRadius.toString()
+      )
+
+      L.DomEvent.stop(ev)
+    })
+
+    L.DomEvent.on(radiusDecreaseButton, "dblclick", (ev) => L.DomEvent.stop(ev))
+
+    return radiusContainer
+  },
+})
+
 const askPermissionControl = new AskPermissonControl({ position: "bottomleft" })
 
 const currentLocationControl = new CurrentLocationControl({
   position: "bottomleft",
 })
 
+const radiusControl = new RadiusControl({ position: "bottomright" })
+
 askPermissionControl.addTo(map)
 
 currentLocationControl.addTo(map)
@@ -110,8 +216,10 @@ map.on("click", (e) => {
       color: "blue",
       fillColor: "#30f",
       fillOpacity: 0.2,
-      radius: 50,
+      radius: targetLocationCircleRadius,
     }).addTo(map)
+
+    radiusControl.addTo(map)
   }
 
   const pos = targetLocationMarker.getLatLng()

src/scripts/lockedContent.ts

@@ -45,13 +45,27 @@ function getTargetPosition() {
   return data
 }
 
+function getRadius() {
+  const leafletMap = document.getElementById("map")
+
+  let targetRadiusString = leafletMap?.dataset.targetRadius
+
+  // TARGET_POSITION is required to calculate distance
+  if (!targetRadiusString) targetRadiusString = "50"
+
+  const data = Number(targetRadiusString)
+
+  return data
+}
+
 // Call Geolocation API to start watching user location
 function startWatchingLocation() {
   const TARGET_POSITION = getTargetPosition()
+  const radius = getRadius()
 
   if (!watchId) {
     watchId = window.navigator.geolocation.watchPosition(
-      (position) => locationSuccessCallback(position, TARGET_POSITION),
+      (position) => locationSuccessCallback(position, TARGET_POSITION, radius),
       errorCallback
     )
   }
@@ -65,8 +79,10 @@ navigator.permissions
     switch (permissionStatus.state) {
       case "granted":
         const TARGET_POSITION = getTargetPosition()
+        const radius = getRadius()
         watchId = window.navigator.geolocation.watchPosition(
-          (position) => locationSuccessCallback(position, TARGET_POSITION),
+          (position) =>
+            locationSuccessCallback(position, TARGET_POSITION, radius),
           errorCallback
         )
         break

src/styles/locked-page.css

@@ -11,6 +11,19 @@
   cursor: pointer;
 }
 
+.custom-map-control-div {
+  @apply text-xl;
+  background-color: #fff;
+  border: 0;
+  border-radius: 2px;
+  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+  margin: 10px;
+  padding: 0 0.5em;
+  overflow: hidden;
+  height: 40px;
+  cursor: pointer;
+}
+
 .custom-map-control-button:hover {
   background: rgb(235, 235, 235);
 }