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

Followup styling fixes (#335)

Browse source 
* Followup to add proper score property to popup
* Adding Additional property name constants
This commit is contained in:
Nat Hillard 2021-07-13 11:17:49 -04:00 • committed by GitHub
commit 6c8d71c5b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/cypress/e2e/map.spec.js
View file

@ -54,7 +54,7 @@ describe('Tests for the Explore the Map page', () => {
cy.waitForMapIdle(map); cy.waitForMapIdle(map);
map.fire('click', {lngLat: punx1001Info.coords}); map.fire('click', {lngLat: punx1001Info.coords});
const punx1001FeatureState = getFeatureState(map, punx1001Info.id); const punx1001FeatureState = getFeatureState(map, punx1001Info.id);
expect(punx1001FeatureState).to.deep.equal({'selected': true}); expect(punx1001FeatureState).to.deep.equal({[constants.SELECTED_PROPERTY]: true});
}); });
}); });
}); });

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

@ -63,7 +63,7 @@ const J40Map = () => {
source: feature.source, source: feature.source,
sourceLayer: feature.sourceLayer, sourceLayer: feature.sourceLayer,
id: feature.id, id: feature.id,
}, {selected: isSelected}); }, {[constants.SELECTED_PROPERTY]: isSelected});
if (isSelected) { if (isSelected) {
selectedFeature.current = feature; selectedFeature.current = feature;
} else { } else {

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

@ -26,7 +26,7 @@ const PopupContent = ({properties}:IPopupContentProps) => {
const getTitleContent = (properties: constants.J40Properties) => { const getTitleContent = (properties: constants.J40Properties) => {
const blockGroup = properties[constants.GEOID_PROPERTY]; const blockGroup = properties[constants.GEOID_PROPERTY];
const score = properties[constants.SCORE_PROPERTY] as number; const score = properties[constants.SCORE_PROPERTY_HIGH] as number;
return ( return (
<div className={styles.titleContainer}> <div className={styles.titleContainer}>
<div> <div>

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

@ -16,6 +16,7 @@ export const HIGH_SCORE_SOURCE_NAME = 'score-high';
export const HIGH_SCORE_LAYER_NAME = 'score-high-layer'; export const HIGH_SCORE_LAYER_NAME = 'score-high-layer';
export const LOW_SCORE_SOURCE_NAME = 'score-low'; export const LOW_SCORE_SOURCE_NAME = 'score-low';
export const LOW_SCORE_LAYER_NAME = 'score-low-layer'; export const LOW_SCORE_LAYER_NAME = 'score-low-layer';
export const SELECTED_PROPERTY = 'selected';
// The name of the layer within the tiles that contains the score // The name of the layer within the tiles that contains the score
export const SCORE_SOURCE_LAYER = 'blocks'; export const SCORE_SOURCE_LAYER = 'blocks';

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

@ -68,7 +68,7 @@ const mapStyle : Style = {
'minzoom': constants.GLOBAL_MIN_ZOOM, 'minzoom': constants.GLOBAL_MIN_ZOOM,
'maxzoom': constants.GLOBAL_MAX_ZOOM, 'maxzoom': constants.GLOBAL_MAX_ZOOM,
}, },
'score-high': { [constants.HIGH_SCORE_SOURCE_NAME]: {
// "Score-high" represents the full set of data // "Score-high" represents the full set of data
// at the census block group level. It is only shown // at the census block group level. It is only shown
// at high zoom levels to avoid performance issues at lower zooms // at high zoom levels to avoid performance issues at lower zooms
@ -85,7 +85,7 @@ const mapStyle : Style = {
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH, 'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH, 'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH,
}, },
'score-low': { [constants.LOW_SCORE_SOURCE_NAME]: {
// "Score-low" represents a tileset at the level of bucketed tracts. // "Score-low" represents a tileset at the level of bucketed tracts.
// census block group information is `dissolve`d into tracts, then // census block group information is `dissolve`d into tracts, then
// each tract is `dissolve`d into one of ten buckets. It is meant // each tract is `dissolve`d into one of ten buckets. It is meant
@ -165,7 +165,7 @@ const mapStyle : Style = {
{ {
// "Score-highlights" represents the border // "Score-highlights" represents the border
// around given tiles that appears at higher zooms // around given tiles that appears at higher zooms
'id': 'score-highlights', 'id': 'score-highlights-layer',
'source': constants.HIGH_SCORE_SOURCE_NAME, 'source': constants.HIGH_SCORE_SOURCE_NAME,
'source-layer': constants.SCORE_SOURCE_LAYER, 'source-layer': constants.SCORE_SOURCE_LAYER,
'type': 'line', 'type': 'line',
@ -185,7 +185,7 @@ const mapStyle : Style = {
{ {
// "score-border-highlight" is used to highlight // "score-border-highlight" is used to highlight
// the currently-selected feature // the currently-selected feature
'id': 'score-border-highlight', 'id': 'score-border-highlight-layer',
'type': 'line', 'type': 'line',
'source': constants.HIGH_SCORE_SOURCE_NAME, 'source': constants.HIGH_SCORE_SOURCE_NAME,
'source-layer': constants.SCORE_SOURCE_LAYER, 'source-layer': constants.SCORE_SOURCE_LAYER,
@ -194,7 +194,7 @@ const mapStyle : Style = {
'line-color': constants.BORDER_HIGHLIGHT_COLOR, 'line-color': constants.BORDER_HIGHLIGHT_COLOR,
'line-width': [ 'line-width': [
'case', 'case',
['boolean', ['feature-state', 'selected'], false], ['boolean', ['feature-state', constants.SELECTED_PROPERTY], false],
constants.HIGHLIGHT_BORDER_WIDTH, constants.HIGHLIGHT_BORDER_WIDTH,
0, 0,
], ],
@ -204,7 +204,7 @@ const mapStyle : Style = {
}, },
{ {
// We put labels last to ensure prominence // We put labels last to ensure prominence
'id': 'labels-only', 'id': 'labels-only-layer',
'type': 'raster', 'type': 'raster',
'source': 'labels', 'source': 'labels',
'minzoom': constants.GLOBAL_MIN_ZOOM, 'minzoom': constants.GLOBAL_MIN_ZOOM,