From aeae021f2be91fc265c855799f189daa8f9cbb44 Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Mon, 24 Sep 2018 14:42:41 -0400
Subject: [PATCH] added google-map-react component, added geolocation

---
 package-lock.json      | 50 ++++++++++++++++++++++-----------
 src/components/Main.js | 40 +++++++++++++-------------
 src/pages/Map.js       | 64 ++++++++++++++++++++++++++++++++++++------
 3 files changed, 109 insertions(+), 45 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d5fd399..39f42a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,11 @@
         }
       }
     },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
+    },
     "@material-ui/core": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.0.tgz",
@@ -4121,13 +4126,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4140,18 +4143,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4254,8 +4254,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4265,7 +4264,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4278,7 +4276,6 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4378,8 +4375,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4389,7 +4385,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4495,7 +4490,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4675,6 +4669,23 @@
         "pinkie-promise": "^2.0.0"
       }
     },
+    "google-map-react": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-1.0.8.tgz",
+      "integrity": "sha512-M1UIXrxUhwMjNiUkw9DiVSO0fh7vZOxgGR02grzPOu4S47sYV25oeHcsK32rvGuNlBwpHHS+T9AV4aiRuKNXuw==",
+      "requires": {
+        "@mapbox/point-geometry": "^0.1.0",
+        "eventemitter3": "^1.1.0",
+        "scriptjs": "^2.5.7"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz",
+          "integrity": "sha1-HIaZHYFq0eUEdQ5zh0Ik7PO+xQg="
+        }
+      }
+    },
     "got": {
       "version": "6.7.1",
       "resolved": "http://registry.npmjs.org/got/-/got-6.7.1.tgz",
@@ -9708,6 +9719,11 @@
         "ajv": "^5.0.0"
       }
     },
+    "scriptjs": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.8.tgz",
+      "integrity": "sha1-0MQ5VcLmutM7bk7fe1O4llqnyl8="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
diff --git a/src/components/Main.js b/src/components/Main.js
index df578c0..1f3d080 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -40,27 +40,27 @@ class SimpleTabs extends React.Component {
     };
 
     render() {
-    const { classes } = this.props;
-    const { value } = this.state;
+        const { classes } = this.props;
+        const { value } = this.state;
 
-    return (
-    <div className={classes.root}>
-        <AppBar position="static">
-            <Tabs value={value} onChange={this.handleChange} centered>
-                <Tab label="Home" />
-                <Tab label="Sightings" />
-                <Tab label="Trail-Cam Quiz" />
-                <Tab label="View Map" />
-                <Tab label="Marten Info" />
-            </Tabs>
-        </AppBar>
-        {value === 0 && <Home/>}
-        {value === 1 && <Sighting/>}
-        {value === 2 && <Quiz/>}
-        {value === 3 && <Map/>}
-        {value === 4 && <Info/>}
-    </div>
-    );
+        return (
+        <div className={classes.root}>
+            <AppBar position="static">
+                <Tabs value={value} onChange={this.handleChange} centered>
+                    <Tab label="Home" />
+                    <Tab label="Sightings" />
+                    <Tab label="Trail-Cam Quiz" />
+                    <Tab label="View Map" />
+                    <Tab label="Marten Info" />
+                </Tabs>
+            </AppBar>
+            {value === 0 && <Home/>}
+            {value === 1 && <Sighting/>}
+            {value === 2 && <Quiz/>}
+            {value === 3 && <Map/>}
+            {value === 4 && <Info/>}
+        </div>
+        );
     }
 }
 
diff --git a/src/pages/Map.js b/src/pages/Map.js
index e6e9cfd..2722d33 100644
--- a/src/pages/Map.js
+++ b/src/pages/Map.js
@@ -1,14 +1,62 @@
 import React, { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
+import GoogleMapReact from 'google-map-react';
+
+const styles = ({
+    map: {
+        height: '92vh'
+    }
+});
+
+export default class Map extends Component {
+
+    getLocation = () => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                this.setState({
+                        myLatLng: {
+                            lat: position.coords.latitude,
+                            lng: position.coords.longitude
+                        }
+                    }
+                );
+            })
+        } else {
+            // If browser doesn't support geolocation, center map on 
+            // Grand Rapids, Michigan
+            this.setState({
+                    myLatLng: {
+                        lat: 42.96,
+                        lng: 85.66
+                    }
+                }
+            );
+        }
+    }
+
+    componentDidMount() {
+        this.getLocation();
+    }
+
+    state = {
+        myLatLng: {
+            lat: 42.96,
+            lng: 85.66
+        }
+    }
+
+    static defaultProps = {
+        zoom: 15
+    }
 
-class Map extends Component {
     render() {
         return (
-            <Typography variant='display1' align='center' gutterBottom>
-                Map
-            </Typography>
+            <div className='google-map' style={ styles.map }>
+                <GoogleMapReact
+                    initialCenter={ this.state.myLatLng }
+                    center={ this.state.myLatLng }
+                    defaultZoom={ this.props.zoom }>
+                </GoogleMapReact>
+            </div>
         );
     }
-}
-
-export default Map;
+}
\ No newline at end of file