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

Various map styling fixes (#278)

Browse source 
Addresses #182, #291, #273 and #191 

In particular:
* Removes zoom fading for now
* adds legend
* Styles mapbox popup correctly
* Styles zoom control
* Adds feature borders at higher zoom levels
This commit is contained in:
Nat Hillard 2021-07-01 12:57:59 -04:00 • committed by GitHub
commit beac44ef20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 236 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,26 @@
// Properties
export const SCORE_PROPERTY = 'Score D (percentile)';
export const GEOID_PROPERTY = 'GEOID10';
export type J40Properties = { [key: string]: any };
// Zoom
export const GLOBAL_MIN_ZOOM = 3;
export const GLOBAL_MAX_ZOOM = 11;
export const GLOBAL_MAX_ZOOM = 22;
export const GLOBAL_MIN_ZOOM_LOW = 3;
export const GLOBAL_MAX_ZOOM_LOW = 11;
export const GLOBAL_MAX_ZOOM_LOW = 9;
export const GLOBAL_MIN_ZOOM_HIGH = 9;
export const GLOBAL_MAX_ZOOM_HIGH = 11;
export const GLOBAL_MAX_ZOOM_HIGH = 12;
// Bounds
export const GLOBAL_MAX_BOUNDS = [[-167.276413, 5.499550], [-52.233040, 83.162102]];
export const DEFAULT_CENTER = [32.4687126, -86.502136];
export type J40Properties = { [key: string]: any };
// Opacity
export const DEFAULT_LAYER_OPACITY = 0.6;
// Colors
export const DEFAULT_OUTLINE_COLOR = '#4EA5CF';
export const MIN_COLOR = '#FFFFFF';
export const MED_COLOR = '#D1DAE6';
export const MAX_COLOR = '#768FB3';

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

@ -22,7 +22,7 @@ function makePaint({
minRamp,
medRamp,
maxRamp,
high,
high = true,
}: {
field: string;
minRamp: number;
@ -30,52 +30,20 @@ function makePaint({
maxRamp: number;
high: boolean;
}): FillPaint {
const minColor = 'white'; // '232, 88%, 100%';
const medColor = '#D1DAE6';
const maxColor = '#768FB3'; // '0, 98%, 56%';
return {
const paintDescriptor : FillPaint = {
'fill-color': [
'interpolate',
['linear'],
['zoom'],
high ? 9 : 0,
[
'step',
['get', field],
hexToHSLA(minColor, high ? 0 : 0.5 ),
minRamp,
hexToHSLA(minColor, high ? 0 : 0.5 ),
medRamp,
hexToHSLA(medColor, high ? 0 : 0.5 ),
maxRamp,
hexToHSLA(maxColor, high ? 0 : 0.5 ),
],
high ? 11 : 9,
[
'step',
['get', field],
hexToHSLA(minColor, high ? 0.5 : 0.5 ),
minRamp,
hexToHSLA(minColor, high ? 0.5 : 0.5 ),
medRamp,
hexToHSLA(medColor, high ? 0.5 : 0.5 ),
maxRamp,
hexToHSLA(maxColor, high ? 0.5 : 0.5 ),
],
high ? 22 : 11,
[
'step',
['get', field],
hexToHSLA(minColor, high ? 0.5 : 0 ),
minRamp,
hexToHSLA(minColor, high ? 0.5 : 0 ),
medRamp,
hexToHSLA(medColor, high ? 0.5 : 0 ),
maxRamp,
hexToHSLA(maxColor, high ? 0.5 : 0 ),
],
'step',
['get', field],
hexToHSLA(constants.MIN_COLOR, constants.DEFAULT_LAYER_OPACITY ),
minRamp,
hexToHSLA(constants.MIN_COLOR, constants.DEFAULT_LAYER_OPACITY ),
medRamp,
hexToHSLA(constants.MED_COLOR, constants.DEFAULT_LAYER_OPACITY ),
maxRamp,
hexToHSLA(constants.MAX_COLOR, constants.DEFAULT_LAYER_OPACITY ),
],
};
return paintDescriptor;
}
const mapStyle : Style = {
@ -96,7 +64,7 @@ const mapStyle : Style = {
'https://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}',
],
},
'custom': {
'score': {
'type': 'vector',
'tiles': [
'https://d2zjid6n5ja2pt.cloudfront.net/0629_demo/{z}/{x}/{y}.pbf',
@ -134,8 +102,8 @@ const mapStyle : Style = {
},
},
{
'id': 'score-low',
'source': 'custom',
'id': 'score',
'source': 'score',
'source-layer': 'blocks',
'type': 'fill',
'filter': ['all',
@ -147,29 +115,28 @@ const mapStyle : Style = {
minRamp: 0,
medRamp: 0.6,
maxRamp: 0.75,
high: false,
}),
'minzoom': constants.GLOBAL_MIN_ZOOM_LOW,
'maxzoom': constants.GLOBAL_MAX_ZOOM_LOW,
},
{
'id': 'score-high',
'source': 'custom',
'source-layer': 'blocks',
'type': 'fill',
'filter': ['all',
['>', constants.SCORE_PROPERTY, 0.6],
// ['in', 'STATEFP10', '01', '30', '34', '35', '36'],
],
'paint': makePaint({
field: constants.SCORE_PROPERTY,
minRamp: 0,
medRamp: 0.6,
maxRamp: 1.0,
high: true,
}),
'minzoom': constants.GLOBAL_MIN_ZOOM,
'maxzoom': constants.GLOBAL_MAX_ZOOM,
},
{
'id': 'score-highlights',
'source': 'score',
'source-layer': 'blocks',
'type': 'line',
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH,
'layout': {
'visibility': 'visible',
'line-join': 'round',
'line-cap': 'round',
},
'paint': {
'line-color': constants.DEFAULT_OUTLINE_COLOR,
'line-width': 0.8,
'line-opacity': 0.5,
},
},
{
'id': 'labels-only',