rlorenzini · rlorenzini · May 18, 2019 · May 18, 2019 · May 18, 2019 · May 18, 2019
diff --git a/.DS_Store b/.DS_Store
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -3,7 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "d3-request": "^1.0.6",
+    "decibel-meter": "^2.0.0",
+    "deck.gl": "^7.0.8",
     "react": "^16.8.6",
+    "react-animations": "^1.0.0",
+    "react-bootstrap-sweetalert": "^4.4.1",
     "react-dom": "^16.8.6",
     "react-map-gl": "^4.1.2",
     "react-scripts": "3.0.1",

diff --git a/client/public/index.html b/client/public/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
+    <link href="https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!--
@@ -19,11 +21,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Houston Noise Pollution</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100%"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/client/src/App.js b/client/src/App.js
@@ -1,67 +1,179 @@
-import React,{Component} from 'react';
-// import logo from './logo.svg';
-import './App.css';
-import {MAPBOX_KEY} from "./.env.json"
-import ReactMapGL from 'react-map-gl';
-import SweetAlert from 'sweetalert2-react';
-
-import styled from 'styled-components';
-
-const AppContainer = styled.div`
-width: 100vw;
-height: 100vh;
-`
-
-const PopupButton = styled.button`
-color: red;
-background-color: orange;
-width:100px;height:100px;
-position: fixed;
-top: 86vh;
-left: 50%;
-transform: translateX(-50%);
-position: fixed;`
-
-class App extends Component {
-  constructor(){
-    super()
-
-  this.state = {
-    height: window.innerHeight,
-    width: window.innerWidth,
-    show:false,
-    viewport: {
-      width: "100vw",
-      height: "100vh",
-      latitude: 29.7604,
-      longitude: -95.3698,
-      zoom: 10,
-    }
+import React, { Component, Fragment } from "react";
+import { render } from "react-dom";
+import MapGL from "react-map-gl";
+// import ControlPanel from "./control-panel";
+import { json as requestJson } from "d3-request";
+import { MAPBOX_KEY } from "./.env.json";
+import { Sidebar } from "./Sidebar";
+import { Legend } from "./Legend";
+import { validateCoordinates } from "./validate-coordinates";
+import { adjustBadValues } from "./adjust-bad-values";
+import { PopupButton } from "./PopupButton";
+import { PopupComponent } from "./Popup.js";
+
+const HEATMAP_SOURCE_ID = "decibel-source";
+const DATA_URL =
+  "https://noise-pollution-hackathon2019.herokuapp.com/api/getData";
+// "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
+
+export class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      viewport: {
+        width: "100vw",
+        height: "100vh",
+        latitude: 29.7604,
+        longitude: -95.2228,
+        zoom: 9
+      },
+      popup: false,
+      data: null
+    };
+
+    this._mapRef = React.createRef();
+    this._handleMapLoaded = this._handleMapLoaded.bind(this);
+    this._handlePopupOpen = this._handlePopupOpen.bind(this);
+    this._handlePopupClose = this._handlePopupClose.bind(this);
+  }
+
+  _mkFeatureCollection = features => {
+    return { type: "FeatureCollection", features };
   };
-}
-handleClick=()=>{
-  this.setState({
-    visiblePopup:true
-  })
-  console.log(this.state.visiblePopup)
-}
-render(){
-  return (
-    <AppContainer>
-    <ReactMapGL
-      {...this.state.viewport}
-      mapboxApiAccessToken={MAPBOX_KEY}
-      onViewportChange={(viewport) => this.setState({viewport})}
-    />
-    <PopupButton onClick={() => this.setState({show:true})}>POPUP</PopupButton>
-    <SweetAlert show={this.state.show}
-    title="POPUP"
-    text="STUFF"
-    onConfirm={()=>this.setState({show:false})}
-    />
-    </AppContainer>
-  );
-}
+
+  _mkHeatmapLayer = (id, source) => {
+    const MAX_ZOOM_LEVEL = 13;
+    return {
+      id,
+      source,
+      maxzoom: MAX_ZOOM_LEVEL,
+      type: "heatmap",
+      paint: {
+        // Increase the heatmap weight based on frequency and property magnitude
+        "heatmap-weight": {
+          property: "decibel",
+          type: "exponential",
+          stops: [[1, 0], [150, 1]]
+        },
+        // Increase the heatmap color weight weight by zoom level
+        // heatmap-intensity is a multiplier on top of heatmap-weight
+        "heatmap-intensity": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          0,
+          1,
+          MAX_ZOOM_LEVEL,
+          3
+        ],
+        // Adjust the heatmap radius by zoom level
+        "heatmap-radius": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          0,
+          2,
+          MAX_ZOOM_LEVEL,
+          20
+        ],
+        "heatmap-color": [
+          "interpolate",
+          ["linear"],
+          ["heatmap-density"],
+          0,
+          "rgba(236,222,239,0)",
+          0.2,
+          "#ffffb2",
+          0.4,
+          "#fecc5c",
+          0.6,
+          "#fd8d3c",
+          0.8,
+          "#f03b20",
+          1,
+          "#bd0026"
+        ]
+      }
+    };
+  };
+
+  _onViewportChange = viewport => this.setState({ viewport });
+
+  _getMap = () => {
+    return this._mapRef.current ? this._mapRef.current.getMap() : null;
+  };
+
+  _handleMapLoaded = event => {
+    const map = this._getMap();
+
+    requestJson(DATA_URL, (error, response) => {
+      if (!error) {
+        response = {
+          ...response,
+          features: response.features
+            .filter(validateCoordinates)
+            .map(adjustBadValues)
+        };
+        this.setState({
+          data: response
+        });
+        map.addSource(HEATMAP_SOURCE_ID, { type: "geojson", data: response });
+        map.addLayer(this._mkHeatmapLayer("heatmap-layer", HEATMAP_SOURCE_ID));
+      }
+    });
+  };
+
+  _handlePopupOpen() {
+    this.setState({
+      popup: true
+    });
+  }
+
+  _handlePopupClose() {
+    this.setState({
+      popup: false
+    });
+  }
+
+  _setMapData = features => {
+    const map = this._getMap();
+    map &&
+      map
+        .getSource(HEATMAP_SOURCE_ID)
+        .setData(this._mkFeatureCollection(features));
+  };
+
+  render() {
+    const { viewport } = this.state;
+    console.log(this.state);
+    return (
+      <Fragment>
+        <MapGL
+          ref={this._mapRef}
+          {...viewport}
+          width="100%"
+          height="100%"
+          style={{ position: "fixed" }}
+          mapStyle="mapbox://styles/mapbox/dark-v9"
+          onViewportChange={this._onViewportChange}
+          mapboxApiAccessToken={MAPBOX_KEY}
+          onLoad={this._handleMapLoaded}
+        />
+        <Sidebar />
+        <div onClick={this._handlePopupOpen.bind(this)}>
+          <PopupButton />
+        </div>
+
+        {this.state.popup && (
+          <PopupComponent closePopup={this._handlePopupClose} />
+        )}
+        <Legend />
+      </Fragment>
+    );
+  }
 }
 
-export default App;
+export function renderToDOM(container) {
+  render(<App />, container);
+}
diff --git a/client/src/Legend.js b/client/src/Legend.js
@@ -0,0 +1,71 @@
+import React, { Fragment } from "react";
+import styled from "styled-components";
+
+const LegendContainer = styled.div`
+  position: fixed;
+  bottom: 0px;
+  left: calc(50% - 300px);
+
+  width: 250px;
+  height: 64px;
+  margin: 16px;
+  background: rgba(30, 30, 30, 1);
+  padding: 8px 16px 16px;
+  @media (max-width: 768px) {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+`;
+
+const LegendSlideColors = styled.div`
+  display: flex;
+  flex: 1 1 100%;
+  height: 5px;
+  margin-top: 4px;
+  > * {
+    flex-basis: 20%;
+  }
+`;
+
+const SingleSlide = styled.div`
+  height: 5px;
+  width: 20%;
+`;
+
+const NumberTick = styled.div`
+  position: relative;
+  top: 4px;
+  left: 0;
+  color: white;
+  font-family: "Inconsolata", monospace;
+`;
+
+const Label = styled.label`
+  color: white;
+  font-family: "Inconsolata", monospace;
+`;
+
+const SlideColor = ({ color, number }) => {
+  return (
+    <Fragment>
+      <SingleSlide style={{ background: color }}>
+        <NumberTick>{number}</NumberTick>
+      </SingleSlide>
+    </Fragment>
+  );
+};
+
+export const Legend = () => {
+  return (
+    <LegendContainer>
+      <Label>Legend:</Label>
+      <LegendSlideColors>
+        <SlideColor color="#ffffb2" number={0} />
+        <SlideColor color="#fecc5c" number={50} />
+        <SlideColor color="#fd8d3c" number={75} />
+        <SlideColor color="#f03b20" number={100} />
+        <SlideColor color="#bd0026" number={150} />
+      </LegendSlideColors>
+    </LegendContainer>
+  );
+};
no results