mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-10-01 15:33:17 -07:00
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:
parent
36f43b2d44
commit
a2ba9236ab
6 changed files with 78 additions and 87 deletions
|
@ -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;
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue