Add location on map finder

src/components/Map.js

@@ -25,11 +25,113 @@ const Empty = (
 const Loading = <CircularProgress />;
 const Error = (error: string) => <div>{error}</div>;
 
-const handleSubmit = event => {
-  event.preventDefault();
+// borders for the map
+const BryantLatitude = 37.36132515401568;
+const OakLatitude = 37.35678726844796;
+const TrumanLongitude = -122.06870514131386;
+const SoftballLongitude = -122.06433631650839;
+
+const locationToPixels = (latitude, longitude) => {
+  let canvas = document.getElementById('map');
+  let LatitudePixelConstant = Math.abs(
+    (OakLatitude - BryantLatitude) / canvas.width
+  );
+  let LongitudePixelConstant = Math.abs(
+    (TrumanLongitude - SoftballLongitude) / canvas.height
+  );
+  let x = (latitude - BryantLatitude) / LatitudePixelConstant;
+  let y = (longitude - SoftballLongitude) / LongitudePixelConstant;
+  return [Math.abs(Math.round(x)), Math.abs(Math.round(y))];
+};
+
+const geolocation = () => {
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(
+      position => {
+        let canvas = document.getElementById('map');
+        let ctx = canvas.getContext('2d');
+        // draw map
+        let img = new Image();
+        img.src = map;
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          let pixels = locationToPixels(
+            position.coords.latitude,
+            position.coords.longitude
+          );
+          let x = pixels[0];
+          let y = pixels[1];
+          if (
+            x > canvas.width + 100 ||
+            y > canvas.height - 100 ||
+            x < -100 ||
+            y < -100
+          ) {
+            document.getElementById('result').innerHTML =
+              "Your location can't be placed on the map. Tip: If you're actually at school, try using a mobile device. They tend to have better location information";
+            return;
+          }
+          let radius;
+          if (position.coords.accuracy < 100) {
+            // this time its accurate
+            let LatitudePixelConstant = Math.abs(
+              (OakLatitude - BryantLatitude) / canvas.width
+            );
+            let LongitudePixelConstant = Math.abs(
+              (TrumanLongitude - SoftballLongitude) / canvas.height
+            );
+            radius = position.coords.accuracy / 111111;
+            let radiusX = radius / LatitudePixelConstant;
+            let radiusY = radius / LongitudePixelConstant;
+            radius = Math.max(radiusX, radiusY);
+          } else {
+            radius = 200;
+            document.getElementById('result').innerHTML =
+              'Your location is inaccurate (accuracy > 100m). Circle may be completely wrong. Tip: Try using a mobile device. They tend to have better location information';
+          }
+          console.log(radius);
+          ctx.beginPath();
+          ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+          ctx.lineWidth = 5;
+          ctx.strokeStyle = '#003300';
+          ctx.stroke();
+
+          ctx.beginPath();
+          ctx.arc(x, y, 5, 0, 2 * Math.PI, false);
+          ctx.lineWidth = 5;
+          ctx.fillStyle = '#FF0000';
+          ctx.fill();
+        };
+      },
+      error => {
+        document.getElementById('result').innerHTML =
+          "Your computer isn't able to use Geolocation.";
+      },
+      { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 }
+    );
+  } else {
+    document.getElementById('result').innerHTML =
+      "Your computer isn't able to use Geolocation.";
+  }
+};
+
+const loadImage = () => {
+  // makes canvas the size of the map
+  let canvas = document.getElementById('map');
+  let ctx = canvas.getContext('2d');
+  let img = new Image();
+  img.onload = () => {
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = map;
 };
 
 const Map = (props: Props) => {
+  try {
+    loadImage(); // bad hack to force the image to load whether or not onload is called
+  } catch (e) {}
   /* commenting out search
     return (
       <div>
@@ -80,7 +182,19 @@ const Map = (props: Props) => {
   return (
     <div className="map-container">
       <center>
-        <img alt="map" className="map" src={map} />
+        <button
+          onClick={geolocation}
+          style={{
+            backgroundColor: '#ffc107',
+            borderRadius: '2px',
+            border: 'none'
+          }}
+        >
+          Click to locate yourself (mobile devices strongly recommended)
+        </button>
+        <br />
+        <p id="result" />
+        <canvas id="map" />
       </center>
     </div>
   );