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

feat: add location tracking on maps

Browse Source
This commit is contained in:
log101 2024-01-27 19:24:19 +03:00
parent 92f3166eb1
commit 42b80e3905
5 changed files with 62 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -2319,9 +2319,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001576",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz",
"integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==",
"version": "1.0.30001580",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001580.tgz",
"integrity": "sha512-mtj5ur2FFPZcCEpXFy8ADXbDACuNFXg6mxVDqp7tqooX6l3zwm+d8EPoeOSIFRDvHs8qu7/SLFOGniULkcH2iA==",
"funding": [
{
"type": "opencollective",

5
src/layouts/Layout.astro
View File

@ -15,6 +15,11 @@
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
/>
<script
is:inline
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"

6
src/pages/api/content.ts
View File

@ -44,13 +44,13 @@ export const POST: APIRoute = async ({ request }) => {
description: description?.toString() ?? "",
loc: `SRID=4326;POINT(${pos[0]} ${pos[1]})`
})
.returning("blob_url")
.returning("url")
.executeTakeFirst()
if (res?.blob_url) {
if (res?.url) {
return new Response(
JSON.stringify({
message: "Succesfully added content"
url: res.url
})
)
} else {

25
src/pages/index.astro
View File

@ -111,6 +111,8 @@ import { ReloadIcon } from '@radix-ui/react-icons';
</form>
</main>
<script src="../scripts/initSelectionMap.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"
></script>
</Layout>
<script>
@ -129,13 +131,34 @@ import { ReloadIcon } from '@radix-ui/react-icons';
const formData = new FormData(e.target as HTMLFormElement);
await fetch(`/api/content`, {
const res = await fetch(`/api/content`, {
method: 'POST',
body: formData,
});
reloadIcon.classList.toggle('hidden');
submitButton.disabled = false;
if (res.status === 200) {
const data = await res.json();
if (data.url) location.assign('/' + data.url);
} else {
// @ts-ignore
Toastify({
text: 'Konulu konum oluşturulamadı, lütfen tekrar deneyin.',
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();
}
};
document.getElementById('sample-form')!.onsubmit = handleSubmit;

73
src/scripts/initMap.js
View File

@ -2,6 +2,27 @@ const data = JSON.parse(document.getElementById('map').dataset.targetLocation)
const TARGET_LOCATION = data.coordinates
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, maximumAge: 10000, timeout: 57000 }
)
}
var map = L.map('map').setView(TARGET_LOCATION, 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@ -48,7 +69,12 @@ L.Control.GoToCurrentLocation = L.Control.extend({
locationButton.name = 'select-location-button'
locationButton.addEventListener('click', () => {
map.setView(currentLocationMarker.getLatLng(), 18);
if (watchId === -1) {
startWatchingLocation()
map.setView(currentLocationMarker.getLatLng(), 12);
} else {
map.setView(currentLocationMarker.getLatLng(), 12);
}
});
return locationButton;
@ -91,48 +117,3 @@ L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
L.control.targetLocation({ 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 }
)
} else {
permissionStatus.onchange = () => {
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 }
)
}
};
}
});