fix: add better error handling for initMap
This commit is contained in:
parent
e062b4a577
commit
6a90866d56
|
@ -6,6 +6,7 @@ import { useEffect, useState } from "react"
|
|||
|
||||
import "../styles/locked-content.css"
|
||||
import type { Generated } from "kysely"
|
||||
import { onLocationError } from "@/lib/error"
|
||||
|
||||
const incrementCounter = async (id: string | Generated<string>) =>
|
||||
await fetch(`${import.meta.env.PUBLIC_HOME_URL}/api/content/increment?id=${id}`)
|
||||
|
@ -26,6 +27,7 @@ const LocationButton = ({
|
|||
const [distanceRemain, setDistanceRemain] = useState<string>("")
|
||||
|
||||
const targetCoordinates = JSON.parse(location).coordinates
|
||||
|
||||
const targetPos = {
|
||||
lat: targetCoordinates[0],
|
||||
lng: targetCoordinates[1]
|
||||
|
@ -57,7 +59,7 @@ const LocationButton = ({
|
|||
setAtTarget(true)
|
||||
}
|
||||
},
|
||||
() => null,
|
||||
err => onLocationError(err),
|
||||
{ enableHighAccuracy: true, timeout: 27000, maximumAge: 10000 }
|
||||
)
|
||||
|
||||
|
@ -96,8 +98,7 @@ const LocationButton = ({
|
|||
<Button
|
||||
size='lg'
|
||||
className='text-lg p-6 animate-pulse bg-indigo-600 hover:bg-indigo-700 hover:animate-none border-2 border-indigo-800'
|
||||
onClick={handleUnlock}
|
||||
>
|
||||
onClick={handleUnlock}>
|
||||
<LockOpen1Icon className='mr-2 h-4 w-4' />
|
||||
İçeriğin Kilidi Açıldı
|
||||
</Button>
|
||||
|
@ -129,8 +130,7 @@ const LocationButton = ({
|
|||
<Button
|
||||
size='sm'
|
||||
className='bg-green-700 hover:bg-green-600 text-md'
|
||||
onClick={() => startWatchingLocation()}
|
||||
>
|
||||
onClick={() => startWatchingLocation()}>
|
||||
Konum İzni Ver
|
||||
</Button>
|
||||
</div>
|
||||
|
|
31
src/lib/error.ts
Normal file
31
src/lib/error.ts
Normal file
|
@ -0,0 +1,31 @@
|
|||
export function onLocationError(err: GeolocationPositionError) {
|
||||
let errorMessage
|
||||
switch (err.code) {
|
||||
case 1:
|
||||
errorMessage = "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin."
|
||||
break
|
||||
case 2:
|
||||
errorMessage = "Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz."
|
||||
break
|
||||
case 3:
|
||||
errorMessage = "Konum isteği zaman aşımına uğradı, lütfen sayfayı yenileyip tekrar deneyiniz."
|
||||
break
|
||||
default:
|
||||
errorMessage = "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin."
|
||||
break
|
||||
}
|
||||
// @ts-ignore
|
||||
Toastify({
|
||||
text: errorMessage,
|
||||
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()
|
||||
}
|
|
@ -1,29 +1,11 @@
|
|||
import { remoteLog } from "@/lib/utils";
|
||||
|
||||
const data = JSON.parse(document.getElementById('map').dataset.targetLocation)
|
||||
|
||||
const TARGET_LOCATION = data.coordinates
|
||||
|
||||
let watchId = -1;
|
||||
function startWatchingLocation() {
|
||||
watchId = navigator.geolocation.watchPosition(
|
||||
(position) => {
|
||||
console.log('watching')
|
||||
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 }
|
||||
)
|
||||
|
||||
console.log('trying', watchId)
|
||||
map.locate({ watch: true })
|
||||
}
|
||||
|
||||
var map = L.map('map').setView(TARGET_LOCATION, 13);
|
||||
|
@ -55,12 +37,60 @@ var currentLocationIcon = L.icon({
|
|||
|
||||
let currentLocationMarker;
|
||||
|
||||
function onLocationError(e) {
|
||||
alert(e.message);
|
||||
function onLocationError(err) {
|
||||
let errorMessage;
|
||||
switch (err.code) {
|
||||
case 1:
|
||||
errorMessage = 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.'
|
||||
break;
|
||||
case 2:
|
||||
errorMessage = 'Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz.'
|
||||
break;
|
||||
case 3:
|
||||
errorMessage = 'Konum isteği zaman aşımına uğradı, lütfen sayfayı yenileyip tekrar deneyiniz.'
|
||||
break;
|
||||
default:
|
||||
errorMessage = 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.'
|
||||
break;
|
||||
}
|
||||
// @ts-ignore
|
||||
Toastify({
|
||||
text: errorMessage,
|
||||
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');
|
||||
|
@ -69,24 +99,38 @@ L.Control.GoToCurrentLocation = L.Control.extend({
|
|||
|
||||
locationButton.classList.add('custom-map-control-button');
|
||||
|
||||
locationButton.name = 'select-location-button'
|
||||
locationButton.type = 'button'
|
||||
|
||||
locationButton.addEventListener('click', () => {
|
||||
if (watchId === -1) {
|
||||
locationButton.addEventListener('click', (ev) => {
|
||||
if (locationButton.textContent != 'Konumuma Git') {
|
||||
startWatchingLocation()
|
||||
locationButton.textContent = 'Konumuma Git';
|
||||
} else {
|
||||
console.log(currentLocationMarker)
|
||||
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)
|
||||
})
|
||||
|
||||
return locationButton;
|
||||
},
|
||||
|
||||
onRemove: function (map) {
|
||||
// Nothing to do here
|
||||
},
|
||||
});
|
||||
|
||||
L.Control.GoToTargetLocation = L.Control.extend({
|
||||
|
@ -102,11 +146,7 @@ L.Control.GoToTargetLocation = L.Control.extend({
|
|||
});
|
||||
|
||||
return locationButton;
|
||||
},
|
||||
|
||||
onRemove: function (map) {
|
||||
// Nothing to do here
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
L.control.currentLocation = function (opts) {
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { onLocationError } from "@/lib/error";
|
||||
import { remoteLog } from "@/lib/utils";
|
||||
|
||||
var map = L.map('map').setView([41.024857599001905, 28.940787550837882], 10);
|
||||
|
@ -28,24 +29,6 @@ function startWatchingLocation() {
|
|||
map.locate({ watch: true })
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user