Add location to blurb

src/App.js

@@ -19,6 +19,7 @@ class App extends Component {
             src: "https://i.imgur.com/qOzvV95.jpg",
             title: "Eucalyptus",
             description: "An *Oceanic* tree in _Kew Gardens_.",
+            location: '51.4823816, -0.2891944',
           },
           {
             src: "https://i.imgur.com/57fNtrZ.jpg",
@@ -30,7 +31,7 @@ class App extends Component {
             title: "Red hot",
             description: "Due to it's oils this species is extremely flammable.",
           },
-        ]} timeout={1000} />
+        ]} timeout={3000} />
 
         {/* This is displayed beneath your photos. This can be moved if
           desired. */}

src/Photo.css

@@ -36,6 +36,20 @@
   letter-spacing: 0.22px;
 }
 
+.photo .blurb .location {
+  opacity: 0.6;
+  transition: opacity 0.2s ease-out;
+}
+
+.photo .blurb .location:hover {
+  opacity: 1.0;
+}
+
+.photo .blurb .location img {
+  border-style: none;
+  border: 0;
+}
+
 .photo .blurb .underline {
   text-decoration: underline;
 }

src/Photo.js

@@ -12,6 +12,7 @@ const Photo = React.createClass({
     margin: React.PropTypes.number,
     title: React.PropTypes.string,
     description: React.PropTypes.string,
+    location: React.PropTypes.string,
     timeout: React.PropTypes.number,
   },
 
@@ -21,8 +22,16 @@ const Photo = React.createClass({
     };
   },
 
+  renderLocation() {
+    const latlong = this.props.location.replace(/\s/g, '');
+    const link = 'https://www.google.com/maps/@' + latlong + ',15z';
+    return (<a target="_blank" className="location" href={link}>
+      <img src="./location.png" width={12} role="presentation" />
+    </a>);
+  },
+
   renderOverlay() {
-    const {title, description, margin = 0} = this.props;
+    const {title, description, location, margin = 0} = this.props;
 
     // Display empty div for initial transition
     if (!this.img) {
@@ -48,6 +57,7 @@ const Photo = React.createClass({
         dangerouslySetInnerHTML={{__html: parse(title)}}/>}
         {description && <p className="photo-description"
           dangerouslySetInnerHTML={{__html: parse(description)}} />}
+        {location && this.renderLocation()}
       </div>
     );
   },

src/Triplicate.js

@@ -24,8 +24,7 @@ class Triplicate extends Component {
           const obj = typeof photo === 'object' ? photo : {src: photo};
           const key = `photo-${i}`;
           return (<Photo width={this.getLandscapeWidth(photos, margin)}
-            margin={margin} key={key} timeout={this.props.timeout}
-            src={obj.src} title={obj.title} description={obj.description} />);
+            margin={margin} key={key} timeout={this.props.timeout} {...obj} />);
         })}
       </div>
     );