Making merge ready in current state; to be revisited as part of sprint 3 design work but wanted to merge what we have as progress

client/src/components/map.tsx

@@ -7,7 +7,6 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import {fromLonLat} from 'ol/proj';
 import * as styles from './map.module.scss';
-// import olms from 'ol-mapbox-style';
 import TileLayer from 'ol/layer/Tile';
 import VectorTileLayer from 'ol/layer/VectorTile.js';
 import VectorTileSource from 'ol/source/VectorTile.js';
@@ -15,8 +14,7 @@ import MVT from 'ol/format/MVT.js';
 import {Fill, Style} from 'ol/style.js';
 import XYZ from 'ol/source/XYZ';
 import * as d3 from 'd3';
-// import {transform} from 'ol/proj';
+
-// import {toStringXY} from 'ol/coordinate';
 import Overlay from 'ol/Overlay';
 
 
@@ -32,7 +30,6 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
   const [featuresLayer, setFeaturesLayer] = useState<VectorLayer>();
   const [selectedFeature, setSelectedFeature] = useState<Feature>();
   const [hoveredFeature, setHoveredFeature] = useState<Feature>();
-  // const [selectedCoord, setSelectedCoord] = useState();
 
   const mapElement = useRef() as
     React.MutableRefObject<HTMLInputElement>;
@@ -47,7 +44,7 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
   mapRef.current = map;
   overlayRef.current = currentOverlay;
 
-  useEffect( () => {
+  useEffect(() => {
     // create and add initial vector source layer, to be replaced layer
     const initialFeaturesLayer = new VectorLayer({
       source: new VectorSource(),
@@ -55,6 +52,7 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
 
     const j40source = new VectorTileSource({
       'format': new MVT(),
+      // Use the below for local development:
       // 'url': 'http://localhost:8080/data/block2010/{z}/{x}/{y}.pbf',
       'url': 'http://usds-geoplatform-justice40-website.s3-website-us-east-1.amazonaws.com/nm/{z}/{x}/{y}.pbf',
     });
@@ -62,6 +60,15 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
     const colors = d3.scaleSequential(d3.interpolateBlues)
         .domain([0, 1]); // d3.scaleOrdinal(d3.interpolateBlues);
 
+    const colorWithAlpha = (data: number, alpha:number ) => {
+      const rgb = colors(data);
+      const rbgArr = rgb.slice(
+          rgb.indexOf('(') + 1,
+          rgb.indexOf(')'),
+      ).split(', ');
+      return `rgba(${rbgArr[0]}, ${rbgArr[1]}, ${rbgArr[2]}, ${alpha})`;
+    };
+
     const j40Layer = new VectorTileLayer({
       declutter: false,
       source: j40source,
@@ -69,12 +76,7 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
         const data = feature.get('score_a_percentile');
         let colorString;
         if (data) {
-          const rgb = colors(data);
+          colorString = colorWithAlpha(data, 0.3);
-          const rbgArr = rgb.slice(
-              rgb.indexOf('(') + 1,
-              rgb.indexOf(')'),
-          ).split(', ');
-          colorString = `rgba(${rbgArr[0]}, ${rbgArr[1]}, ${rbgArr[2]}, 0.5)`;
         } else {
           colorString = 'white';
         }
@@ -131,7 +133,7 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
 
 
   // update map if features prop changes
-  useEffect( () => {
+  useEffect(() => {
     if (features.length) { // may be empty on first render
       // set features to map
       featuresLayer?.setSource(
@@ -179,7 +181,7 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
       return true;
     });
   };
-  const readablePercent = (percent:number) => {
+  const readablePercent = (percent: number) => {
     return `${parseFloat(percent * 100).toFixed(2)}%`;
   };
 
@@ -187,17 +189,27 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
     <>
       <div ref={mapElement} className={styles.mapContainer}></div>
       <div className="clicked-coord-label">
-        <p>{ (hoveredFeature) ? readablePercent(hoveredFeature.properties_['score_a_percentile']) : '' }</p>
+        <p>{(hoveredFeature) ? readablePercent(hoveredFeature.properties_['score_a_percentile']) : ''}</p>
-        {/* <p>{ (selectedCoord) ? toStringXY(selectedCoord, 5) : '' }</p> */}
         <div ref={popupContainer} className={styles.popupContainer}>
           <a href="#" ref={popupCloser} className={styles.popupCloser}></a>
           <div ref={popupContent} className={styles.popupContent}>
-            { (selectedFeature) ?
+            {(selectedFeature) ?
               <div>
                 <h2>Cumulative Index Score:</h2>
                 <h3>{readablePercent(selectedFeature.properties_['score_a_percentile'])}</h3>
+                {/* // this will eventually populate a sidebar
+                <dl>
+                    {
+                      Object.keys(selectedFeature.getProperties()).map((key, index) => (
+                        <>
+                          <dt>{key}</dt>
+                          <dd>{selectedFeature.properties_[key]}</dd>
+                        </>
+                      ))
+                    }
+                  </dl> */}
               </div> :
-                  '' }
+              ''}
 
           </div>
         </div>

client/src/pages/cejst.tsx

@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import Layout from '../components/layout';
 import MapWrapper from '../components/map';
-// import MapControls from '../components/mapControls';
 import HowYouCanHelp from '../components/HowYouCanHelp';
 import Feature from 'ol/Feature';
 import Geometry from 'ol/geom/Geometry';
@@ -38,7 +37,7 @@ const CEJSTPage = ({location}: IMapPageProps) => {
           prioritize Justice40 communities.
         </p>
         <Alert
-          type="warning"
+          type="info"
           heading="Limited Data Sources">
           <p>
             In this tool, we are using data sources that our
@@ -48,7 +47,6 @@ const CEJSTPage = ({location}: IMapPageProps) => {
             are investigating on our data roadmap.
           </p>
         </Alert>
-        {/* <MapControls setFeatures={setFeatures}/> */}
         <MapWrapper features={features} />
         <HowYouCanHelp />
       </main>