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

fix: remove duplicate location watches

Browse Source
This commit is contained in:
log101 2024-01-18 20:39:47 +03:00
parent 730f5e9715
commit f491d12154
2 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/LockedContent.tsx
View File

@ -11,25 +11,30 @@ const LocationButton = () => {
const [atTarget, setAtTarget] = useState(false)
const [contentVisible, setContentVisible] = useState(false)
const [hasPermission, setHasPermission] = useState(false)
const [watchId, setWatchId] = useState<number>()
const startWatchingLocation = () => {
setHasPermission(true)
navigator.geolocation.watchPosition(
(position: GeolocationPosition) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
if (!watchId) {
const id = navigator.geolocation.watchPosition(
(position: GeolocationPosition) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
const totalDistanceInKM = distance(pos.lat, pos.lng, pos.lat, pos.lng).toFixed(0)
const totalDistanceInKM = distance(pos.lat, pos.lng, pos.lat, pos.lng).toFixed(0)
if (totalDistanceInKM === "0") {
setAtTarget(true)
}
},
() => null,
{ enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 }
)
if (totalDistanceInKM === "0") {
setAtTarget(true)
}
},
() => null,
{ enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 }
)
setWatchId(id)
}
}
useEffect(() => {

37
src/scripts/initMap.js
View File

@ -29,19 +29,6 @@ var currentLocationIcon = L.icon({
let currentLocationMarker;
function onLocationFound(e) {
var radius = e.accuracy;
if (currentLocationMarker) {
currentLocationMarker.setLatLng(e.latlng);
} else {
currentLocationMarker = L.marker(e.latlng, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
}
}
map.on('locationfound', onLocationFound);
function onLocationError(e) {
alert(e.message);
}
@ -57,7 +44,7 @@ L.Control.GoToCurrentLocation = L.Control.extend({
locationButton.classList.add('custom-map-control-button');
locationButton.addEventListener('click', () => {
map.locate({ setView: true, maxZoom: 16 });
map.setView(currentLocationMarker.getLatLng(), 18);
});
return locationButton;
@ -77,7 +64,7 @@ L.Control.GoToTargetLocation = L.Control.extend({
locationButton.classList.add('custom-map-control-button');
locationButton.addEventListener('click', () => {
map.setView(TARGET_LOCATION, 13);
map.setView(TARGET_LOCATION, 18);
});
return locationButton;
@ -103,7 +90,7 @@ L.control.targetLocation({ position: 'bottomleft' }).addTo(map);
navigator.permissions
.query({ name: "geolocation" })
.then((permissionStatus) => {
if (permissionStatus === 'granted') {
if (permissionStatus.state === 'granted') {
navigator.geolocation.watchPosition(
(position) => {
const pos = {
@ -111,10 +98,15 @@ navigator.permissions
lng: position.coords.longitude
}
console.log('The map location is' + pos)
if (currentLocationMarker) {
currentLocationMarker.setLatLng(pos);
} else {
currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
}
},
() => null,
{ enableHighAccuracy: true, maximumAge: 60000, timeout: 57000 }
{ enableHighAccuracy: true, maximumAge: 10000, timeout: 57000 }
)
} else {
permissionStatus.onchange = () => {
@ -126,10 +118,15 @@ navigator.permissions
lng: position.coords.longitude
}
console.log('The map location is' + pos)
if (currentLocationMarker) {
currentLocationMarker.setLatLng(pos);
} else {
currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
}
},
() => null,
{ enableHighAccuracy: true, maximumAge: 60000, timeout: 57000 }
{ enableHighAccuracy: true, maximumAge: 10000, timeout: 57000 }
)
}
};