Compare commits

..

6 Commits

Author SHA1 Message Date
62f60c7491 fix: type diameter to radius
All checks were successful
/ Build (push) Successful in 1m0s
2024-08-06 17:11:47 +03:00
cbe4ebc8d1 feat: check location according to radius 2024-08-06 17:04:34 +03:00
aeb1b32441 fix: change diameter to radius 2024-08-06 16:53:04 +03:00
1431aab04a feat: add hidden input for geolocation diameter 2024-08-06 16:32:46 +03:00
f1e16e8c74 feat: add diameter control 2024-08-06 16:30:06 +03:00
0330439362 chore: change site on dev mode 2024-08-06 13:46:28 +03:00
10 changed files with 160 additions and 13 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -144,11 +144,15 @@ import { CalendarIcon } from "@radix-ui/react-icons"
const lockedContentContainer = document.getElementById( const lockedContentContainer = document.getElementById(
"locked-content-container" "locked-content-container"
) )
if (lockedContentContainer) if (lockedContentContainer) {
lockedContentContainer.dataset.targetPosition = data?.loc lockedContentContainer.dataset.targetPosition = data?.loc
}
const leafletMap = document.getElementById("map") 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() initMap()

View File

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

View File

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

View File

@ -45,13 +45,27 @@ function getTargetPosition() {
return data 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 // Call Geolocation API to start watching user location
function startWatchingLocation() { function startWatchingLocation() {
const TARGET_POSITION = getTargetPosition() const TARGET_POSITION = getTargetPosition()
const radius = getRadius()
if (!watchId) { if (!watchId) {
watchId = window.navigator.geolocation.watchPosition( watchId = window.navigator.geolocation.watchPosition(
(position) => locationSuccessCallback(position, TARGET_POSITION), (position) => locationSuccessCallback(position, TARGET_POSITION, radius),
errorCallback errorCallback
) )
} }
@ -65,8 +79,10 @@ navigator.permissions
switch (permissionStatus.state) { switch (permissionStatus.state) {
case "granted": case "granted":
const TARGET_POSITION = getTargetPosition() const TARGET_POSITION = getTargetPosition()
const radius = getRadius()
watchId = window.navigator.geolocation.watchPosition( watchId = window.navigator.geolocation.watchPosition(
(position) => locationSuccessCallback(position, TARGET_POSITION), (position) =>
locationSuccessCallback(position, TARGET_POSITION, radius),
errorCallback errorCallback
) )
break break

View File

@ -11,6 +11,19 @@
cursor: pointer; 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 { .custom-map-control-button:hover {
background: rgb(235, 235, 235); background: rgb(235, 235, 235);
} }