split maps into multiple components, render sighting markers in real time, pull sighting info into marker info boxes
This commit is contained in:
Al Duncanson
parent
9dc5c4d69c
commit
7dd828a38c
|
|
@ -0,0 +1,2 @@
|
|||
{
|
||||
}
|
||||
|
|
@ -2,7 +2,11 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.google-map-container > div {
|
||||
.report-google-map-container > div {
|
||||
height: 92% !important;
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.sighting-google-map-container > div {
|
||||
height: 92% !important;
|
||||
}
|
||||
|
|
@ -6,9 +6,9 @@ import Tabs from '@material-ui/core/Tabs';
|
|||
import Tab from '@material-ui/core/Tab';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Home from '../pages/Home';
|
||||
import Map from '../pages/Map';
|
||||
import ViewMap from '../pages/ViewMap';
|
||||
import Quiz from '../pages/Quiz';
|
||||
import Sighting from '../pages/Sighting';
|
||||
import SightingList from '../pages/SightingList';
|
||||
import Report from '../pages/Report';
|
||||
import Info from '../pages/Info';
|
||||
|
||||
|
|
@ -58,9 +58,9 @@ class SimpleTabs extends React.Component {
|
|||
</AppBar>
|
||||
{value === 0 && <Home/>}
|
||||
{value === 1 && <Report/>}
|
||||
{value === 2 && <Sighting/>}
|
||||
{value === 2 && <SightingList/>}
|
||||
{value === 3 && <Quiz/>}
|
||||
{value === 4 && <Map/>}
|
||||
{value === 4 && <ViewMap/>}
|
||||
{value === 5 && <Info/>}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import MenuItem from '@material-ui/core/MenuItem';
|
|||
import TextField from '@material-ui/core/TextField';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import firebase from '../firebase.js';
|
||||
import MapContainer from '../pages/Map';
|
||||
import GoogleMap from '../components/ReportMap';
|
||||
|
||||
/**
|
||||
* Styles that the different
|
||||
|
|
@ -326,7 +326,7 @@ class ReportForm extends React.Component {
|
|||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<MapContainer onClick={this.getCoordinates}/>
|
||||
<GoogleMap onClick={this.getCoordinates}/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ export class MapContainer extends Component {
|
|||
|
||||
return (
|
||||
// Render the Google Map, Marker, and InfoWindow components
|
||||
<div className = "google-map-container">
|
||||
<div className = "report-google-map-container">
|
||||
<Map
|
||||
style = { mapStyles }
|
||||
google = { this.props.google }
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
import React, { Component, Fragment } from 'react';
|
||||
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import firebase from '../firebase.js';
|
||||
|
||||
// Google Maps API Key
|
||||
const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
|
||||
|
||||
// Map container styles
|
||||
const mapStyles = {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
|
||||
export class MapContainer extends Component {
|
||||
|
||||
// Get the user's location using Google's geolocation
|
||||
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 or if user does not allow it,
|
||||
// center map on Grand Rapids, Michigan
|
||||
this.setState({
|
||||
myLatLng: {
|
||||
lat: 42.9634,
|
||||
lng: 85.6681
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//DOPE: this converts a firebase snapshot (js object) to an array
|
||||
snapshotToArray = (snapshot) => {
|
||||
var returnArr = [];
|
||||
|
||||
snapshot.forEach(function(childSnapshot) {
|
||||
var item = childSnapshot.val();
|
||||
item.key = childSnapshot.key;
|
||||
|
||||
returnArr.push(item);
|
||||
});
|
||||
|
||||
return returnArr;
|
||||
}
|
||||
|
||||
// When the component has mounted to the DOM, get the user's location
|
||||
componentDidMount() {
|
||||
this.getLocation();
|
||||
|
||||
//DOPE: So initially I was using this to print the array of sightings to the console
|
||||
const sightingsRef = firebase.database().ref('sightings');
|
||||
|
||||
sightingsRef.on('value', (snapshot) => {
|
||||
console.log(this.snapshotToArray(snapshot));
|
||||
});
|
||||
|
||||
//DOPE: Instead, make the snapshot into an object and store it in the component state
|
||||
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() {
|
||||
|
||||
// TODO: This line is used by the custom marker icon
|
||||
//const { google } = this.props;
|
||||
|
||||
return (
|
||||
// Render the Google Map, Marker, and InfoWindow components
|
||||
<div className = "sighting-google-map-container">
|
||||
<Map
|
||||
style = { mapStyles }
|
||||
google = { this.props.google }
|
||||
initialCenter = { this.state.myLatLng }
|
||||
center = { this.state.myLatLng }
|
||||
defaultZoom = { 15 }
|
||||
onClick = { this.onMapClick } >
|
||||
|
||||
<Marker
|
||||
position = { this.state.myLatLng }
|
||||
onClick = { this.onMarkerClick }
|
||||
title = { 'You are here' }
|
||||
name = { '' }
|
||||
// FIXME: fix custom icon
|
||||
// icon={{
|
||||
// url: "../images/marten-icon.png",
|
||||
// anchor: new google.maps.Point(32,32),
|
||||
// scaledSize: new google.maps.Size(64,64)
|
||||
// }}
|
||||
/>
|
||||
|
||||
{/*DOPE: Then map the data from each sighting in sightings onto Marker props */}
|
||||
{ this.state.sightings.map((sighting) => {
|
||||
return (
|
||||
<Marker
|
||||
key={sighting.id}
|
||||
position={{ lat: sighting.lat, lng:sighting.lng }}
|
||||
onClick = { this.onMarkerClick }
|
||||
type = { 'Type: ' + sighting.type }
|
||||
confidence = { 'Confidence: ' + sighting.confidence }
|
||||
date = { 'Date: ' + sighting.date }
|
||||
time = { 'Time: ' + sighting.time }
|
||||
description = { 'Description: ' + sighting.desc }
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
<InfoWindow
|
||||
marker = { this.state.activeMarker }
|
||||
visible = { this.state.showingInfoWindow } >
|
||||
|
||||
<Fragment>
|
||||
<Typography variant = "display1" gutterBottom>
|
||||
{ this.state.selectedPlace.type }
|
||||
</Typography>
|
||||
<Typography variant = "subheading" gutterBottom>
|
||||
{ this.state.selectedPlace.confidence }
|
||||
</Typography>
|
||||
<Typography variant = "subheading" gutterBottom>
|
||||
{ this.state.selectedPlace.date }
|
||||
</Typography>
|
||||
<Typography variant = "subheading" gutterBottom>
|
||||
{ this.state.selectedPlace.time }
|
||||
</Typography>
|
||||
<Typography variant = "subheading" gutterBottom>
|
||||
{ this.state.selectedPlace.description }
|
||||
</Typography>
|
||||
</Fragment>
|
||||
</InfoWindow>
|
||||
</Map>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Send the Google Map API Key with the MapContainer component
|
||||
export default GoogleApiWrapper({
|
||||
apiKey: (API_KEY)
|
||||
})(MapContainer)
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import React, { Component } from 'react';
|
||||
import GoogleMap from '../components/SightingMap';
|
||||
|
||||
class Sighting extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className='sighting-map'>
|
||||
<GoogleMap/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Sighting;
|
||||
Loading…
Reference in New Issue