From 31202b195099c44d76b1ebf4dd55d5fe24d2da84 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Sat, 6 Aug 2022 10:22:22 -0700
Subject: [PATCH] CEC-2211 online cars z-index (#184)

* CEC-2211 online cars z-index

* clean up
---
 src/components/VehicleMap/index.jsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/VehicleMap/index.jsx b/src/components/VehicleMap/index.jsx
index 5006802..d8ed19e 100644
--- a/src/components/VehicleMap/index.jsx
+++ b/src/components/VehicleMap/index.jsx
@@ -25,6 +25,7 @@ const Component = () => {
   const [center, setCenter] = useState([0, 0]);
   const [zoom, setZoom] = useState(2);
   const [markers, setMarkers] = useState([]);
+  const [connections, setConnections] = useState({});
 
   useEffect(() => {
     if (!token) return;
@@ -71,8 +72,6 @@ const Component = () => {
     setZoom(4.5);
   };
 
-  const [connections, setConnections] = useState({});
-
   useEffect(() => {
     if (!token) return;
     if (markers.length > 0) {
@@ -116,10 +115,19 @@ const Component = () => {
     setCarState(null);
   };
 
+  const isOnline = (vin) => {
+    return connections[vin];
+  };
+
+  const getZIndex = (vin) => {
+    if (isOnline(vin)) return 1000;
+    return 0;
+  };
+
   function getCarIcon(vin) {
     let icon = GrayMarkerIcon;
 
-    if (connections[vin]) {
+    if (isOnline(vin)) {
       icon = GreenMarkerIcon;
     }
 
@@ -151,6 +159,7 @@ const Component = () => {
           position={[marker[0], marker[1]]}
           title={marker[2]}
           opacity={0.9}
+          zIndexOffset={getZIndex(marker[2])}
         >
           <Popup>
             <div align="center">