admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CEC-4301 - Revise home map zoom to (#333)

Browse Source
This commit is contained in:
Paul Adamsen
2023-05-16 15:44:55 -04:00
committed by GitHub
parent a8972e2f11
commit 6842fb69a0
3 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/App/__snapshots__/App.test.js.snap
View File

@@ -497,17 +497,17 @@ exports[`App Route / authenticated 1`] = `
North America North America
</option> </option>
<option <option
value="{ \\"center\\": [33.8463, -118.0461], \\"zoom\\": 10 }" value="{ \\"center\\": [33.8623, -118.0295], \\"zoom\\": 14 }"
> >
- La Palma - La Palma
</option> </option>
<option <option
value="{ \\"center\\": [33.8847, -118.4109], \\"zoom\\": 10 }" value="{ \\"center\\": [33.9021, -118.3792], \\"zoom\\": 14 }"
> >
- Manhattan Beach - Manhattan Beach
</option> </option>
<option <option
value="{ \\"center\\": [37.7749, -122.4194], \\"zoom\\": 10 }" value="{ \\"center\\": [37.7637, -122.4197], \\"zoom\\": 14 }"
> >
- San Francisco - San Francisco
</option> </option>
@@ -517,7 +517,7 @@ exports[`App Route / authenticated 1`] = `
Europe Europe
</option> </option>
<option <option
value="{ \\"center\\": [47.0707, 15.4395], \\"zoom\\": 10 }" value="{ \\"center\\": [47.0221, 15.4774], \\"zoom\\": 14 }"
> >
- Graz - Graz
</option> </option>
@@ -1894,17 +1894,17 @@ exports[`App Route /home authenticated 1`] = `
North America North America
</option> </option>
<option <option
value="{ \\"center\\": [33.8463, -118.0461], \\"zoom\\": 10 }" value="{ \\"center\\": [33.8623, -118.0295], \\"zoom\\": 14 }"
> >
- La Palma - La Palma
</option> </option>
<option <option
value="{ \\"center\\": [33.8847, -118.4109], \\"zoom\\": 10 }" value="{ \\"center\\": [33.9021, -118.3792], \\"zoom\\": 14 }"
> >
- Manhattan Beach - Manhattan Beach
</option> </option>
<option <option
value="{ \\"center\\": [37.7749, -122.4194], \\"zoom\\": 10 }" value="{ \\"center\\": [37.7637, -122.4197], \\"zoom\\": 14 }"
> >
- San Francisco - San Francisco
</option> </option>
@@ -1914,7 +1914,7 @@ exports[`App Route /home authenticated 1`] = `
Europe Europe
</option> </option>
<option <option
value="{ \\"center\\": [47.0707, 15.4395], \\"zoom\\": 10 }" value="{ \\"center\\": [47.0221, 15.4774], \\"zoom\\": 14 }"
> >
- Graz - Graz
</option> </option>

19
src/components/VehicleMap/index.jsx
View File

@@ -12,6 +12,7 @@ import { ValidateLocationData } from "../../utils/locations";
import { useUserContext } from "../Contexts/UserContext"; import { useUserContext } from "../Contexts/UserContext";
import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext"; import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
import { VehiclePopUp } from "./popup"; import { VehiclePopUp } from "./popup";
import { useLocalStorage } from "../useLocalStorage";
import zoomLocations from './zoomLocations.json'; import zoomLocations from './zoomLocations.json';
const Component = () => { const Component = () => {
@@ -29,6 +30,7 @@ const Component = () => {
const [zoom, setZoom] = useState(2); const [zoom, setZoom] = useState(2);
const [markers, setMarkers] = useState([]); const [markers, setMarkers] = useState([]);
const [connections, setConnections] = useState({}); const [connections, setConnections] = useState({});
const [lastMapCenter, setLastMapCenter] = useLocalStorage("MAP_CENTER", "");
useEffect(() => { useEffect(() => {
if (!token) return; if (!token) return;
@@ -62,10 +64,16 @@ const Component = () => {
}; };
const centerAroundMarkers = (points) => { const centerAroundMarkers = (points) => {
let defaultLocationJSON = process.env.REACT_APP_HOME_MAP_DEFAULT_LOCATION; if (lastMapCenter) {
let defaultLocation = JSON.parse(defaultLocationJSON) let zoomLocation = JSON.parse(lastMapCenter)
setCenter([defaultLocation.lat, defaultLocation.lng]); setCenter(zoomLocation.center);
setZoom(defaultLocation.zoom); setZoom(zoomLocation.zoom)
} else {
let defaultLocationJSON = process.env.REACT_APP_HOME_MAP_DEFAULT_LOCATION;
let defaultLocation = JSON.parse(defaultLocationJSON)
setCenter([defaultLocation.lat, defaultLocation.lng]);
setZoom(defaultLocation.zoom);
}
}; };
useEffect(() => { useEffect(() => {
@@ -105,6 +113,7 @@ const Component = () => {
}; };
const focusMap = (e) => { const focusMap = (e) => {
setLastMapCenter(e.target.value)
let zoomLocation = JSON.parse(e.target.value) let zoomLocation = JSON.parse(e.target.value)
setCenter(zoomLocation.center); setCenter(zoomLocation.center);
setZoom(zoomLocation.zoom) setZoom(zoomLocation.zoom)
@@ -145,7 +154,7 @@ const Component = () => {
return ( return (
<> <>
<DropDownList label="Zoom To" data={zoomLocations} classes={classes} onChange={focusMap} /> <DropDownList label="Zoom To" data={zoomLocations} classes={classes} onChange={focusMap} value={lastMapCenter} />
<MapContainer <MapContainer
center={center} center={center}
zoom={zoom} zoom={zoom}

8
src/components/VehicleMap/zoomLocations.json
View File

@@ -4,15 +4,15 @@
"label": "North America" "label": "North America"
}, },
{ {
"value": "{ \"center\": [33.8463, -118.0461], \"zoom\": 10 }", "value": "{ \"center\": [33.8623, -118.0295], \"zoom\": 14 }",
"label": "- La Palma" "label": "- La Palma"
}, },
{ {
"value": "{ \"center\": [33.8847, -118.4109], \"zoom\": 10 }", "value": "{ \"center\": [33.9021, -118.3792], \"zoom\": 14 }",
"label": "- Manhattan Beach" "label": "- Manhattan Beach"
}, },
{ {
"value": "{ \"center\": [37.7749, -122.4194], \"zoom\": 10 }", "value": "{ \"center\": [37.7637, -122.4197], \"zoom\": 14 }",
"label": "- San Francisco" "label": "- San Francisco"
}, },
{ {
@@ -20,7 +20,7 @@
"label": "Europe" "label": "Europe"
}, },
{ {
"value": "{ \"center\": [47.0707, 15.4395], \"zoom\": 10 }", "value": "{ \"center\": [47.0221, 15.4774], \"zoom\": 14 }",
"label": "- Graz" "label": "- Graz"
} }
] ]