weird zoom bug

src/components/Contexts/VehicleContext.jsx

@@ -137,6 +137,18 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
+  const getState = async (token, vin) => {
+    try {
+      setBusy(true);
+      const result = await api.getState(token, vin);
+      if (result.error)
+        throw new Error(`Get state error. ${result.message}`);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <VehicleContext.Provider
       value={{
@@ -152,6 +164,7 @@ export const VehicleProvider = ({ children }) => {
         sendCommand,
         getConnections,
         getLocations,
+        getState,
       }}
     >
       {children}

src/components/Home/index.jsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { Typography } from "@material-ui/core";
 import useStyles from "../useStyles";
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
 
 import { useUserContext } from "../Contexts/UserContext";
 import { useStatusContext } from "../Contexts/StatusContext";
-import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { parsePayload } from "../../utils/jwt";
-import { VehicleMap } from "../VehicleMap";
+import VehicleMap from "../VehicleMap";
 
 const DEFAULT_GREETING = "Welcome";
 
@@ -22,44 +20,17 @@ const getGreeting = (token) => {
   return `Welcome ${payload.given_name}!`;
 };
 
-const MainForm = () => {
+const Home = () => {
   const classes = useStyles();
   const { token } = useUserContext();
   const greeting = getGreeting(token);
   const { setTitle } = useStatusContext();
-  const { getLocations } = useVehicleContext();
+
 
   useEffect(() => {
     setTitle("");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
-  const position = [37.76405462601394, -122.41375345900552];
-  const [markers, setMarkers] = useState([]);
-
-  useEffect(() => {
-    var now = new Date();
-    var timeStart = Math.round(now.getTime() / 1000) - 60 * 60 * 24;
-
-    getLocations(token)
-      .then((result) => console.log(result));
-
-    // var queryPath = `api/datasources/proxy/2/?query=SELECT%0A%20%20%20%20t1.timestamp%20as%20%22timestamp%22%2C%0A%20%20%20%20t1.vin%20as%20%22vin%22%2C%0A%20%20%20%20t1.value%20as%20%22lat%22%2C%0A%20%20%20%20t2.value%20as%20%22lon%22%2C%0A%20%20%20%20t3.value%20as%20%22alt%22%0AFROM%20default.vehicle_signal%20t1%0A%0AJOIN%20default.vehicle_signal%20t2%0A%20%0A%20ON%20%20t1.timestamp%3Dt2.timestamp%20AND%20t1.vin%3Dt2.vin%0A%0AJOIN%20default.vehicle_signal%20t3%0A%20%0A%20ON%20%20t1.timestamp%3Dt3.timestamp%20AND%20t1.vin%3Dt3.vin%0A%0AJOIN%0A(%0A%20%20%20%20SELECT%0A%20%20%20%20%20%20%20%20vin%2C%0A%20%20%20%20%20%20%20%20MAX(timestamp)%20as%20%22timestamp%22%0A%20%20%20%20FROM%20default.vehicle_signal%0A%0A%20%20%20%20GROUP%20BY%20vin%0A%0A)%20%20mostRecent%0A%20ON%20%20t1.timestamp%3DmostRecent.timestamp%20AND%20t1.vin%3DmostRecent.vin%0A%0AWHERE%0A%20%20%20%20toDateTime64(timestamp%2C%203)%20%3E%3D%20toDateTime64(${timeStart}%2C%203)%0A%20%20%20%20AND%20t1.name%20%3D%20'EHU_GPSLati'%0A%20%20%20%20AND%20t2.name%20%3D%20'EHU_GPSLongi'%0A%20%20%20%20AND%20t3.name%20%3D%20'EHU_GPSHei'%20FORMAT%20JSON`
-    // var TIMEOUT = 10000
-
-    // const interval = setInterval(() => {
-    // fetch(`https://grafana.fiskerdps.com/${queryPath}`)
-    //   .then(response => response.json())
-    //   .then(payload => {
-    //     console.log(payload.data)
-    //     setMarkers(payload.data.filter((coord) => [coord.lat, coord.lon]))
-    //   })
-    //   .then(() => console.log(markers));
-    //   console.log("hit interval");
-    // }, TIMEOUT);
-
-  }, []);
-
   return (
     <div className={classes.paper}>
       <Typography component="h1" variant="h5">
@@ -67,39 +38,9 @@ const MainForm = () => {
       </Typography>
 
       <br />
-
+      <VehicleMap />
-      <MapContainer
-        center={position}
-        zoom={13}
-        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"
-        />
-        {
-          markers.map((position) => {
-            return (
-              <Marker position={position}>
-                <Popup>
-                  VIN123 <br /> Stat1 <br /> Stat2 <br /> Stat 3
-                </Popup>
-              </Marker>
-            )
-          })
-        }
-      </MapContainer>
     </div>
   );
 };
 
-const Home = () => (
-  <VehicleProvider>
-    <MainForm />
-  </VehicleProvider>
-);
-
 export default Home;

src/components/Routes/SiteRoutes.jsx

@@ -19,7 +19,6 @@ const CarUpdates = React.lazy(() => import("../Cars/Status"));
 const VehiclesList = React.lazy(() => import("../Cars/List"));
 const SendCommandBulk = React.lazy(() => import("../Cars/SendCommandBulk"));
 const Dashboard = React.lazy(() => import("../Dashboard"));
-const VehicleMap = React.lazy(() => import("../VehicleMap"))
 
 const SiteRoutes = () => {
   const { token, groups } = useUserContext();

src/components/VehicleMap/index.jsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from "react";
+import useStyles from "../useStyles";
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet'
+
+import { useUserContext } from "../Contexts/UserContext";
+import { useStatusContext } from "../Contexts/StatusContext";
+import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
+import { VehiclePopUp } from "./popup";
+
+const Component = () => {
+  const classes = useStyles();
+  const { token } = useUserContext();
+  const { setTitle } = useStatusContext();
+  const { getLocations, getState } = useVehicleContext();
+
+  useEffect(() => {
+    setTitle("");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [center, setCenter] = useState([0, 0])
+  const [zoom, setZoom] = useState(2);
+  const [markers, setMarkers] = useState([]);
+
+  const retrieveLocations = () => {
+    return getLocations(token)
+      .then((result) => {
+        var points = result.data.map(point => [point.latitude, point.longitude, point.vin]);
+        setMarkers(points);
+        console.log(points);
+        return points
+      })
+      .catch(() => console.log("token error"));
+  }
+
+  const centerAroundMarkers = (markers) => {
+    var coord = markers.reduce((coord, marker) => {
+      coord[0] += marker[0] / markers.length;
+      coord[1] += marker[1] / markers.length;
+      return coord;
+    }, [0, 0])
+
+    console.log(coord);
+    setCenter(coord);
+    setZoom(4);
+  }
+
+  useEffect(() => {
+    retrieveLocations()
+      .then(points => {
+        centerAroundMarkers(points);
+      })
+  }, []);
+
+  useEffect(() => {
+    const id = setInterval(function () {
+      retrieveLocations();
+    }, 10000)
+    return () => { clearInterval(id) }
+  }, []);
+
+  const retrieveState = (e) => {
+    var vin = e.target.options.title;
+    getState(token, vin)
+      .then(results => {
+        console.log(results);
+        setSelected({ ...results.data, vin: vin });
+      });
+  }
+
+  const [selected, setSelected] = useState(null);
+
+  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"
+      />
+      <ChangeView center={center} zoom={zoom} />
+
+      {
+        markers.map((marker) => (
+          <Marker
+            key={marker[2]}
+            position={[marker[0], marker[1]]}
+            title={marker[2]}
+            opacity={0.9}
+            eventHandlers={{
+              click: retrieveState
+            }}
+          >
+            <Popup>
+              {marker[2]} <br /> see more
+            </Popup>
+          </Marker>
+        ))
+      }
+
+      {
+        selected != null && (
+          <VehiclePopUp
+            vin={selected.vin}
+            online={selected.online}
+            doors={selected.doors}
+            location={selected.location}
+            windows={selected.windows}
+          />
+        )
+      }
+    </MapContainer >
+  );
+};
+
+const ChangeView = ({ center, zoom }) => {
+  const map = useMap();
+  map.flyTo(center, zoom, { duration: 1.5 });
+  console.log("centered");
+  return null;
+}
+
+const VehicleMap = () => (
+  <VehicleProvider>
+    <Component />
+  </VehicleProvider>
+)
+
+export default VehicleMap;

src/components/VehicleMap/popup.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+const VehiclePopUp = ({ vin, online, doors, location, windows }) => {
+    console.log(location);
+    return (
+        <Dialog aria-labelledby="simple-dialog-title" open={true}>
+            <DialogTitle>{vin}</DialogTitle>
+            <p>{online.toString()}</p>
+            {/* {doors != null && (
+                <ul>
+                    {doors.forEach((value, key) => (<li>{key}: {value.toString()}</li>))}
+                </ul>
+            )}
+            <ul>
+                {location != null && location.forEach((value, key) => (<li>{key}: {value.toString()}</li>))}
+            </ul> */}
+        </Dialog>
+    );
+};
+
+export { VehiclePopUp };

src/services/vehicles.js

@@ -55,6 +55,11 @@ const vehiclesAPI = {
   })
     .then(fetchRespHandler),
 
+  getState: async (token, vin) => fetch(`${API_ENDPOINT}/carstate?vin=${vin}`, {
+    method: "GET",
+    headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+  })
+    .then(fetchRespHandler),
 };
 
 export default vehiclesAPI;