From 48fe1336675ea56daae2c3721fe91b6ede0e24a7 Mon Sep 17 00:00:00 2001
From: "wezzleykoech20@gmail.com" <wezzleykoech20@gmail.com>
Date: Wed, 8 Feb 2023 12:40:34 +0300
Subject: [PATCH 1/2] Fix invalid lat/lon usePreference

---
 modern/package-lock.json                |  4 ++--
 modern/src/map/main/MapDefaultCamera.js | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/modern/package-lock.json b/modern/package-lock.json
index a054223a88..c24cbe0c43 100644
--- a/modern/package-lock.json
+++ b/modern/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "traccar",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "traccar",
-      "version": "5.5.0",
+      "version": "5.6.0",
       "dependencies": {
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
diff --git a/modern/src/map/main/MapDefaultCamera.js b/modern/src/map/main/MapDefaultCamera.js
index 90b3061b06..e4a979ecd1 100644
--- a/modern/src/map/main/MapDefaultCamera.js
+++ b/modern/src/map/main/MapDefaultCamera.js
@@ -8,10 +8,16 @@ const MapDefaultCamera = () => {
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
   const positions = useSelector((state) => state.session.positions);
 
-  const defaultLatitude = usePreference('latitude');
-  const defaultLongitude = usePreference('longitude');
+  let defaultLatitude = usePreference('latitude');
+  let defaultLongitude = usePreference('longitude');
   const defaultZoom = usePreference('zoom', 0);
 
+  if (defaultLatitude > 90 || defaultLatitude < -90) {
+    defaultLatitude = 0;
+  }
+  if (defaultLongitude > 180 || defaultLongitude < -180) {
+    defaultLongitude = 0;
+  }
   const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {

From 63dca5d3dd78329d846b44d3f53cc31138d25b91 Mon Sep 17 00:00:00 2001
From: "wezzleykoech20@gmail.com" <wezzleykoech20@gmail.com>
Date: Thu, 9 Feb 2023 10:06:15 +0300
Subject: [PATCH 2/2] Fix invalid lat/lon location preference

---
 modern/src/map/main/MapDefaultCamera.js | 11 ++---------
 modern/src/settings/UserPage.js         | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/modern/src/map/main/MapDefaultCamera.js b/modern/src/map/main/MapDefaultCamera.js
index e4a979ecd1..19799ef094 100644
--- a/modern/src/map/main/MapDefaultCamera.js
+++ b/modern/src/map/main/MapDefaultCamera.js
@@ -8,16 +8,9 @@ const MapDefaultCamera = () => {
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
   const positions = useSelector((state) => state.session.positions);
 
-  let defaultLatitude = usePreference('latitude');
-  let defaultLongitude = usePreference('longitude');
+  const defaultLatitude = usePreference('latitude');
+  const defaultLongitude = usePreference('longitude');
   const defaultZoom = usePreference('zoom', 0);
-
-  if (defaultLatitude > 90 || defaultLatitude < -90) {
-    defaultLatitude = 0;
-  }
-  if (defaultLongitude > 180 || defaultLongitude < -180) {
-    defaultLongitude = 0;
-  }
   const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {
diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js
index 582e63eb46..a112318dfe 100644
--- a/modern/src/settings/UserPage.js
+++ b/modern/src/settings/UserPage.js
@@ -261,13 +261,23 @@ const UserPage = () => {
               <TextField
                 type="number"
                 value={item.latitude || 0}
-                onChange={(event) => setItem({ ...item, latitude: Number(event.target.value) })}
+                onChange={(event) => {
+                  const value = Number(event.target.value);
+                  if (value >= -90 && value <= 90) {
+                    setItem({ ...item, latitude: value });
+                  }
+                }}
                 label={t('positionLatitude')}
               />
               <TextField
                 type="number"
                 value={item.longitude || 0}
-                onChange={(event) => setItem({ ...item, longitude: Number(event.target.value) })}
+                onChange={(event) => {
+                  const value = Number(event.target.value);
+                  if (value >= -180 && value <= 180) {
+                    setItem({ ...item, longitude: value });
+                  }
+                }}
                 label={t('positionLongitude')}
               />
               <TextField