publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 10:04:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Creating constants file and moving property there, using Score D

Browse source
This commit is contained in:
Nat Hillard 2021-06-29 19:12:08 -04:00
parent 568989d807
commit bf18256a51
4 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/src/components/mapPopup.tsx
View file

@ -5,6 +5,7 @@ import {Table} from '@trussworks/react-uswds';
import {Coordinate} from 'ol/Coordinate'; import {Coordinate} from 'ol/Coordinate';
import Map from 'ol/Map'; import Map from 'ol/Map';
import {FeatureLike} from 'ol/Feature'; import {FeatureLike} from 'ol/Feature';
import * as constants from '../data/constants';
interface IMapPopupProps { interface IMapPopupProps {
map: Map, map: Map,
@ -62,7 +63,7 @@ const MapPopup = ({map, selectedFeature, position}: IMapPopupProps) => {
const getTitleContent = () => { const getTitleContent = () => {
const properties = selectedFeature.getProperties(); const properties = selectedFeature.getProperties();
const blockGroup = properties['GEOID10']; const blockGroup = properties['GEOID10'];
const score = properties['Score C (percentile)']; const score = properties[constants.SCORE_PROPERTY];
return ( return (
<table> <table>
<tbody> <tbody>

2
client/src/components/mapWrapper.tsx
View file

@ -2,6 +2,7 @@ import * as React from 'react';
import {useFlags} from '../contexts/FlagContext'; import {useFlags} from '../contexts/FlagContext';
import MapboxMap from './mapboxMap'; import MapboxMap from './mapboxMap';
import OpenLayersMap from './openlayersMap'; import OpenLayersMap from './openlayersMap';
import * as constants from '../data/constants';
const MapWrapper = () => { const MapWrapper = () => {
const flags = useFlags(); const flags = useFlags();
@ -12,6 +13,7 @@ const MapWrapper = () => {
<MapboxMap /> : <MapboxMap /> :
<OpenLayersMap features={[]}/> <OpenLayersMap features={[]}/>
} }
<p>Current Score Property: {constants.SCORE_PROPERTY}</p>
</div> </div>
); );
}; };

1
client/src/data/constants.tsx Normal file
View file

@ -0,0 +1 @@
export const SCORE_PROPERTY = 'Score D (percentile)';

13
client/src/data/mapStyle.tsx
View file

@ -1,5 +1,6 @@
import {Style, FillPaint} from 'mapbox-gl'; import {Style, FillPaint} from 'mapbox-gl';
import chroma from 'chroma-js'; import chroma from 'chroma-js';
import * as constants from '../data/constants';
// eslint-disable-next-line require-jsdoc // eslint-disable-next-line require-jsdoc
function hexToHSLA(hex:string, alpha:number) { function hexToHSLA(hex:string, alpha:number) {
@ -98,7 +99,7 @@ const mapStyle : Style = {
'custom': { 'custom': {
'type': 'vector', 'type': 'vector',
'tiles': [ 'tiles': [
'https://d2zjid6n5ja2pt.cloudfront.net/0624_demo/{z}/{x}/{y}.pbf', 'https://d2zjid6n5ja2pt.cloudfront.net/0629_demo/{z}/{x}/{y}.pbf',
// For local development, use: // For local development, use:
// 'http://localhost:8080/data/tl_2010_bg_with_data/{z}/{x}/{y}.pbf', // 'http://localhost:8080/data/tl_2010_bg_with_data/{z}/{x}/{y}.pbf',
], ],
@ -138,11 +139,11 @@ const mapStyle : Style = {
'source-layer': 'blocks', 'source-layer': 'blocks',
'type': 'fill', 'type': 'fill',
'filter': ['all', 'filter': ['all',
['>', 'Score C (percentile)', 0.6], ['>', constants.SCORE_PROPERTY, 0.6],
// ['in', 'STATEFP10', '01', '30', '34', '35', '36'], // ['in', 'STATEFP10', '01', '30', '34', '35', '36'],
], ],
'paint': makePaint({ 'paint': makePaint({
field: 'Score C (percentile)', field: constants.SCORE_PROPERTY,
minRamp: 0, minRamp: 0,
medRamp: 0.6, medRamp: 0.6,
maxRamp: 0.75, maxRamp: 0.75,
@ -155,11 +156,11 @@ const mapStyle : Style = {
'source-layer': 'blocks', 'source-layer': 'blocks',
'type': 'fill', 'type': 'fill',
'filter': ['all', 'filter': ['all',
['>', 'Score C (percentile)', 0.6], ['>', constants.SCORE_PROPERTY, 0.6],
['in', 'STATEFP10', '01', '30', '34', '35', '36'], // ['in', 'STATEFP10', '01', '30', '34', '35', '36'],
], ],
'paint': makePaint({ 'paint': makePaint({
field: 'Score C (percentile)', field: constants.SCORE_PROPERTY,
minRamp: 0, minRamp: 0,
medRamp: 0.6, medRamp: 0.6,
maxRamp: 1.0, maxRamp: 1.0,