GVSU/marten-application
GVSU
/
marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

added google-map-react component, added geolocation

This commit is contained in:
Al Duncanson 2018-09-24 14:42:41 -04:00
parent 56972690cc
commit aeae021f2b
3 changed files with 109 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
package-lock.json generated
View File

@ -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",

40
src/components/Main.js
View File

@ -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>
);
}
}

64
src/pages/Map.js
View File

@ -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;
}