[#2]: filter by month slider

src/frontend/components/MapOverlay.css

@@ -0,0 +1,25 @@
+.map-overlay {
+  position: absolute;
+  width: 15%;
+  bottom: 5%;
+  left: 0;
+  padding: 10px;
+  z-index:99;
+}
+
+.map-overlay .map-overlay-inner {
+  background-color: #fff;
+  box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
+  border-radius: 3px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.map-overlay input {
+  background-color: transparent;
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  margin: 0;
+  cursor: ew-resize;
+}

src/frontend/components/MapOverlay.js

@@ -0,0 +1,46 @@
+import React from "react";
+import './MapOverlay.css';
+
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+ ];
+
+export default class MapOverlay extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      val: 0,
+      month: months[0],
+    }
+
+  }
+
+  handleChange = (event) => {
+
+    this.setState({month: months[event.target.value]})
+    this.props.onMonthChange(event.target.value);
+  }
+
+
+  render() {
+    return (
+      <div className='map-overlay top'>
+        <div className='map-overlay-inner'>
+        <label id='month'>{this.state.month}</label>
+        <input id="slider" type="range" min="0" max="11" step="1" value={this.state.value} onChange={this.handleChange}/>
+        </div>
+      </div>
+    );
+  }
+}

src/frontend/components/map.js

@@ -1,7 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import IncidentPopup from "./IncidentPopup";
+import MapOverlay from "./MapOverlay";
 import axios from "axios"
+import { format } from "d3-format";
 
 const dataFetcher = require('../common/fetchData.js');
 
@@ -127,8 +129,8 @@ export default class Map extends React.Component {
   }
 
   //month is an Integer
-  filterBy(month){
-    var filters = ['==', 'month', month];
+  filterByMonth = (month) => {
+    var filters = ['==', 'month', parseInt(month)];
     this.map.setFilter("reports-points", filters);
     this.map.setFilter('reports-heatmap', filters);
   }
@@ -159,6 +161,11 @@ export default class Map extends React.Component {
       width: "100%",
     };
 
-    return <div style={style} id={kMapId} />;
+    return (
+      <div>
+        <div style={style} id={kMapId} />;
+        <MapOverlay onMonthChange={this.filterByMonth}/>
+      </div>
+    )
   }
 }