Spaces:
Runtime error
Runtime error
Commit
·
3708237
1
Parent(s):
662d63b
Change exploration radius unit from m to km
Browse files- User isn't going to bother with 3201m or 4567m, he'd rather change radius from 3km to 7km
frontend/src/components/Map.js
CHANGED
|
@@ -83,7 +83,7 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
|
|
| 83 |
const [countryBorders, setCountryBorders] = useState(null);
|
| 84 |
|
| 85 |
const [explorationMode, setExplorationMode] = useState(false);
|
| 86 |
-
const [explorationRadius, setExplorationRadius] = useState(
|
| 87 |
const [explorationLimit, setExplorationLimit] = useState(10);
|
| 88 |
const [explorationMarkers, setExplorationMarkers] = useState([]);
|
| 89 |
const [explorationSidebarOpen, setExplorationSidebarOpen] = useState(false);
|
|
@@ -238,7 +238,7 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
|
|
| 238 |
body: JSON.stringify({
|
| 239 |
lat: lat,
|
| 240 |
lon: lon,
|
| 241 |
-
radius: explorationRadius,
|
| 242 |
limit: explorationLimit
|
| 243 |
}),
|
| 244 |
});
|
|
@@ -979,12 +979,12 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
|
|
| 979 |
|
| 980 |
<div>
|
| 981 |
<label style={{ fontWeight: 500, marginBottom: 8, display: 'block' }}>
|
| 982 |
-
Search Radius (
|
| 983 |
</label>
|
| 984 |
<input
|
| 985 |
type="range"
|
| 986 |
-
min="
|
| 987 |
-
max="
|
| 988 |
value={explorationRadius}
|
| 989 |
onChange={(e) => setExplorationRadius(parseInt(e.target.value))}
|
| 990 |
style={{ width: '100%' }}
|
|
@@ -998,12 +998,12 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
|
|
| 998 |
}}>
|
| 999 |
<input
|
| 1000 |
type="number"
|
| 1001 |
-
min="
|
| 1002 |
-
max="
|
| 1003 |
value={explorationRadius}
|
| 1004 |
onChange={(e) => {
|
| 1005 |
const value = parseInt(e.target.value);
|
| 1006 |
-
if (value >=
|
| 1007 |
setExplorationRadius(value);
|
| 1008 |
}
|
| 1009 |
}}
|
|
@@ -1015,7 +1015,7 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
|
|
| 1015 |
textAlign: 'center'
|
| 1016 |
}}
|
| 1017 |
/>
|
| 1018 |
-
<span>
|
| 1019 |
</div>
|
| 1020 |
</div>
|
| 1021 |
|
|
|
|
| 83 |
const [countryBorders, setCountryBorders] = useState(null);
|
| 84 |
|
| 85 |
const [explorationMode, setExplorationMode] = useState(false);
|
| 86 |
+
const [explorationRadius, setExplorationRadius] = useState(10);
|
| 87 |
const [explorationLimit, setExplorationLimit] = useState(10);
|
| 88 |
const [explorationMarkers, setExplorationMarkers] = useState([]);
|
| 89 |
const [explorationSidebarOpen, setExplorationSidebarOpen] = useState(false);
|
|
|
|
| 238 |
body: JSON.stringify({
|
| 239 |
lat: lat,
|
| 240 |
lon: lon,
|
| 241 |
+
radius: explorationRadius*1000,
|
| 242 |
limit: explorationLimit
|
| 243 |
}),
|
| 244 |
});
|
|
|
|
| 979 |
|
| 980 |
<div>
|
| 981 |
<label style={{ fontWeight: 500, marginBottom: 8, display: 'block' }}>
|
| 982 |
+
Search Radius (km):
|
| 983 |
</label>
|
| 984 |
<input
|
| 985 |
type="range"
|
| 986 |
+
min="1"
|
| 987 |
+
max="10"
|
| 988 |
value={explorationRadius}
|
| 989 |
onChange={(e) => setExplorationRadius(parseInt(e.target.value))}
|
| 990 |
style={{ width: '100%' }}
|
|
|
|
| 998 |
}}>
|
| 999 |
<input
|
| 1000 |
type="number"
|
| 1001 |
+
min="1"
|
| 1002 |
+
max="10"
|
| 1003 |
value={explorationRadius}
|
| 1004 |
onChange={(e) => {
|
| 1005 |
const value = parseInt(e.target.value);
|
| 1006 |
+
if (value >= 1 && value <= 10) {
|
| 1007 |
setExplorationRadius(value);
|
| 1008 |
}
|
| 1009 |
}}
|
|
|
|
| 1015 |
textAlign: 'center'
|
| 1016 |
}}
|
| 1017 |
/>
|
| 1018 |
+
<span>km</span>
|
| 1019 |
</div>
|
| 1020 |
</div>
|
| 1021 |
|