Merge branch 'dev' into itsjoycelee-patch-1

hackforla · Mar 4, 2020 · 98ff28a · 98ff28a
2 parents 06d63eb + 90823f8
commit 98ff28a
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.9.0",
     "leaflet": "^1.5.1",
+    "leaflet.markercluster": "^1.4.1",
     "moment": "^2.24.0",
     "proptypes": "^1.1.0",
     "react": "^16.8.6",
@@ -28,6 +29,8 @@
     "react-dom": "^16.8.6",
     "react-leaflet": "^2.4.0",
     "react-leaflet-choropleth": "^2.0.0",
+    "react-leaflet-heatmap-layer": "^2.0.0",
+    "react-leaflet-markercluster": "^2.0.0-rc3",
     "react-redux": "^7.1.3",
     "react-test-renderer": "^16.12.0",
     "react-tooltip": "^4.0.3",

diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
           crossorigin=""/>
+    <link rel="stylesheet" href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css" />
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:700|Roboto&display=swap" rel="stylesheet">
     <title>311 Data</title>
   </head>

diff --git a/server/311-Data.postman_collection.json b/server/311-Data.postman_collection.json
@@ -0,0 +1,88 @@
+{
+	"info": {
+		"_postman_id": "16e2823e-b118-4cbe-8007-1dc4119111cd",
+		"name": "311-Data",
+		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
+	},
+	"item": [
+		{
+			"name": "Bulk_Ingest",
+			"request": {
+				"method": "POST",
+				"header": [
+					{
+						"key": "Content-Type",
+						"name": "Content-Type",
+						"value": "application/json",
+						"type": "text"
+					}
+				],
+				"body": {
+					"mode": "raw",
+					"raw": "",
+					"options": {
+						"raw": {
+							"language": "json"
+						}
+					}
+				},
+				"url": {
+					"raw": "localhost:5000/ingest?years=2019&limit=10000",
+					"host": [
+						"localhost"
+					],
+					"port": "5000",
+					"path": [
+						"ingest"
+					],
+					"query": [
+						{
+							"key": "years",
+							"value": "2019"
+						},
+						{
+							"key": "limit",
+							"value": "10000"
+						}
+					]
+				}
+			},
+			"response": []
+		},
+		{
+			"name": "Pinmap",
+			"request": {
+				"method": "POST",
+				"header": [
+					{
+						"key": "Content-Type",
+						"name": "Content-Type",
+						"value": "application/json",
+						"type": "text"
+					}
+				],
+				"body": {
+					"mode": "raw",
+					"raw": "{\n\t\"startDate\":\"2017-01-01\",\n\t\"endDate\":\"2019-12-31\",\n\t\"ncList\": [\"SUNLAND-TUJUNGA NC\", \"HISTORIC HIGHLAND PARK NC\", \"ALL\"],\n\t\"requestTypes\":[\"Homeless Encampment\"]\n}",
+					"options": {
+						"raw": {
+							"language": "json"
+						}
+					}
+				},
+				"url": {
+					"raw": "localhost:5000/pins",
+					"host": [
+						"localhost"
+					],
+					"port": "5000",
+					"path": [
+						"pins"
+					]
+				}
+			},
+			"response": []
+		}
+	],
+	"protocolProfileBehavior": {}
+}
diff --git a/src/components/PinMap/PinMap.jsx b/src/components/PinMap/PinMap.jsx
@@ -7,15 +7,21 @@ import {
   TileLayer,
   Rectangle,
   Tooltip,
+  LayersControl,
+  ZoomControl,
 } from 'react-leaflet';
 import Choropleth from 'react-leaflet-choropleth';
+import MarkerClusterGroup from 'react-leaflet-markercluster';
+import HeatmapLayer from 'react-leaflet-heatmap-layer';
 import PropTypes from 'proptypes';
 
 // import neighborhoodOverlay from '../../data/la-county-neighborhoods-v6.json';
 // import municipalOverlay from '../../data/la-county-municipal-regions-current.json';
 // import councilDistrictsOverlay from '../../data/la-city-council-districts-2012.json';
 import ncOverlay from '../../data/nc-boundary-2019.json';
 
+const { BaseLayer, Overlay } = LayersControl;
+
 class PinMap extends Component {
   constructor(props) {
     super(props);
@@ -24,6 +30,7 @@ class PinMap extends Component {
       position: [34.0094213, -118.6008506],
       zoom: 10,
       mapUrl: `https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
+      satelliteUrl: `https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
       geoJSON: ncOverlay,
       bounds: null,
     };
@@ -34,9 +41,7 @@ class PinMap extends Component {
 
     layer.setStyle({
       weight: 5,
-      color: '#666',
-      dashArray: '',
-      fillOpacity: 0.7,
+      color: 'grey',
     });
 
     layer.bringToFront();
@@ -46,12 +51,9 @@ class PinMap extends Component {
     const layer = e.target;
 
     layer.setStyle({
-      fillColor: '#bcbddc',
       weight: 2,
       opacity: 1,
-      color: 'white',
-      dashArray: '3',
-      fillOpacity: 0.7,
+      color: '#959595',
     });
   }
 
@@ -60,7 +62,7 @@ class PinMap extends Component {
     this.setState({ bounds });
   }
 
-  onEachFeature = (feature, layer) => {
+  onEachRegionFeature = (feature, layer) => {
     // Popup text when clicking on a region
     const popupText = `
       <div class="overlay_feature_popup">
@@ -79,37 +81,6 @@ class PinMap extends Component {
     });
   }
 
-  renderOverlay = () => {
-    const { geoJSON } = this.state;
-
-    if (geoJSON) {
-      return (
-        <Choropleth
-          data={geoJSON}
-          style={{
-            fillColor: '#bcbddc',
-            weight: 2,
-            opacity: 1,
-            color: 'white',
-            dashArray: '3',
-            fillOpacity: 0.7,
-          }}
-          onEachFeature={this.onEachFeature}
-          ref={el => {
-            if (el) {
-              this.choropleth = el.leafletElement;
-              return this.choropleth;
-            }
-
-            return null;
-          }}
-        />
-      );
-    }
-
-    return 'Loading';
-  }
-
   renderMarkers = () => {
     const { data, showMarkers } = this.props;
 
@@ -120,6 +91,7 @@ class PinMap extends Component {
 
           return (
             <Marker key={d.srnumber} position={position}>
+              {/* Fetching request details on marker click will be implemented in another PR */}
               <Popup>
                 Type:
                 {d.requesttype}
@@ -156,23 +128,90 @@ class PinMap extends Component {
       position,
       zoom,
       mapUrl,
+      satelliteUrl,
       bounds,
+      geoJSON,
     } = this.state;
 
+    const { data } = this.props;
+
     return (
       <div className="map-container">
         <Map
           center={position}
           zoom={zoom}
+          maxZoom={18}
           bounds={bounds}
           style={{ height: '88.4vh' }}
+          zoomControl={false}
         >
-          <TileLayer
-            url={mapUrl}
-            attribution="MapBox"
-          />
-          {this.renderOverlay()}
-          {this.renderMarkers()}
+          <ZoomControl position="topright" />
+          <LayersControl
+            position="bottomright"
+            collapsed={false}
+          >
+            <BaseLayer checked name="Streets">
+              <TileLayer
+                url={mapUrl}
+                attribution="MapBox"
+              />
+            </BaseLayer>
+            <BaseLayer name="Satellite">
+              <TileLayer
+                url={satelliteUrl}
+                attribution="MapBox"
+              />
+            </BaseLayer>
+            {
+              geoJSON
+              && (
+                <Overlay checked name="Neighborhood Council Boundaries">
+                  <Choropleth
+                    data={geoJSON}
+                    style={{
+                      fillColor: 'white',
+                      weight: 2,
+                      opacity: 1,
+                      color: '#959595',
+                      dashArray: '3',
+                    }}
+                    onEachFeature={this.onEachRegionFeature}
+                    ref={el => {
+                      if (el) {
+                        this.choropleth = el.leafletElement;
+                        return this.choropleth;
+                      }
+                      return null;
+                    }}
+                  />
+                </Overlay>
+              )
+            }
+            <Overlay checked name="Markers">
+              <MarkerClusterGroup
+                showCoverageOnHover
+                zoomToBoundsOnClick
+                removeOutsideVisibleBounds
+                maxClusterRadius={65}
+              >
+                {this.renderMarkers()}
+              </MarkerClusterGroup>
+            </Overlay>
+            <Overlay name="Heatmap">
+              {/* intensityExtractor is required and requires a callback as the value.
+                * The heatmap is working with an empty callback but we'll probably
+                * improve functionality post-MVP by generating a heatmap list
+                * on the backend. */}
+              <HeatmapLayer
+                points={data}
+                radius={20}
+                blur={25}
+                longitudeExtractor={m => m.longitude}
+                latitudeExtractor={m => m.latitude}
+                intensityExtractor={() => {}}
+              />
+            </Overlay>
+          </LayersControl>
         </Map>
       </div>
     );

diff --git a/src/components/main/menu/DateSelector/DateRangePicker.jsx b/src/components/main/menu/DateSelector/DateRangePicker.jsx
@@ -15,7 +15,7 @@ import Icon from '../../../common/Icon';
 import COLORS from '../../../../styles/COLORS';
 
 const cardStyle = {
-  height: '299px',
+  height: '200px',
   width: '400px',
   overflow: 'visible',
   boxShadow: '0px 6px 5px rgba(0, 0, 0, 0.5)',
@@ -163,6 +163,7 @@ const DateRangePicker = ({
           border: 'none',
           textAlign: 'center',
           borderRadius: '0',
+          height: '75px',
         }}
       >
         <div className="container" style={{ paddingBottom: '30px' }}>