diff --git a/public/mapicons/cage.png b/public/mapicons/cage.png new file mode 100644 index 0000000..de9be45 Binary files /dev/null and b/public/mapicons/cage.png differ diff --git a/public/mapicons/marten-icon.png b/public/mapicons/marten-icon.png new file mode 100644 index 0000000..268b945 Binary files /dev/null and b/public/mapicons/marten-icon.png differ diff --git a/public/mapicons/other-icon.png b/public/mapicons/other-icon.png new file mode 100644 index 0000000..123c810 Binary files /dev/null and b/public/mapicons/other-icon.png differ diff --git a/public/mapicons/paws.png b/public/mapicons/paws.png new file mode 100644 index 0000000..dcf1e98 Binary files /dev/null and b/public/mapicons/paws.png differ diff --git a/public/mapicons/photo-icon.png b/public/mapicons/photo-icon.png new file mode 100644 index 0000000..9fa1422 Binary files /dev/null and b/public/mapicons/photo-icon.png differ diff --git a/public/mapicons/tire-icon.png b/public/mapicons/tire-icon.png new file mode 100644 index 0000000..a2de7ac Binary files /dev/null and b/public/mapicons/tire-icon.png differ diff --git a/src/components/SightingMap.js b/src/components/SightingMap.js index 85b7410..3422182 100644 --- a/src/components/SightingMap.js +++ b/src/components/SightingMap.js @@ -207,8 +207,44 @@ export class MapContainer extends Component { } } + /** + * Determines marker icon based on the + * sighting type. + */ + sightingIcon = (type) => { + let pinIcon; + + switch(type) { + case 'visual': + pinIcon = '/mapicons/marten-icon.png'; + break; + case 'roadkill': + pinIcon = '/mapicons/tire-icon.png'; + break; + case 'viewed_tracks': + pinIcon = '/mapicons/paws.png'; + break; + case 'trapped': + pinIcon = '/mapicons/cage.png'; + break; + case 'photo': + pinIcon = '/mapicons/photo-icon.png'; + break; + case 'other': + pinIcon = '/mapicons/other-icon.png'; + break; + default: + break; + } + + return pinIcon; + } + + /** + * Formats date using Moment.js. + */ formatDate = date => { - return (moment(date, "YYYY-MM").format("MMMM YYYY").toString()); + return (moment(date, "YYYY-MM").format("MMMM YYYY").toString()) } // Set the state of the component to contain user coordinates and initial @@ -225,6 +261,8 @@ export class MapContainer extends Component { }; render() { + const {google} = this.props; + return ( // Render the Google Map, Marker, and InfoWindow components
@@ -244,6 +282,9 @@ export class MapContainer extends Component { /> {this.state.sightings.map((sighting) => { + + let pinIcon = this.sightingIcon(sighting.type) + return ( Time: {this.getTime(sighting.time)}} confidence={I am confident of my sighting: {this.getConfidence(sighting.confidence)}} description={Description: {sighting.desc}} + icon={{ + url: pinIcon, + anchor: new google.maps.Point(32,32), + scaledSize: new google.maps.Size(32,32) + }} /> ) })}