astro.config.mjs

@@ -2,13 +2,11 @@ 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: devMode ? "http://localhost:4321" : "https://konulukonum.log101.dev"
+  site: "https://konulukonum.log101.dev"
 });

src/components/Leaflet/icons.ts

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

src/components/LockedContent/geolocation.ts

@@ -14,8 +14,7 @@ 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")
@@ -28,7 +27,7 @@ function locationSuccessCallback(
   )
 
   // If user has arrived to destination
-  if (distance < radius) {
+  if (distance < 100) {
     // 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,6 +10,5 @@ export interface ContentTable {
   author: string
   description: string
   created_at: string
-  radius: number
   unlocked_counter: number
 }

src/pages/index.astro

@@ -85,7 +85,6 @@ 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,15 +144,11 @@ 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) {
+    if (leafletMap) leafletMap.dataset.targetLocation = data?.loc
-      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, radius = 50) {
+function addTargetLocationMarker(target: TargetLocation) {
   if (target) {
     L.marker(target, { icon: targetLocationIcon }).addTo(map)
 
@@ -83,7 +83,7 @@ function addTargetLocationMarker(target: TargetLocation, radius = 50) {
       color: "blue",
       fillColor: "#30f",
       fillOpacity: 0.2,
-      radius,
+      radius: 50,
     }).addTo(map)
   }
 }
@@ -100,7 +100,6 @@ export function initMap() {
   map = L.map("map")
 
   const targetLocation = mapEl?.dataset.targetLocation
-  const targetRadius = mapEl?.dataset.targetRadius
 
   const data = targetLocation ? JSON.parse(targetLocation) : null
 
@@ -114,7 +113,7 @@ export function initMap() {
       '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).addTo(map)
 
-  addTargetLocationMarker(TARGET_LOCATION, Number(targetRadius))
+  addTargetLocationMarker(TARGET_LOCATION)
   targetLocationControl.addTo(map)
   goToCurrentLocationControl.addTo(map)
 }

src/scripts/initSelectionMap.ts

@@ -21,8 +21,6 @@ let targetLocationMarker: L.Marker
 
 let targetLocationCircle: L.Circle
 
-let targetLocationCircleRadius = 50
-
 let currentLocationMarker: L.Marker
 
 map.on("locationerror", () =>
@@ -89,116 +87,12 @@ 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)
@@ -216,10 +110,8 @@ map.on("click", (e) => {
       color: "blue",
       fillColor: "#30f",
       fillOpacity: 0.2,
-      radius: targetLocationCircleRadius,
+      radius: 50,
     }).addTo(map)
-
-    radiusControl.addTo(map)
   }
 
   const pos = targetLocationMarker.getLatLng()

src/scripts/lockedContent.ts

@@ -45,27 +45,13 @@ 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, radius),
+      (position) => locationSuccessCallback(position, TARGET_POSITION),
       errorCallback
     )
   }
@@ -79,10 +65,8 @@ navigator.permissions
     switch (permissionStatus.state) {
       case "granted":
         const TARGET_POSITION = getTargetPosition()
-        const radius = getRadius()
         watchId = window.navigator.geolocation.watchPosition(
-          (position) =>
+          (position) => locationSuccessCallback(position, TARGET_POSITION),
-            locationSuccessCallback(position, TARGET_POSITION, radius),
           errorCallback
         )
         break

src/styles/locked-page.css

@@ -11,19 +11,6 @@
   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);
 }