Implementing a dynamic map in the round end screen

client/src/App.css

@@ -198,7 +198,8 @@
 }
 
 .round-summary__map {
-  display: inline;
+  height: 50%;
+  width: 50%;
 }
 
 .round-summary__guess {

client/src/assets/checkered-flag.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M466.515 66.928C487.731 57.074 512 72.551 512 95.944v243.1c0 10.526-5.161 20.407-13.843 26.358-35.837 24.564-74.335 40.858-122.505 40.858-67.373 0-111.63-34.783-165.217-34.783-50.853 0-86.124 10.058-114.435 22.122V488c0 13.255-10.745 24-24 24H56c-13.255 0-24-10.745-24-24V101.945C17.497 91.825 8 75.026 8 56 8 24.296 34.345-1.254 66.338.048c28.468 1.158 51.779 23.968 53.551 52.404.52 8.342-.81 16.31-3.586 23.562C137.039 68.384 159.393 64 184.348 64c67.373 0 111.63 34.783 165.217 34.783 40.496 0 82.612-15.906 116.95-31.855zM96 134.63v70.49c29-10.67 51.18-17.83 73.6-20.91v-71.57c-23.5 2.17-40.44 9.79-73.6 21.99zm220.8 9.19c-26.417-4.672-49.886-13.979-73.6-21.34v67.42c24.175 6.706 47.566 16.444 73.6 22.31v-68.39zm-147.2 40.39v70.04c32.796-2.978 53.91-.635 73.6 3.8V189.9c-25.247-7.035-46.581-9.423-73.6-5.69zm73.6 142.23c26.338 4.652 49.732 13.927 73.6 21.34v-67.41c-24.277-6.746-47.54-16.45-73.6-22.32v68.39zM96 342.1c23.62-8.39 47.79-13.84 73.6-16.56v-71.29c-26.11 2.35-47.36 8.04-73.6 17.36v70.49zm368-221.6c-21.3 8.85-46.59 17.64-73.6 22.47v71.91c27.31-4.36 50.03-14.1 73.6-23.89V120.5zm0 209.96v-70.49c-22.19 14.2-48.78 22.61-73.6 26.02v71.58c25.07-2.38 48.49-11.04 73.6-27.11zM316.8 212.21v68.16c25.664 7.134 46.616 9.342 73.6 5.62v-71.11c-25.999 4.187-49.943 2.676-73.6-2.67z"/></svg>
+<!--
+Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

client/src/assets/question-mark.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="54.1866mm" height="40.64mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 54.1866 40.64" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#2B2A29;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M29.898 26.5722l-4.3921 0c-0.0118,-0.635 -0.0177,-1.0172 -0.0177,-1.1583 0,-1.4229 0.2352,-2.5929 0.7056,-3.5102 0.4704,-0.9231 1.417,-1.952 2.8281,-3.1044 1.4111,-1.1465 2.2578,-1.8991 2.5282,-2.2578 0.4292,-0.5585 0.6409,-1.1818 0.6409,-1.8579 0,-0.9408 -0.3763,-1.7463 -1.1289,-2.4224 -0.7526,-0.6703 -1.7639,-1.0054 -3.0397,-1.0054 -1.2289,0 -2.2578,0.3527 -3.0868,1.0524 -0.8232,0.6997 -1.3935,1.7698 -1.7051,3.2044l-4.4391 -0.5527c0.1234,-2.0578 0.9995,-3.8041 2.6223,-5.2387 1.6286,-1.4346 3.757,-2.152 6.4029,-2.152 2.7752,0 4.9859,0.7291 6.6322,2.1814 1.6404,1.4522 2.4635,3.1397 2.4635,5.0741 0,1.0642 -0.3057,2.0755 -0.9054,3.028 -0.6056,0.9525 -1.8933,2.2519 -3.8688,3.8923 -1.0231,0.8525 -1.6581,1.5346 -1.905,2.052 -0.2469,0.5174 -0.3587,1.4405 -0.3351,2.7752zm-4.3921 6.5087l0 -4.8389 4.8389 0 0 4.8389 -4.8389 0z"/>
+ </g>
+</svg>

client/src/components/screens/RoundSummary.jsx

@@ -1,9 +1,66 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ClickToCopy from "../util/ClickToCopy";
 import Button from "../util/Button";
+import useMap from "../../hooks/useMap";
+import flag from "../../assets/checkered-flag.svg";
+import question from "../../assets/question-mark.svg";
+/* global google */
 
 // TODO eventually we want this to query and show other players
 
+const useMarkedPoints = (mapRef, selectedPoint, targetPoint) => {
+  useEffect(() => {
+    mapRef.current.panTo(targetPoint);
+    mapRef.current.setZoom(4);
+
+    const selectedMarker = new google.maps.Marker({ 
+      map: mapRef.current,
+      position: selectedPoint,
+      title: "Selected",
+      icon: {
+        url: question,
+        scaledSize: new google.maps.Size(64, 64),
+        origin: new google.maps.Point(0, 0),
+        anchor: new google.maps.Point(32, 48),
+      },
+    });
+
+    const targetMarker = new google.maps.Marker({ 
+      map: mapRef.current,
+      position: targetPoint,
+      title: "Goal",
+      icon: {
+        url: flag,
+        scaledSize: new google.maps.Size(32, 32),
+        origin: new google.maps.Point(0, 0),
+        anchor: new google.maps.Point(4, 32),
+      },
+    });
+
+    const line = new google.maps.Polyline({
+      path: [ selectedPoint, targetPoint ],
+      strokeColor: "#333333",
+      strokeOpacity: 0,
+      icons: [{
+        icon: {
+          path: 'M 0,-1 0,1',
+          strokeOpacity: 1,
+          scale: 4
+        },
+        offset: '0',
+        repeat: '20px'
+      }],
+      map: mapRef.current
+    });
+
+    return () => { 
+      line.setMap(null); 
+      targetMarker.setMap(null);
+      selectedMarker.setMap(null);
+    }
+  }, [mapRef, selectedPoint, targetPoint]);
+}
+
 export default ({ round, onNext }) => {
   const {
     roundNum,
@@ -12,21 +69,12 @@ export default ({ round, onNext }) => {
     score,
     totalScore,
   } = round;
-  // TODO determine zoom and center dynamically, or make this a dynamic map
-  const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?key=AIzaSyCDtEWf192OYuMvd2cp8a04DYQo-RU_sXs`;
-  const size = `&size=600x400`
-  const zoom = `&zoom=5`;
-  const centerOnTarget = `&center=${targetPoint.lat},${targetPoint.lng}`;
-  const targetMarker = `&markers=color:blue|label:T|${targetPoint.lat},${targetPoint.lng}`;
-  const selectedMarker = selectedPoint ? `&markers=color:red|label:S|${selectedPoint.lat},${selectedPoint.lng}` : ""
+  const [mapDivRef, mapRef] = useMap();
+  useMarkedPoints(mapRef, selectedPoint, targetPoint);
 
   return (
     <div className="round-summary">
-      <img
-        className="round-summary__map"
-        src={mapUrl + size + zoom + centerOnTarget + targetMarker + selectedMarker}
-        alt={`Map pointing to ${targetPoint.lat},${targetPoint.lng}`}
-      />
+      <div className="round-summary__map"><div className="map-div" ref={mapDivRef} /></div>
       <div className="round-summary__info-pane">
         {selectedPoint 
           ? <span className="round-summary__guess">