From 565b8b0ec4670f5ece99a60819ea2877316c663f Mon Sep 17 00:00:00 2001 From: Nat Hillard Date: Mon, 21 Jun 2021 22:36:00 -0400 Subject: [PATCH] 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 | 56 +++++++++++++++++++++-------------- client/src/pages/cejst.tsx | 4 +-- 2 files changed, 35 insertions(+), 25 deletions(-) diff --git a/client/src/components/map.tsx b/client/src/components/map.tsx index 4c924a8f..c5cffe0f 100644 --- a/client/src/components/map.tsx +++ b/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,10 +30,9 @@ const MapWrapper = ({features}: IMapWrapperProps) => { const [featuresLayer, setFeaturesLayer] = useState(); const [selectedFeature, setSelectedFeature] = useState(); const [hoveredFeature, setHoveredFeature] = useState(); - // const [selectedCoord, setSelectedCoord] = useState(); const mapElement = useRef() as - React.MutableRefObject; + React.MutableRefObject; const mapRef = useRef() as React.MutableRefObject; @@ -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); - const rbgArr = rgb.slice( - rgb.indexOf('(') + 1, - rgb.indexOf(')'), - ).split(', '); - colorString = `rgba(${rbgArr[0]}, ${rbgArr[1]}, ${rbgArr[2]}, 0.5)`; + colorString = colorWithAlpha(data, 0.3); } 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) => { <>
-

{ (hoveredFeature) ? readablePercent(hoveredFeature.properties_['score_a_percentile']) : '' }

- {/*

{ (selectedCoord) ? toStringXY(selectedCoord, 5) : '' }

*/} +

{(hoveredFeature) ? readablePercent(hoveredFeature.properties_['score_a_percentile']) : ''}

- { (selectedFeature) ? -
-

Cumulative Index Score:

-

{readablePercent(selectedFeature.properties_['score_a_percentile'])}

-
: - '' } + {(selectedFeature) ? +
+

Cumulative Index Score:

+

{readablePercent(selectedFeature.properties_['score_a_percentile'])}

+ {/* // this will eventually populate a sidebar +
+ { + Object.keys(selectedFeature.getProperties()).map((key, index) => ( + <> +
{key}
+
{selectedFeature.properties_[key]}
+ + )) + } +
*/} +
: + ''}
diff --git a/client/src/pages/cejst.tsx b/client/src/pages/cejst.tsx index cad5d461..4c31e0bf 100644 --- a/client/src/pages/cejst.tsx +++ b/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.

In this tool, we are using data sources that our @@ -48,7 +47,6 @@ const CEJSTPage = ({location}: IMapPageProps) => { are investigating on our data roadmap.

- {/* */}