mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-30 07:11:39 -07:00
Parameterize zoom experiments (#339)
* Adding ability to set flags in url * parameterizing tile layers
This commit is contained in:
Nat Hillard
GitHub
parent
6c8d71c5b9
commit
3cd6e06115
6 changed files with 188 additions and 163 deletions
|
|
@ -1,8 +1,11 @@
|
|||
// URLS
|
||||
export const FEATURE_TILE_BASE_URL = 'https://d2zjid6n5ja2pt.cloudfront.net';
|
||||
const XYZ_SUFFIX = '{z}/{x}/{y}.pbf';
|
||||
export const FEATURE_TILE_HIGH_ZOOM_URL = `${FEATURE_TILE_BASE_URL}/0629_demo/${XYZ_SUFFIX}`;
|
||||
export const FEATURE_TILE_LOW_ZOOM_URL = `${FEATURE_TILE_BASE_URL}/tiles_low/${XYZ_SUFFIX}`;
|
||||
export const featureURLForTilesetName = (tilesetName :string ) : string => {
|
||||
return `${FEATURE_TILE_BASE_URL}/${tilesetName}/${XYZ_SUFFIX}`;
|
||||
};
|
||||
export const FEATURE_TILE_HIGH_ZOOM_URL = featureURLForTilesetName('0629_demo');
|
||||
export const FEATURE_TILE_LOW_ZOOM_URL = featureURLForTilesetName('tiles_low');
|
||||
|
||||
|
||||
// Performance markers
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {Style, FillPaint} from 'maplibre-gl';
|
||||
import chroma from 'chroma-js';
|
||||
import * as constants from '../data/constants';
|
||||
import {FlagContainer} from '../contexts/FlagContext';
|
||||
|
||||
// eslint-disable-next-line require-jsdoc
|
||||
function hexToHSLA(hex:string, alpha:number) {
|
||||
|
|
@ -45,172 +46,177 @@ function makePaint({
|
|||
|
||||
const imageSuffix = constants.isMobile ? '' : '@2x';
|
||||
|
||||
const mapStyle : Style = {
|
||||
'version': 8,
|
||||
'sources': {
|
||||
'carto': {
|
||||
'type': 'raster',
|
||||
'tiles':
|
||||
export const makeMapStyle = (flagContainer: FlagContainer) : Style => {
|
||||
return {
|
||||
'version': 8,
|
||||
'sources': {
|
||||
'carto': {
|
||||
'type': 'raster',
|
||||
'tiles':
|
||||
[
|
||||
`https://a.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
`https://b.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
`https://c.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
`https://d.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
],
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
'geo': {
|
||||
'type': 'raster',
|
||||
'tiles': [
|
||||
'https://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}',
|
||||
],
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
[constants.HIGH_SCORE_SOURCE_NAME]: {
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
'geo': {
|
||||
'type': 'raster',
|
||||
'tiles': [
|
||||
'https://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}',
|
||||
],
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
[constants.HIGH_SCORE_SOURCE_NAME]: {
|
||||
// "Score-high" represents the full set of data
|
||||
// at the census block group level. It is only shown
|
||||
// at high zoom levels to avoid performance issues at lower zooms
|
||||
'type': 'vector',
|
||||
// Our current tippecanoe command does not set an id.
|
||||
// The below line promotes the GEOID10 property to the ID
|
||||
'promoteId': constants.GEOID_PROPERTY,
|
||||
'tiles': [
|
||||
constants.FEATURE_TILE_HIGH_ZOOM_URL,
|
||||
],
|
||||
// Seeting maxzoom here enables 'overzooming'
|
||||
// e.g. continued zooming beyond the max bounds.
|
||||
// More here: https://docs.mapbox.com/help/glossary/overzoom/
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH,
|
||||
},
|
||||
[constants.LOW_SCORE_SOURCE_NAME]: {
|
||||
'type': 'vector',
|
||||
// Our current tippecanoe command does not set an id.
|
||||
// The below line promotes the GEOID10 property to the ID
|
||||
'promoteId': constants.GEOID_PROPERTY,
|
||||
'tiles': [
|
||||
'high_tiles' in flagContainer ?
|
||||
constants.featureURLForTilesetName(flagContainer['high_tiles']) :
|
||||
constants.FEATURE_TILE_HIGH_ZOOM_URL,
|
||||
],
|
||||
// Seeting maxzoom here enables 'overzooming'
|
||||
// e.g. continued zooming beyond the max bounds.
|
||||
// More here: https://docs.mapbox.com/help/glossary/overzoom/
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH,
|
||||
},
|
||||
[constants.LOW_SCORE_SOURCE_NAME]: {
|
||||
// "Score-low" represents a tileset at the level of bucketed tracts.
|
||||
// census block group information is `dissolve`d into tracts, then
|
||||
// each tract is `dissolve`d into one of ten buckets. It is meant
|
||||
// to give us a favorable tradeoff between performance and fidelity.
|
||||
'type': 'vector',
|
||||
'promoteId': constants.GEOID_PROPERTY,
|
||||
'tiles': [
|
||||
constants.FEATURE_TILE_LOW_ZOOM_URL,
|
||||
'type': 'vector',
|
||||
'promoteId': constants.GEOID_PROPERTY,
|
||||
'tiles': [
|
||||
'low_tiles' in flagContainer ?
|
||||
constants.featureURLForTilesetName(flagContainer['low_tiles']) :
|
||||
constants.FEATURE_TILE_LOW_ZOOM_URL,
|
||||
// For local development, use:
|
||||
// 'http://localhost:8080/data/tl_2010_bg_with_data/{z}/{x}/{y}.pbf',
|
||||
],
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM_LOW,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM_LOW,
|
||||
},
|
||||
'labels': {
|
||||
'type': 'raster',
|
||||
'tiles': [
|
||||
`https://cartodb-basemaps-a.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
`https://cartodb-basemaps-b.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
`https://cartodb-basemaps-c.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
`https://cartodb-basemaps-d.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
],
|
||||
},
|
||||
},
|
||||
'layers': [
|
||||
{
|
||||
'id': 'carto',
|
||||
'source': 'carto',
|
||||
'type': 'raster',
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
{
|
||||
'id': 'geo',
|
||||
'source': 'geo',
|
||||
'type': 'raster',
|
||||
'layout': {
|
||||
// Make the layer invisible by default.
|
||||
'visibility': 'none',
|
||||
],
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM_LOW,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM_LOW,
|
||||
},
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
{
|
||||
'id': constants.HIGH_SCORE_LAYER_NAME,
|
||||
'source': constants.HIGH_SCORE_SOURCE_NAME,
|
||||
'source-layer': constants.SCORE_SOURCE_LAYER,
|
||||
'type': 'fill',
|
||||
'filter': ['all',
|
||||
['>', constants.SCORE_PROPERTY_HIGH, constants.SCORE_BOUNDARY_THRESHOLD],
|
||||
],
|
||||
'paint': makePaint({
|
||||
field: constants.SCORE_PROPERTY_HIGH,
|
||||
minRamp: constants.SCORE_BOUNDARY_LOW,
|
||||
medRamp: constants.SCORE_BOUNDARY_THRESHOLD,
|
||||
maxRamp: constants.SCORE_BOUNDARY_PRIORITIZED,
|
||||
}),
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
|
||||
},
|
||||
{
|
||||
'id': constants.LOW_SCORE_LAYER_NAME,
|
||||
'source': constants.LOW_SCORE_SOURCE_NAME,
|
||||
'source-layer': constants.SCORE_SOURCE_LAYER,
|
||||
'type': 'fill',
|
||||
'filter': ['all',
|
||||
['>', constants.SCORE_PROPERTY_LOW, constants.SCORE_BOUNDARY_THRESHOLD],
|
||||
],
|
||||
'paint': makePaint({
|
||||
field: constants.SCORE_PROPERTY_LOW,
|
||||
minRamp: constants.SCORE_BOUNDARY_LOW,
|
||||
medRamp: constants.SCORE_BOUNDARY_THRESHOLD,
|
||||
maxRamp: constants.SCORE_BOUNDARY_PRIORITIZED,
|
||||
}),
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM_LOW,
|
||||
'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,
|
||||
'labels': {
|
||||
'type': 'raster',
|
||||
'tiles': [
|
||||
`https://cartodb-basemaps-a.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
`https://cartodb-basemaps-b.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
`https://cartodb-basemaps-c.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
`https://cartodb-basemaps-d.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}${imageSuffix}.png`,
|
||||
],
|
||||
},
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH,
|
||||
},
|
||||
{
|
||||
'layers': [
|
||||
{
|
||||
'id': 'carto',
|
||||
'source': 'carto',
|
||||
'type': 'raster',
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
{
|
||||
'id': 'geo',
|
||||
'source': 'geo',
|
||||
'type': 'raster',
|
||||
'layout': {
|
||||
// Make the layer invisible by default.
|
||||
'visibility': 'none',
|
||||
},
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
{
|
||||
'id': constants.HIGH_SCORE_LAYER_NAME,
|
||||
'source': constants.HIGH_SCORE_SOURCE_NAME,
|
||||
'source-layer': constants.SCORE_SOURCE_LAYER,
|
||||
'type': 'fill',
|
||||
'filter': ['all',
|
||||
['>', constants.SCORE_PROPERTY_HIGH, constants.SCORE_BOUNDARY_THRESHOLD],
|
||||
],
|
||||
'paint': makePaint({
|
||||
field: constants.SCORE_PROPERTY_HIGH,
|
||||
minRamp: constants.SCORE_BOUNDARY_LOW,
|
||||
medRamp: constants.SCORE_BOUNDARY_THRESHOLD,
|
||||
maxRamp: constants.SCORE_BOUNDARY_PRIORITIZED,
|
||||
}),
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
|
||||
},
|
||||
{
|
||||
'id': constants.LOW_SCORE_LAYER_NAME,
|
||||
'source': constants.LOW_SCORE_SOURCE_NAME,
|
||||
'source-layer': constants.SCORE_SOURCE_LAYER,
|
||||
'type': 'fill',
|
||||
'filter': ['all',
|
||||
['>', constants.SCORE_PROPERTY_LOW, constants.SCORE_BOUNDARY_THRESHOLD],
|
||||
],
|
||||
'paint': makePaint({
|
||||
field: constants.SCORE_PROPERTY_LOW,
|
||||
minRamp: constants.SCORE_BOUNDARY_LOW,
|
||||
medRamp: constants.SCORE_BOUNDARY_THRESHOLD,
|
||||
maxRamp: constants.SCORE_BOUNDARY_PRIORITIZED,
|
||||
}),
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM_LOW,
|
||||
'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,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH,
|
||||
},
|
||||
{
|
||||
// We put labels last to ensure prominence
|
||||
'id': 'labels-only-layer',
|
||||
'type': 'raster',
|
||||
'source': 'labels',
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
],
|
||||
'id': 'labels-only-layer',
|
||||
'type': 'raster',
|
||||
'source': 'labels',
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
export default mapStyle;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue