feat: fix geolocation errors on initSelectionMap

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

View File

@ -25,6 +25,9 @@
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script> 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:title" content="Konulu Konum" />
<meta property="og:description" content="Sevdiklerinizi şaşırtın!" /> <meta property="og:description" content="Sevdiklerinizi şaşırtın!" />
<meta property="og:url" content="konulu-konum.vercel.app" /> <meta property="og:url" content="konulu-konum.vercel.app" />

View File

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

View File

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

View File

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

View File

@ -1,3 +1,5 @@
import { remoteLog } from "@/lib/utils";
var map = L.map('map').setView([41.024857599001905, 28.940787550837882], 10); var map = L.map('map').setView([41.024857599001905, 28.940787550837882], 10);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@ -22,33 +24,48 @@ var currentLocationIcon = L.icon({
let currentLocationMarker; let currentLocationMarker;
let watchId = -1;
function startWatchingLocation() { function startWatchingLocation() {
watchId = navigator.geolocation.watchPosition( map.locate({ watch: true })
(position) => { }
const pos = {
lat: position.coords.latitude, function onLocationError() {
lng: position.coords.longitude // @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) { if (currentLocationMarker) {
currentLocationMarker.setLatLng(pos); currentLocationMarker.setLatLng(currentPos);
} else { } else {
currentLocationMarker = L.marker(pos, { icon: currentLocationIcon }); currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map); currentLocationMarker.addTo(map);
} }
},
() => null,
{ enableHighAccuracy: true, timeout: 27000, maximumAge: 10000 }
)
}
function onLocationError(e) {
alert(e.message);
} }
map.on('locationerror', onLocationError); map.on('locationerror', onLocationError);
map.on('locationfound', onLocationSuccess)
L.Control.GoToCurrentLocation = L.Control.extend({ L.Control.GoToCurrentLocation = L.Control.extend({
onAdd: function (map) { onAdd: function (map) {
const locationButton = document.createElement('button'); const locationButton = document.createElement('button');
@ -60,11 +77,29 @@ L.Control.GoToCurrentLocation = L.Control.extend({
locationButton.type = 'button' locationButton.type = 'button'
locationButton.addEventListener('click', (ev) => { locationButton.addEventListener('click', (ev) => {
if (watchId === -1) { if (locationButton.textContent != 'Konumuma Git') {
startWatchingLocation() startWatchingLocation()
locationButton.textContent = 'Konumuma Git'; locationButton.textContent = 'Konumuma Git';
} else { } else {
if (currentLocationMarker) {
map.setView(currentLocationMarker.getLatLng(), 12); 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) L.DomEvent.stopPropagation(ev)
}) })
@ -79,30 +114,6 @@ L.control.currentLocation = function (opts) {
L.control.currentLocation({ position: 'bottomleft' }).addTo(map); 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) => { map.on('click', (e) => {
if (targetLocationMarker) { if (targetLocationMarker) {