Clicking territory focus button sometimes focuses on a different CBG, not the actual territory (#412)

* Fixing #410 - Clicking a CBG region, then another, then hitting territory button results in random CBG being selected

* Part of fix for #410 - refactoring selection
logic to remove setFeatureState call.

* Renaming layers for clarity and adding constants

* Using constant for layer identifier

* Fixes #409 - Loading a URL with lat/lng/zoom specified occasionally does not work . We now parse the URL on page before initializing the map. Also adds tests for this
This commit is contained in:
Nat Hillard 2021-07-27 18:21:47 -04:00 committed by GitHub
commit a2ba9236ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 87 deletions

View file

@ -23,12 +23,16 @@ export const HIGH_SCORE_LAYER_NAME = 'score-high-layer';
export const LOW_SCORE_SOURCE_NAME = 'score-low';
export const LOW_SCORE_LAYER_NAME = 'score-low-layer';
export const SELECTED_PROPERTY = 'selected';
export const CURRENTLY_SELECTED_FEATURE_HIGHLIGHT_LAYER_NAME = 'currently-selected-feature-highlight-layer';
export const BLOCK_GROUP_BOUNDARY_LAYER_NAME = 'block-group-boundary-layer';
// Properties
export const POVERTY_PROPERTY_PERCENTILE = 'Poverty (Less than 200% of federal poverty line) (percentile)';
export const HOUSING_BURDEN_PROPERTY_PERCENTILE = 'Housing burden (percent) (percentile)';
export const LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'Linguistic isolation (percent) (percentile)';
export const UNEMPLOYMENT_PROPERTY_PERCENTILE = 'Unemployed civilians (percent) (percentile)';
export const TOTAL_POPULATION = 'Total population';
export const EDUCATION_PROPERTY_PERCENTILE = 'Percent individuals age 25 or over ' +
'with less than high school degree (percentile)';
@ -99,9 +103,11 @@ export const MIN_COLOR = '#FFFFFF';
export const MED_COLOR = '#D1DAE6';
export const MAX_COLOR = '#768FB3';
export const BORDER_HIGHLIGHT_COLOR = '#00BDE3';
export const CURRENTLY_SELECTED_FEATURE_LAYER_OPACITY = 0.5;
// Widths
export const HIGHLIGHT_BORDER_WIDTH = 5.0;
export const CURRENTLY_SELECTED_FEATURE_LAYER_WIDTH = 0.8;
// Score boundaries
export const SCORE_BOUNDARY_LOW = 0.0;

View file

@ -169,45 +169,6 @@ export const makeMapStyle = (flagContainer: FlagContainer) : Style => {
'maxzoom': constants.GLOBAL_MAX_ZOOM_LOW,
},
{
// "Score-highlights" represents the border
// around given tiles that appears at higher zooms
'id': 'score-highlights-layer',
'source': constants.HIGH_SCORE_SOURCE_NAME,
'source-layer': constants.SCORE_SOURCE_LAYER,
'type': 'line',
'layout': {
'visibility': 'visible',
'line-join': 'round',
'line-cap': 'round',
},
'paint': {
'line-color': constants.DEFAULT_OUTLINE_COLOR,
'line-width': 0.8,
'line-opacity': 0.5,
},
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGHLIGHT,
'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGHLIGHT,
},
{
// "score-border-highlight" is used to highlight
// the currently-selected feature
'id': 'score-border-highlight-layer',
'type': 'line',
'source': constants.HIGH_SCORE_SOURCE_NAME,
'source-layer': constants.SCORE_SOURCE_LAYER,
'layout': {},
'paint': {
'line-color': constants.BORDER_HIGHLIGHT_COLOR,
'line-width': [
'case',
['boolean', ['feature-state', constants.SELECTED_PROPERTY], false],
constants.HIGHLIGHT_BORDER_WIDTH,
0,
],
},
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
},
{
// We put labels last to ensure prominence
'id': 'labels-only-layer',
'type': 'raster',