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

Zoom fade for higher zoom levels (#265)

Browse source
This commit is contained in:
Nat Hillard 2021-06-30 07:08:22 -04:00 • committed by GitHub
commit 92efc5c937
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 1617 additions and 1348 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,11 @@
export const SCORE_PROPERTY = 'Score D (percentile)';
export const GEOID_PROPERTY = 'GEOID10';
export const GLOBAL_MIN_ZOOM = 3;
export const GLOBAL_MAX_ZOOM = 11;
export const GLOBAL_MIN_ZOOM_LOW = 3;
export const GLOBAL_MAX_ZOOM_LOW = 11;
export const GLOBAL_MIN_ZOOM_HIGH = 9;
export const GLOBAL_MAX_ZOOM_HIGH = 11;
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 };

184
client/src/data/mapStyle.tsx Normal file
View file

@ -0,0 +1,184 @@
import {Style, FillPaint} from 'mapbox-gl';
import chroma from 'chroma-js';
import * as constants from '../data/constants';
// eslint-disable-next-line require-jsdoc
function hexToHSLA(hex:string, alpha:number) {
return chroma(hex).alpha(alpha).css('hsl');
}
/**
* `MakePaint` generates a zoom-faded Mapbox style formatted layer given a set of parameters.
*
* @param {string} field : the field within the data to consult
* @param {number} minRamp : the minimum value this can assume
* @param {number} medRamp : the medium value this can assume
* @param {number} maxRamp : the maximum value this can assume
* @param {boolean} high : whether this is a "high" or "low" layer
* @return {FillPaint} a mapboxgl fill layer
**/
function makePaint({
field,
minRamp,
medRamp,
maxRamp,
high,
}: {
field: string;
minRamp: number;
medRamp: number;
maxRamp: number;
high: boolean;
}): FillPaint {
const minColor = 'white'; // '232, 88%, 100%';
const medColor = '#D1DAE6';
const maxColor = '#768FB3'; // '0, 98%, 56%';
return {
'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 ),
],
],
};
}
const mapStyle : Style = {
'version': 8,
'sources': {
'carto': {
'type': 'raster',
'tiles': [
'https://a.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
'https://b.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
'https://c.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
'https://d.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
],
},
'geo': {
'type': 'raster',
'tiles': [
'https://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}',
],
},
'custom': {
'type': 'vector',
'tiles': [
'https://d2zjid6n5ja2pt.cloudfront.net/0629_demo/{z}/{x}/{y}.pbf',
// For local development, use:
// 'http://localhost:8080/data/tl_2010_bg_with_data/{z}/{x}/{y}.pbf',
],
},
'labels': {
'type': 'raster',
'tiles': [
'https://cartodb-basemaps-a.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}@2x.png',
'https://cartodb-basemaps-b.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}@2x.png',
'https://cartodb-basemaps-c.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}@2x.png',
'https://cartodb-basemaps-d.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}@2x.png',
],
},
},
'layers': [
{
'id': 'carto',
'source': 'carto',
'type': 'raster',
'minzoom': constants.GLOBAL_MIN_ZOOM - 1,
'maxzoom': constants.GLOBAL_MAX_ZOOM + 1,
},
{
'id': 'geo',
'source': 'geo',
'type': 'raster',
'minzoom': constants.GLOBAL_MIN_ZOOM - 1,
'maxzoom': constants.GLOBAL_MAX_ZOOM + 1,
'layout': {
// Make the layer visible by default.
'visibility': 'none',
},
},
{
'id': 'score-low',
'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: 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_HIGH,
'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH,
},
{
'id': 'labels-only',
'type': 'raster',
'source': 'labels',
'minzoom': constants.GLOBAL_MIN_ZOOM,
'maxzoom': constants.GLOBAL_MAX_ZOOM,
},
],
};
export default mapStyle;