Add Heatmap Example (#19)

* Update Home.js

* Update index.js

* Create Heatmap.jsx

* now generating random heatmap weights

* Delete package-lock.json

Project uses yarn

* sorted the imports and routes according to path length

* matching import of heatmap visualization library to autocomplete example

* changed linebreaks to LF to pass eslint

Author: barakplasma

src/Home.js

@@ -55,6 +55,9 @@ const Home = () => (
       <ListItem>
         <StyledLink to={`${defaultPath}default`}>Default</StyledLink>
       </ListItem>
+      <ListItem>
+        <StyledLink to={`${defaultPath}heatmap`}>Heatmap</StyledLink>
+      </ListItem>
       <ListItem>
         <StyledLink to={`${defaultPath}searchbox`}>SearchBox</StyledLink>
       </ListItem>

src/examples/Heatmap.js

@@ -0,0 +1,58 @@
+import React, { Component, Fragment } from 'react';
+import isEmpty from 'lodash.isempty';
+
+// examples:
+import GoogleMap from '../components/GoogleMap';
+
+// consts
+import LOS_ANGELES_CENTER from '../const/la_center';
+
+class Heatmap extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      places: [],
+    };
+  }
+
+  componentDidMount() {
+    fetch('places.json')
+      .then(response => response.json())
+      .then(data => this.setState({ places: data.results }));
+  }
+
+  render() {
+    const { places } = this.state;
+    const data = places.map(place => ({
+      lat: place.geometry.location.lat,
+      lng: place.geometry.location.lng,
+      weight: Math.floor(Math.random() * Math.floor(5)),
+    }));
+    const heatmapData = {
+      positions: data,
+      options: {
+        radius: 20,
+        opacity: 1,
+      },
+    };
+
+    return (
+      <Fragment>
+        {!isEmpty(places) && (
+          <GoogleMap
+            defaultZoom={10}
+            defaultCenter={LOS_ANGELES_CENTER}
+            heatmap={heatmapData}
+            bootstrapURLKeys={{
+              key: process.env.REACT_APP_MAP_KEY,
+              libraries: ['visualization'],
+            }}
+          />
+        )}
+      </Fragment>
+    );
+  }
+}
+
+export default Heatmap;

src/index.js

@@ -5,6 +5,7 @@ import { Route, Switch, Redirect, BrowserRouter as Router } from 'react-router-d
 // examples:
 import Home from './Home';
 import Main from './examples/Main';
+import Heatmap from './examples/Heatmap';
 import SearchBox from './examples/Searchbox';
 import Autocomplete from './examples/Autocomplete';
 
@@ -26,6 +27,7 @@ ReactDOM.render(
         <Route exact path={defaultPath} component={Home} />
         {/* New examples here */}
         <Route path={`${defaultPath}default`} component={Main} />
+        <Route path={`${defaultPath}heatmap`} component={Heatmap} />
         <Route path={`${defaultPath}searchbox`} component={SearchBox} />
         <Route path={`${defaultPath}autocomplete`} component={Autocomplete} />
         <Redirect exact from="*" to={defaultPath} />