Implemented position reset button

client/src/components/maps/positioned-street-view.component.jsx

@@ -3,6 +3,7 @@ import React, { useRef, useEffect } from "react";
 
 export default React.memo(({ position }) => {
   const panoDivRef = useRef(null);
+  const buttonRef = useRef(null);
   useEffect(() => {
     const pano = new google.maps.StreetViewPanorama(panoDivRef.current, {
       position,
@@ -12,13 +13,35 @@ export default React.memo(({ position }) => {
       visible: true,
     });
     console.log("Created Street View Pano");
-    
+    console.log("Setting up reset button");
+    buttonRef.current.onclick = () => pano.setPosition(position);
   });
 
   return (
-    <div
-      style={{ height: "100%" }}
-      ref={panoDivRef}
-    />
+    <div style={{ height: "100%", position: "relative" }}>
+      <div
+        style={{ height: "100%" }}
+        ref={panoDivRef}
+      />
+      <div 
+        // TODO this styling is very brittle
+        style={{ 
+          display: "block",
+          position: "absolute",
+          zIndex: 1,
+          bottom: "200px",
+          right: "9px",
+          background: "#2a2a2a",
+          color: "#9a9a9a",
+          padding: "5px",
+          borderRadius: "2px",
+          fontWeight: "bold",
+          cursor: "pointer",
+        }}
+        ref={buttonRef}
+      >
+        Reset
+      </div>
+    </div>
   );
 });