log101/konulu-konum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fix geolocation errors on initSelectionMap

Browse Source
This commit is contained in:
log101 2024-02-06 20:27:45 +03:00
parent 59c5bada6b
commit e062b4a577
6 changed files with 75 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layouts/Layout.astro
View File

@ -25,6 +25,9 @@
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<meta property="og:title" content="Konulu Konum" />
<meta property="og:description" content="Sevdiklerinizi şaşırtın!" />
<meta property="og:url" content="konulu-konum.vercel.app" />

4
src/lib/utils.ts
View File

@ -4,3 +4,7 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
export function remoteLog(data: any) {
fetch("/api/debug", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) })
}

9
src/pages/[id].astro
View File

@ -33,15 +33,6 @@ dayjs.extend(relativeTime);
dayjs.extend(utc);
console.log(
'then',
data?.created_at,
'now',
dayjs().format(),
'now utc',
dayjs.utc().format()
);
// @ts-expect-error Generated<string> is string
const dateFromNow = dayjs(data?.created_at).add(3, 'hour').from(dayjs.utc());
---

11
src/pages/api/debug.ts Normal file
View File

@ -0,0 +1,11 @@
import type { APIRoute } from "astro"
export const POST: APIRoute = async ({ request }) => {
const data = await request.json()
console.log(data)
return new Response(null, {
status: 200
})
}

3
src/pages/index.astro
View File

@ -157,9 +157,6 @@ import { Checkbox } from '@/components/ui/checkbox';
</div>
</form>
<script src="../scripts/initSelectionMap.js"></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
</main>
<script>

103
src/scripts/initSelectionMap.js
View File

@ -1,3 +1,5 @@
import { remoteLog } from "@/lib/utils";
var map = L.map('map').setView([41.024857599001905, 28.940787550837882], 10);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@ -22,33 +24,48 @@ var currentLocationIcon = L.icon({
let currentLocationMarker;
let watchId = -1;
function startWatchingLocation() {
watchId = navigator.geolocation.watchPosition(
(position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
if (currentLocationMarker) {
currentLocationMarker.setLatLng(pos);
} else {
currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
}
},
() => null,
{ enableHighAccuracy: true, timeout: 27000, maximumAge: 10000 }
)
map.locate({ watch: true })
}
function onLocationError(e) {
alert(e.message);
function onLocationError() {
// @ts-ignore
Toastify({
text: 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.',
duration: 3000,
gravity: 'top', // `top` or `bottom`
position: 'center', // `left`, `center` or `right`
stopOnFocus: true, // Prevents dismissing of toast on hover
style: {
background: 'black',
borderRadius: '6px',
margin: '16px',
},
onClick: function () { }, // Callback after click
}).showToast();
}
function onLocationSuccess(locationEvent) {
const position = locationEvent.latlng
const currentPos = {
lat: position.lat,
lng: position.lng
}
if (currentLocationMarker) {
currentLocationMarker.setLatLng(currentPos);
} else {
currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
}
}
map.on('locationerror', onLocationError);
map.on('locationfound', onLocationSuccess)
L.Control.GoToCurrentLocation = L.Control.extend({
onAdd: function (map) {
const locationButton = document.createElement('button');
@ -60,11 +77,29 @@ L.Control.GoToCurrentLocation = L.Control.extend({
locationButton.type = 'button'
locationButton.addEventListener('click', (ev) => {
if (watchId === -1) {
if (locationButton.textContent != 'Konumuma Git') {
startWatchingLocation()
locationButton.textContent = 'Konumuma Git';
} else {
map.setView(currentLocationMarker.getLatLng(), 12);
if (currentLocationMarker) {
map.setView(currentLocationMarker.getLatLng(), 12);
} else {
// @ts-ignore
Toastify({
text: 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.',
duration: 3000,
gravity: 'top', // `top` or `bottom`
position: 'center', // `left`, `center` or `right`
stopOnFocus: true, // Prevents dismissing of toast on hover
style: {
background: 'black',
borderRadius: '6px',
margin: '16px',
},
onClick: function () { }, // Callback after click
}).showToast();
}
}
L.DomEvent.stopPropagation(ev)
})
@ -79,30 +114,6 @@ L.control.currentLocation = function (opts) {
L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
navigator.permissions
.query({ name: "geolocation" })
.then((permissionStatus) => {
if (permissionStatus.state === 'granted') {
navigator.geolocation.watchPosition(
(position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
if (currentLocationMarker) {
currentLocationMarker.setLatLng(pos);
} else {
currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
}
},
() => null,
{ enableHighAccuracy: true, maximumAge: 10000, timeout: 57000 }
)
}
});
map.on('click', (e) => {
if (targetLocationMarker) {