Merge branch 'release/0.9.0'

src/components/VehicleMap/index.jsx

@@ -6,11 +6,13 @@ import useStyles from "../useStyles";
 
 import GrayMarkerIcon from "../../assets/gray-marker.png";
 import GreenMarkerIcon from "../../assets/green-marker.png";
+import { DropDownList } from "../Controls/DropDownList";
 import { logger } from "../../services/monitoring";
 import { ValidateLocationData } from "../../utils/locations";
 import { useUserContext } from "../Contexts/UserContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
+import zoomLocations from './zoomLocations.json';
 
 const Component = () => {
   const classes = useStyles();
@@ -60,17 +62,10 @@ const Component = () => {
   };
 
   const centerAroundMarkers = (points) => {
-    // if (markers == null) {
-    //   markers = []
-    // }
-    // const coord = markers.reduce((coord, marker) => {
-    //   coord[0] += marker[0] / markers.length;
-    //   coord[1] += marker[1] / markers.length;
-    //   return coord;
-    // }, [0, 0])
-
-    setCenter([37.0902, -95.7129]);
-    setZoom(4.5);
+    let defaultLocationJSON = process.env.REACT_APP_HOME_MAP_DEFAULT_LOCATION;
+    let defaultLocation = JSON.parse(defaultLocationJSON)
+    setCenter([defaultLocation.lat, defaultLocation.lng]);
+    setZoom(defaultLocation.zoom);
   };
 
   useEffect(() => {
@@ -109,6 +104,12 @@ const Component = () => {
     setSelectedVIN(vin);
   };
 
+  const focusMap = (e) => {
+    let zoomLocation = JSON.parse(e.target.value)
+    setCenter(zoomLocation.center);
+    setZoom(zoomLocation.zoom)
+  }
+
   const retrieveAndStoreCarState = (vin) => {
     getState(token, vin).then((results) => {
       setCarState({ ...results.data, vin: vin });
@@ -143,55 +144,58 @@ const Component = () => {
   }
 
   return (
-    <MapContainer
-      center={center}
-      zoom={zoom}
-      style={{
-        width: "100%",
-        height: "900px",
-      }}
-    >
-      <TileLayer
-        attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-      />
-      <CenterFocus center={center} zoom={zoom} />
-      {markers.map((marker) => (
-        <Marker
-          icon={getCarIcon(marker[2])}
-          key={marker[2]}
-          position={[marker[0], marker[1]]}
-          title={marker[2]}
-          opacity={0.9}
-          zIndexOffset={getZIndex(marker[2])}
-        >
-          <Popup>
-            <div align="center">
-              <p className={classes.markerTitle}>
-                <b>{marker[2]}</b>
-              </p>
-              <Button
-                type="submit"
-                variant="contained"
-                color="primary"
-                onClick={(e) => selectCar(e, marker[2])}
-              >
-                View Stats
-              </Button>
-            </div>
-          </Popup>
-        </Marker>
-      ))}
-
-      {carState ? (
-        <VehiclePopUp
-          key={carState.vin}
-          {...carState}
-          className={classes.popup}
-          onClose={handleClose}
+    <>
+      <DropDownList label="Zoom To" data={zoomLocations} classes={classes} onChange={focusMap} />
+      <MapContainer
+        center={center}
+        zoom={zoom}
+        style={{
+          width: "100%",
+          height: "900px",
+        }}
+      >
+        <TileLayer
+          attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
-      ) : null}
-    </MapContainer>
+        <CenterFocus center={center} zoom={zoom} />
+        {markers.map((marker) => (
+          <Marker
+            icon={getCarIcon(marker[2])}
+            key={marker[2]}
+            position={[marker[0], marker[1]]}
+            title={marker[2]}
+            opacity={0.9}
+            zIndexOffset={getZIndex(marker[2])}
+          >
+            <Popup>
+              <div align="center">
+                <p className={classes.markerTitle}>
+                  <b>{marker[2]}</b>
+                </p>
+                <Button
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  onClick={(e) => selectCar(e, marker[2])}
+                >
+                  View Stats
+                </Button>
+              </div>
+            </Popup>
+          </Marker>
+        ))}
+
+        {carState ? (
+          <VehiclePopUp
+            key={carState.vin}
+            {...carState}
+            className={classes.popup}
+            onClose={handleClose}
+          />
+        ) : null}
+      </MapContainer>
+    </>
   );
 };
 

src/components/VehicleMap/zoomLocations.json

@@ -0,0 +1,26 @@
+[
+  {
+    "value": "{ \"center\": [37.0902, -95.7129], \"zoom\": 4.5 }",
+    "label": "North America"
+  },
+  {
+    "value": "{ \"center\": [33.8463, -118.0461], \"zoom\": 10 }",
+    "label": "- La Palma"
+  },
+  {
+    "value": "{ \"center\": [33.8847, -118.4109], \"zoom\": 10 }",
+    "label": "- Manhattan Beach"
+  },
+  {
+    "value": "{ \"center\": [37.7749, -122.4194], \"zoom\": 10 }",
+    "label": "- San Francisco"
+  },
+  {
+    "value": "{ \"center\": [49.8327, 9.8816], \"zoom\": 4.5 }",
+    "label": "Europe"
+  },
+  {
+    "value": "{ \"center\": [47.0707, 15.4395], \"zoom\": 10 }",
+    "label": "- Graz"
+  }
+]