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 |
|