feat: fix geolocation errors on initSelectionMap
This commit is contained in:
parent
59c5bada6b
commit
e062b4a577
|
@ -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,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) })
|
||||
}
|
||||
|
|
|
@ -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
11
src/pages/api/debug.ts
Normal 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
|
||||
})
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue
Block a user