blueraster · xhaferrama · May 27, 2018 · May 27, 2018 · May 27, 2018 · May 27, 2018
diff --git a/Noise_Complaint_React_App.png b/Noise_Complaint_React_App.png
diff --git a/README.md b/README.md
@@ -1,5 +1,19 @@
-Git Clone the repo
+This app adds spatial data to the map from an open source, adds an event which accesses or changes the data being displayed.
+and uses React component(s) such as react-leaflet and tools such as jquery and lifecycle methods that either display information about the data or update based on user events.
 
-NPM install node modules
+To run simply download/fork, then on your terminal
 
-npm run start
+-> npm install
+
+-> npm run start
+
+Once completed, you will be able to interact with the app at http://localhost:3000/ 
+
+When dealing with react, one introduces the constructor to then call super() to pass the props to React.Component.
+That is proceeded by classes. We do not use classes directly in turn pushing one to leverage Javascript more inside each defined class. For this project I have three classes:
+
+Sidebar, Main, and App 
+
+Within Sidebar, two buttons that reside within sidebar are included via html code. For every div defined, the styling is found in App.css
+Within Main, div map is instantiated, proceeded by assigning baselayers and spatial data. The spatial data has been retrieved from an open source whereas polygons and points are simply made up. To add any geojson data, one leverages the leaflet library by populating geojson data as follows: L.geojson(geojson_data).addTo(map). Styling of the spatial data, therefore in geojson format, is done accordingly.
+Within App, the container div, sidebar, as well as the calling of Main class is done. 
diff --git a/public/index.html b/public/index.html
@@ -26,12 +26,18 @@
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
    crossorigin=""></script>
+   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+
+
+
   </head>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.css b/src/App.css
@@ -1,8 +1,114 @@
-html, body, #root, .App {
-  height: 100%;
+/**** CONTAINER ****/
+
+.container {
+  display: flex;
+}
+
+/**** NOISE BUTTON ****/
+
+.barkbarknoise {
+  fill: #aaa;
+  height: 21px;
+  transition: fill .3s ease;
+  cursor: pointer;
+  font-family: Helvetica, sans-serif;
+
+  text {
+    fill: #555;
+  }
+}
+
+.chart:hover,
+.chart:focus {
+  .barkbarknoise {
+    fill: #aaa;
+  }
+}
+
+.barkbarknoise:hover,
+.barkbarknoise:focus {
+  fill: red !important;
+
+  text {
+    fill: red;
+  }
+}
+
+figcaption {
+  font-weight: bold;
+  color: #000;
+  margin-bottom: 20px;
+}
+
+
+/**** MAIN ****/
+#main {
+  background-color: green;
+  position: relative;
   width: 100%;
+  height:1000px;
 }
 
+#main.isopen {
+
+ transition: left .3s ease-in-out;
+ left: -150px;
+ width: 100%;
+}
+
+/**** SIDEBAR ****/
+#sidebarMenu {
+  background-color: grey;
+  position:absolute;
+  left: -100px;
+  height: 100px;
+  transition: .3s;
+}
+/**** LEAFLET BASELAYER ICON ****/
+
+.leaflet-control-layers-toggle:after{ 
+    color:#000 ;
+}
+
+/**** BUTTON ****/
+
+button {
+    color: #444444;
+    background: #F3F3F3;
+    border: 1px #DADADA solid;
+    padding: 5px 10px;
+    border-radius: 2px;
+    font-weight: bold;
+    font-size: 9pt;
+    outline: none;
+}
+
+button:hover {
+    border: 1px #C6C6C6 solid;
+    box-shadow: 1px 1px 1px #EAEAEA;
+    color: #333333;
+    background: #F7F7F7;
+}
+
+button:active {
+    box-shadow: inset 1px 1px 1px #DFDFDF;   
+}
+
+/**** INPUT ****/
+
+input{
+  background: #0066A2;
+  color: white;
+  border-style: outset;
+  border-color: #0066A2;
+  height: 50px;
+  width: 150px;
+  font: bold 15px arial, sans-serif;
+  text-shadow:none;
+}
+
+/**** APP ****/
+
 .App {
   text-align: center;
 }
@@ -31,4 +137,6 @@ html, body, #root, .App {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
-#mapid { height: 100%; }
+/**** MAP ****/
+
+#mapid { height: 70%; }