Formatted database data in InfoWindows on Sighting Map.
This commit is contained in:
wildscotsmen
parent
16f6dde825
commit
700515a66b
|
|
@ -9,6 +9,7 @@
|
|||
"firebase-admin": "^6.0.0",
|
||||
"flamelink": "^0.19.2",
|
||||
"google-maps-react": "^2.0.2",
|
||||
"moment": "^2.22.2",
|
||||
"react": "^16.5.1",
|
||||
"react-dom": "^16.5.1",
|
||||
"react-quiz-component": "0.2.0",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { Component, Fragment } from 'react';
|
||||
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
|
||||
import moment from 'moment'
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import firebase from '../firebase.js';
|
||||
|
||||
|
|
@ -12,6 +13,128 @@ const mapStyles = {
|
|||
height: '100%'
|
||||
}
|
||||
|
||||
/**
|
||||
* Types of sightings. Label is what is
|
||||
* viewed in the application, value is
|
||||
* what is stored in the database.
|
||||
*/
|
||||
const sightingTypes = [
|
||||
{
|
||||
value: 'visual',
|
||||
label: 'Visual',
|
||||
},
|
||||
{
|
||||
value: 'roadkill',
|
||||
label: 'Roadkill',
|
||||
},
|
||||
{
|
||||
value: 'trapped',
|
||||
label: 'Trapped',
|
||||
},
|
||||
{
|
||||
value: 'viewed_tracks',
|
||||
label: 'Viewed Tracks',
|
||||
},
|
||||
{
|
||||
value: 'photo',
|
||||
label: 'Photo',
|
||||
},
|
||||
{
|
||||
value: 'other',
|
||||
label: 'Other',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Types of sightings. Label is what is
|
||||
* viewed in the application, value is
|
||||
* what is stored in the database.
|
||||
*/
|
||||
const timeTypes = [
|
||||
{
|
||||
value: 'unknown',
|
||||
label: 'Unknown',
|
||||
},
|
||||
{
|
||||
value: 'morning',
|
||||
label: 'Morning',
|
||||
},
|
||||
{
|
||||
value: 'midday',
|
||||
label: 'Midday',
|
||||
},
|
||||
{
|
||||
value: 'evening',
|
||||
label: 'Evening',
|
||||
},
|
||||
{
|
||||
value: 'night',
|
||||
label: 'Night',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Levels of confidence. Label is what is
|
||||
* viewed in the application, value is
|
||||
* what is stored in the database.
|
||||
*/
|
||||
const confidenceLevels = [
|
||||
{
|
||||
value: '1',
|
||||
label: '1 - Strongly unconfident',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '2 - Unconfident',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '3 - Somewhat confident',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '4 - Confident',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '5 - Very confident',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Gets formatted confidence value.
|
||||
*/
|
||||
function getConfidence(item) {
|
||||
for (var i = 0; i < confidenceLevels.length; i++) {
|
||||
if (confidenceLevels[i].value === item) {
|
||||
return confidenceLevels[i].label;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets formatted time value.
|
||||
*/
|
||||
function getTime(item) {
|
||||
for (var i = 0; i < timeTypes.length; i++) {
|
||||
if (timeTypes[i].value === item) {
|
||||
return timeTypes[i].label;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets formatted type value.
|
||||
*/
|
||||
function getType(item) {
|
||||
for (var i = 0; i < sightingTypes.length; i++) {
|
||||
if (sightingTypes[i].value === item) {
|
||||
return sightingTypes[i].label;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class MapContainer extends Component {
|
||||
|
||||
// Get the user's location using Google's geolocation
|
||||
|
|
@ -19,22 +142,22 @@ export class MapContainer extends Component {
|
|||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition((position) => {
|
||||
this.setState({
|
||||
myLatLng: {
|
||||
lat: position.coords.latitude,
|
||||
lng: position.coords.longitude
|
||||
}
|
||||
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
|
||||
}
|
||||
myLatLng: {
|
||||
lat: 42.9634,
|
||||
lng: 85.6681
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -85,6 +208,10 @@ export class MapContainer extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
formatDate = date => {
|
||||
return (moment(date, "YYYY-MM").format("MMMM YYYY").toString())
|
||||
}
|
||||
|
||||
// Set the state of the component to contain user coordinates and initial
|
||||
// marker and info window information
|
||||
state = {
|
||||
|
|
@ -101,55 +228,55 @@ export class MapContainer extends Component {
|
|||
render() {
|
||||
return (
|
||||
// Render the Google Map, Marker, and InfoWindow components
|
||||
<div className = "sighting-google-map-container">
|
||||
<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 } >
|
||||
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 }
|
||||
type = { 'You are here' }
|
||||
<Marker
|
||||
position={this.state.myLatLng}
|
||||
onClick={this.onMarkerClick}
|
||||
type={'You are here'}
|
||||
/>
|
||||
|
||||
{ this.state.sightings.map((sighting) => {
|
||||
{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 }
|
||||
key = {sighting.id}
|
||||
position = {{ lat: sighting.lat, lng: sighting.lng }}
|
||||
onClick = {this.onMarkerClick}
|
||||
type = {'Type: ' + getType(sighting.type)}
|
||||
confidence = {<Fragment><b>Confidence:</b> {getConfidence(sighting.confidence)}</Fragment>}
|
||||
date = {<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
|
||||
time = {<Fragment><b>Time:</b> {getTime(sighting.time)}</Fragment>}
|
||||
description = {<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
<InfoWindow
|
||||
marker = { this.state.activeMarker }
|
||||
visible = { this.state.showingInfoWindow } >
|
||||
marker={this.state.activeMarker}
|
||||
visible={this.state.showingInfoWindow} >
|
||||
|
||||
<Fragment>
|
||||
<Typography variant = "display1" gutterBottom>
|
||||
{ this.state.selectedPlace.type }
|
||||
<Typography variant="display1" gutterBottom>
|
||||
{this.state.selectedPlace.type}
|
||||
</Typography>
|
||||
<Typography variant = "subheading" gutterBottom>
|
||||
{ this.state.selectedPlace.confidence }
|
||||
<Typography variant="subheading" gutterBottom>
|
||||
{this.state.selectedPlace.confidence}
|
||||
</Typography>
|
||||
<Typography variant = "subheading" gutterBottom>
|
||||
{ this.state.selectedPlace.date }
|
||||
<Typography variant="subheading" gutterBottom>
|
||||
{this.state.selectedPlace.date}
|
||||
</Typography>
|
||||
<Typography variant = "subheading" gutterBottom>
|
||||
{ this.state.selectedPlace.time }
|
||||
<Typography variant="subheading" gutterBottom>
|
||||
{this.state.selectedPlace.time}
|
||||
</Typography>
|
||||
<Typography variant = "subheading" gutterBottom>
|
||||
{ this.state.selectedPlace.description }
|
||||
<Typography variant="subheading" gutterBottom>
|
||||
{this.state.selectedPlace.description}
|
||||
</Typography>
|
||||
</Fragment>
|
||||
</InfoWindow>
|
||||
|
|
|
|||
Loading…
Reference in New Issue