Compare commits
No commits in common. "62f60c749173bb12fb3fcfdd4606ebbc0ea35faf" and "8f61c0f99f154afe06f9108989aee2b989be7e37" have entirely different histories.
62f60c7491
...
8f61c0f99f
|
@ -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"
|
||||
});
|
||||
|
|
|
@ -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],
|
||||
})
|
||||
|
||||
|
|
|
@ -14,8 +14,7 @@ import { toast } from "@/lib/utils"
|
|||
// Update the elements according to distance remaining
|
||||
function locationSuccessCallback(
|
||||
position: GeolocationPosition,
|
||||
targetPosition: LatLngTuple,
|
||||
radius: number
|
||||
targetPosition: LatLngTuple
|
||||
) {
|
||||
// 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!")
|
||||
|
|
|
@ -10,6 +10,5 @@ export interface ContentTable {
|
|||
author: string
|
||||
description: string
|
||||
created_at: string
|
||||
radius: number
|
||||
unlocked_counter: number
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
leafletMap.dataset.targetLocation = data?.loc
|
||||
leafletMap.dataset.targetRadius = data?.radius.toString() ?? "50"
|
||||
}
|
||||
if (leafletMap) leafletMap.dataset.targetLocation = data?.loc
|
||||
|
||||
initMap()
|
||||
|
||||
|
|
|
@ -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() {
|
|||
'© <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)
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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) =>
|
||||
locationSuccessCallback(position, TARGET_POSITION, radius),
|
||||
(position) => locationSuccessCallback(position, TARGET_POSITION),
|
||||
errorCallback
|
||||
)
|
||||
break
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user