publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-30 07:11:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Census block groups should highlight when selected (#317)

Browse source 
* Fixes #280 - adds territory focus buttons for Alaska, Hawaii, Lower 48, and Puerto Rico to enable easy zoom to these locations

* Adding tests - Specifically:
    * Adding VSCode debug command for Cypress and debug port specification
    * Disabling CORS on local tests
    * Adding waitForMapIdle Cypress test helper
    * Adding constants for easy change and access
This commit is contained in:
Nat Hillard 2021-07-09 10:56:38 -04:00 • committed by GitHub
commit d0c281ec72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 126 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

11
client/src/data/constants.tsx
View file

@ -1,6 +1,16 @@
// URLS
export const FEATURE_TILE_BASE_URL = 'https://d2zjid6n5ja2pt.cloudfront.net/0629_demo';
// Performance markers
export const PERFORMANCE_MARKER_MAP_IDLE = 'MAP_IDLE';
// Properties
export const SCORE_PROPERTY = 'Score D (percentile)';
export const GEOID_PROPERTY = 'GEOID10';
export const SCORE_SOURCE_NAME = 'score';
// The name of the layer within the tiles that contains the score
export const SCORE_SOURCE_LAYER = 'blocks';
export type J40Properties = { [key: string]: any };
@ -63,3 +73,4 @@ export const DEFAULT_OUTLINE_COLOR = '#4EA5CF';
export const MIN_COLOR = '#FFFFFF';
export const MED_COLOR = '#D1DAE6';
export const MAX_COLOR = '#768FB3';
export const BORDER_HIGHLIGHT_COLOR = '#00BDE3';

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

@ -63,8 +63,11 @@ const mapStyle : Style = {
},
'score': {
'type': 'vector',
// Our current tippecanoe command does not set an id.
// The below line promotes the GEOID10 property to the ID
'promoteId': 'GEOID10',
'tiles': [
'https://d2zjid6n5ja2pt.cloudfront.net/0629_demo/{z}/{x}/{y}.pbf',
`${constants.FEATURE_TILE_BASE_URL}/{z}/{x}/{y}.pbf`,
// For local development, use:
// 'http://localhost:8080/data/tl_2010_bg_with_data/{z}/{x}/{y}.pbf',
],
@ -98,8 +101,8 @@ const mapStyle : Style = {
},
{
'id': 'score',
'source': 'score',
'source-layer': 'blocks',
'source': constants.SCORE_SOURCE_NAME,
'source-layer': constants.SCORE_SOURCE_LAYER,
'type': 'fill',
'filter': ['all',
['>', constants.SCORE_PROPERTY, 0.6],
@ -117,7 +120,7 @@ const mapStyle : Style = {
{
'id': 'score-highlights',
'source': 'score',
'source-layer': 'blocks',
'source-layer': constants.SCORE_SOURCE_LAYER,
'type': 'line',
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
'layout': {
@ -131,6 +134,24 @@ const mapStyle : Style = {
'line-opacity': 0.5,
},
},
{
// This layer queries the feature-state property "selected" and
// highlights the border of the selected region if true
'id': 'score-border-highlight',
'type': 'line',
'source': 'score',
'source-layer': constants.SCORE_SOURCE_LAYER,
'layout': {},
'paint': {
'line-color': constants.BORDER_HIGHLIGHT_COLOR,
'line-width': [
'case',
['boolean', ['feature-state', 'selected'], false],
5.0,
0,
],
},
},
{
'id': 'labels-only',
'type': 'raster',