Map component

package.json

@@ -44,14 +44,17 @@
   },
   "devDependencies": {
     "gh-pages": "^3.2.3",
+    "google-map-react": "^2.1.10",
     "husky": "^7.0.4",
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "react-google-charts": "^3.0.15",
     "react-responsive-modal": "^6.2.0",
     "react-router": "^6.2.1",
     "react-router-dom": "^6.2.1",
+    "supercluster": "^7.1.4",
     "tailwindcss": "^3.0.7",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "use-supercluster": "^0.4.0"
   }
 }

src/App.js

@@ -10,6 +10,7 @@ import MainNav from './components/main-nav';
 import Hero from './components/hero';
 import LiveData from './components/live-data';
 import Footer from './components/footer';
+import Map from './components/map';
 
 // Styles
 import './App.css';
@@ -20,7 +21,7 @@ class App extends React.Component {
       <>
         <Routes>
           <Route exact path="/COVID-app" element={<Home covidData={this.props.covidData} geoLocationData={this.props.geoLocationData} />} />
-          <Route exact path="/COVID-app/map" element={<Map covidData={this.props.covidData} />} />
+          <Route exact path="/COVID-app/map" element={<Map covidData={this.props.covidData} geoLocationData={this.props.geoLocationData} />} />
         </Routes>
       </>
     );
@@ -44,16 +45,3 @@ class Home extends React.Component {
     );
   }
 }
-
-/**
- * Map Component
- */
-class Map extends React.Component {
-  render() {
-    return (
-      <div>
-        <h2>Map</h2>
-      </div>
-    );
-  }
-}

src/components/map/index.js

@@ -0,0 +1,115 @@
+import React, { useState, useRef } from "react";
+import GoogleMapReact from "google-map-react";
+import useSupercluster from "use-supercluster";
+import "./style.css";
+
+const Marker = ({ children }) => children;
+
+export default function Map( props ) {
+  const mapRef = useRef();
+  const [ bounds, setBounds ] = useState( null );
+  const [ zoom, setZoom ] = useState( 10 );
+
+  // Filter countries with no data
+  let filteredCovidData = props.covidData.filter( country => {
+    return ( !! country.confirmed && !! country.critical && !! country.deaths && !! country.recovered );
+  } );
+
+  const points = props.covidData.map( ( country ) => ( {
+    type: "Feature",
+    properties: {
+      cluster: false,
+      countryCode: country.code,
+      country: country.country,
+      confirmed: country.confirmed,
+      recovered: country.recovered,
+      critical: country.critical,
+      deaths: country.deaths
+    },
+    geometry: {
+      type: "Point",
+      coordinates: [
+        parseFloat( country.longitude ),
+        parseFloat( country.latitude )
+      ]
+    }
+  } ) );
+
+  const { clusters, supercluster } = useSupercluster( {
+    points,
+    bounds,
+    zoom,
+    options: { radius: 75, maxZoom: 20 }
+  } );
+
+  return (
+    <div style={{ height: "100vh", width: "100%" }}>
+      <GoogleMapReact
+        bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_KEY }}
+        center={{ lat: props.geoLocationData.latitude, lng: props.geoLocationData.longitude }}
+        defaultZoom={4}
+        yesIWantToUseGoogleMapApiInternals
+        onGoogleApiLoaded={( { map } ) => {
+          mapRef.current = map;
+        }}
+        onChange={( { zoom, bounds } ) => {
+          setZoom( zoom );
+          setBounds( [
+            bounds.nw.lng,
+            bounds.se.lat,
+            bounds.se.lng,
+            bounds.nw.lat
+          ] );
+        }}
+      >
+        { clusters.map( cluster => {
+          const [ longitude, latitude ] = cluster.geometry.coordinates;
+          const {
+            cluster: isCluster,
+            point_count: pointCount
+          } = cluster.properties;
+
+          if ( isCluster ) {
+            return (
+              <Marker
+                key={`cluster-${cluster.id}`}
+                lat={latitude}
+                lng={longitude}
+              >
+                <div
+                  className="cluster-marker"
+                  style={{
+                    width: `${10 + ( pointCount / points.length ) * 20}px`,
+                    height: `${10 + ( pointCount / points.length ) * 20}px`
+                  }}
+                  onClick={() => {
+                    const expansionZoom = Math.min(
+                      supercluster.getClusterExpansionZoom( cluster.id ),
+                      20
+                    );
+                    mapRef.current.setZoom( expansionZoom );
+                    mapRef.current.panTo( { lat: latitude, lng: longitude } );
+                  }}
+                >
+                  {pointCount}
+                </div>
+              </Marker>
+            );
+          }
+
+          return (
+            <Marker
+              key={`covid-${cluster.properties.countryCode}`}
+              lat={latitude}
+              lng={longitude}
+            >
+              <button className="covid-marker">
+                <img src="/favicon.ico" alt="COVID-19" />
+              </button>
+            </Marker>
+          );
+        })}
+      </GoogleMapReact>
+    </div>
+  );
+}

src/components/map/style.css

@@ -0,0 +1,18 @@
+.cluster-marker {
+  color: #fff;
+  background: #1978c8;
+  border-radius: 50%;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.covid-marker {
+  background: none;
+  border: none;
+}
+
+.covid-marker img {
+  width: 25px;
+}