weird zoom bug

2021-07-14 17:09:17 -07:00
parent c0a11de056
commit 1bb679a3f8
6 changed files with 179 additions and 64 deletions
--- a/src/components/VehicleMap/index.jsx
+++ b/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;