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

7
src/components/LockedContent.tsx
View File

@ -11,10 +11,12 @@ const LocationButton = () => {
const [atTarget, setAtTarget] = useState(false) const [atTarget, setAtTarget] = useState(false)
const [contentVisible, setContentVisible] = useState(false) const [contentVisible, setContentVisible] = useState(false)
const [hasPermission, setHasPermission] = useState(false) const [hasPermission, setHasPermission] = useState(false)
const [watchId, setWatchId] = useState<number>()
const startWatchingLocation = () => { const startWatchingLocation = () => {
setHasPermission(true) setHasPermission(true)
navigator.geolocation.watchPosition( if (!watchId) {
const id = navigator.geolocation.watchPosition(
(position: GeolocationPosition) => { (position: GeolocationPosition) => {
const pos = { const pos = {
lat: position.coords.latitude, lat: position.coords.latitude,
@ -30,6 +32,9 @@ const LocationButton = () => {
() => null, () => null,
{ enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 } { enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 }
) )
setWatchId(id)
}
} }
useEffect(() => { useEffect(() => {

37
src/scripts/initMap.js
View File

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