DebasishDhal99 commited on
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

Files changed (1) hide show
  1. frontend/src/components/Map.js +9 -9
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(10000);
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 (meters):
983
  </label>
984
  <input
985
  type="range"
986
- min="10"
987
- max="10000"
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="10"
1002
- max="10000"
1003
  value={explorationRadius}
1004
  onChange={(e) => {
1005
  const value = parseInt(e.target.value);
1006
- if (value >= 10 && value <= 10000) {
1007
  setExplorationRadius(value);
1008
  }
1009
  }}
@@ -1015,7 +1015,7 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
1015
  textAlign: 'center'
1016
  }}
1017
  />
1018
- <span>m</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