{
+ 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 or if user does not allow it,
+ // center map on Grand Rapids, Michigan
+ this.setState({
+ myLatLng: {
+ lat: 42.9634,
+ lng: 85.6681
+ }
+ }
+ );
+ }
+ }
+
+ // When the component has mounted to the DOM, get the user's location
+ componentDidMount() {
+ this.getLocation();
+
+ const sightingsRef = firebase.database().ref('sightings');
+
+ sightingsRef.on('value', (snapshot) => {
+ let sightings = snapshot.val();
+ let newState = [];
+ for (let sighting in sightings) {
+ newState.push({
+ id: sighting,
+ lat: sightings[sighting].lat,
+ lng: sightings[sighting].lng,
+ desc: sightings[sighting].desc,
+ type: sightings[sighting].type,
+ confidence: sightings[sighting].confidence,
+ date: sightings[sighting].date,
+ time: sightings[sighting].time
+ });
+ }
+ this.setState({
+ sightings: newState
+ });
+ });
+ }
+
+ // When the user clicks on a marker, pass the props related to that marker
+ // and show the related info window
+ onMarkerClick = (props, marker) => {
+ this.setState({
+ selectedPlace: props,
+ activeMarker: marker,
+ showingInfoWindow: true
+ });
+ }
+
+ onMapClick = (props, map, e) => {
+ if (this.state.showingInfoWindow) {
+ this.setState({
+ showingInfoWindow: false,
+ activeMarker: null
+ });
+ }
+ }
+
+ // Set the state of the component to contain user coordinates and initial
+ // marker and info window information
+ state = {
+ myLatLng: {
+ lat: 42.9634,
+ lng: 85.6681
+ },
+ showingInfoWindow: false,
+ activeMarker: {},
+ selectedPlace: {},
+ sightings: []
+ }
+
+ render() {
+ return (
+ // Render the Google Map, Marker, and InfoWindow components
+
+
+
+ );
+ }
+}
+
+// Send the Google Map API Key with the MapContainer component
+export default GoogleApiWrapper({
+ apiKey: (API_KEY)
+})(MapContainer)
\ No newline at end of file
diff --git a/src/firebase.js b/src/firebase.js
index f26bb7a..8d01e36 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -11,4 +11,5 @@ const config = {
};
firebase.initializeApp(config);
+
export default firebase;
\ No newline at end of file
diff --git a/src/flamelink.js b/src/flamelink.js
new file mode 100644
index 0000000..4ac805f
--- /dev/null
+++ b/src/flamelink.js
@@ -0,0 +1,6 @@
+import firebaseApp from './firebase.js';
+import flamelink from 'flamelink';
+
+const flamelinkApp = flamelink({ firebaseApp });
+
+export default flamelinkApp;
\ No newline at end of file
diff --git a/src/pages/Info.js b/src/pages/Info.js
index fe1ccdd..838a1e1 100644
--- a/src/pages/Info.js
+++ b/src/pages/Info.js
@@ -1,12 +1,19 @@
import React, { Component } from 'react';
import Typography from '@material-ui/core/Typography';
+import Flamelink from '../components/Flamelink';
class Info extends Component {
render() {
+
return (
-
- Info
-
+
);
}
}
diff --git a/src/pages/Report.js b/src/pages/Report.js
index 8a7909d..c9042d9 100644
--- a/src/pages/Report.js
+++ b/src/pages/Report.js
@@ -1,13 +1,10 @@
import React, { Component } from 'react';
import ReportForm from '../components/ReportForm';
-import Typography from '@material-ui/core/Typography';
class Report extends Component {
render() {
return (
-
-
);
}
}
diff --git a/src/pages/Sighting.js b/src/pages/SightingList.js
similarity index 100%
rename from src/pages/Sighting.js
rename to src/pages/SightingList.js
diff --git a/src/pages/ViewMap.js b/src/pages/ViewMap.js
new file mode 100644
index 0000000..6187d45
--- /dev/null
+++ b/src/pages/ViewMap.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import GoogleMap from '../components/SightingMap';
+
+class Sighting extends Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
+export default Sighting;
\ No newline at end of file