mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-06 09:04:19 -07:00
e1b5c598da
- getOSBaseMap and Map*Layers should have the same layer comments - modify constants to have matching styles between Tribal and Tracts
311 lines
10 KiB
TypeScript
311 lines
10 KiB
TypeScript
import {Style} from 'maplibre-gl';
|
|
|
|
import {featureURLForTilesetName} from '../components/MapTractLayers/MapTractLayers';
|
|
import {tribalURL} from '../components/MapTribalLayers/MapTribalLayers';
|
|
|
|
import * as constants from '../data/constants';
|
|
|
|
// *********** OPEN SOURCE BASE MAP CONSTANTS ***************
|
|
const imageSuffix = constants.isMobile ? '' : '@2x';
|
|
|
|
// Original "light" Base layer
|
|
// Additional layers found here: https://carto.com/help/building-maps/basemap-list/#carto-vector-basemaps
|
|
const cartoLightBaseLayer = {
|
|
noLabels: [
|
|
`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`,
|
|
],
|
|
labelsOnly: [
|
|
`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`,
|
|
],
|
|
};
|
|
|
|
|
|
// *********** OPEN SOURCE STATIC MAP STYLES ***************
|
|
/**
|
|
* This function will be called when there is no MapBox token found. This function will
|
|
* return the open source base map along with styles for the chosen source. We currently
|
|
* have two sources, either the census tracts or the tribal layer.
|
|
* *
|
|
* This function returns a Style in accordance to JSON spec of MapBox
|
|
* https://docs.mapbox.com/mapbox-gl-js/style-spec/
|
|
*
|
|
* @param {boolean} censusSelected
|
|
* @return {Style}
|
|
*/
|
|
export const getOSBaseMap = (
|
|
censusSelected: boolean,
|
|
) : Style => {
|
|
return !censusSelected ? {
|
|
|
|
/**
|
|
* Tribal Source
|
|
*/
|
|
'version': 8,
|
|
|
|
/**
|
|
* Map Sources
|
|
* */
|
|
'sources': {
|
|
|
|
/**
|
|
* The base map source source allows us to define where the tiles can be fetched from.
|
|
*/
|
|
[constants.BASE_MAP_SOURCE_NAME]: {
|
|
'type': 'raster',
|
|
'tiles': cartoLightBaseLayer.noLabels,
|
|
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
|
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
|
},
|
|
|
|
/**
|
|
* Tribal source
|
|
*/
|
|
[constants.TRIBAL_SOURCE_NAME]: {
|
|
'type': 'vector',
|
|
'promoteId': constants.TRIBAL_ID,
|
|
'tiles': [tribalURL()],
|
|
'minzoom': constants.TRIBAL_MIN_ZOOM,
|
|
'maxzoom': constants.TRIBAL_MAX_ZOOM,
|
|
},
|
|
|
|
// The labels source:
|
|
'labels': {
|
|
'type': 'raster',
|
|
'tiles': cartoLightBaseLayer.labelsOnly,
|
|
},
|
|
},
|
|
|
|
|
|
/**
|
|
* Tribal Layers
|
|
*/
|
|
'layers': [
|
|
|
|
// The baseMapLayer
|
|
{
|
|
'id': constants.BASE_MAP_LAYER_ID,
|
|
'source': constants.BASE_MAP_SOURCE_NAME,
|
|
'type': 'raster',
|
|
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
|
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
|
},
|
|
|
|
/**
|
|
* Tribal layer
|
|
*/
|
|
{
|
|
'id': constants.TRIBAL_LAYER_ID,
|
|
'source': constants.TRIBAL_SOURCE_NAME,
|
|
'source-layer': constants.TRIBAL_SOURCE_LAYER,
|
|
'type': 'fill',
|
|
'paint': {
|
|
'fill-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
|
|
'fill-opacity': constants.HIGH_ZOOM_PRIORITIZED_FEATURE_FILL_OPACITY,
|
|
},
|
|
'minzoom': constants.TRIBAL_MIN_ZOOM,
|
|
'maxzoom': constants.TRIBAL_MAX_ZOOM,
|
|
},
|
|
|
|
/**
|
|
* Tribal layer - controls the border between features
|
|
*/
|
|
{
|
|
'id': constants.FEATURE_BORDER_LAYER_ID,
|
|
'source': constants.TRIBAL_SOURCE_NAME,
|
|
'source-layer': constants.TRIBAL_SOURCE_LAYER,
|
|
'type': 'line',
|
|
'paint': {
|
|
'line-color': constants.FEATURE_BORDER_COLOR,
|
|
'line-width': constants.FEATURE_BORDER_WIDTH,
|
|
'line-opacity': constants.FEATURE_BORDER_OPACITY},
|
|
'minzoom': constants.TRIBAL_MIN_ZOOM,
|
|
'maxzoom': constants.TRIBAL_MAX_ZOOM,
|
|
},
|
|
|
|
/**
|
|
* Alaska layer
|
|
*/
|
|
{
|
|
'id': constants.TRIBAL_ALASKA_POINTS_LAYER_ID,
|
|
'source': constants.TRIBAL_SOURCE_NAME,
|
|
'source-layer': constants.TRIBAL_SOURCE_LAYER,
|
|
'type': 'circle',
|
|
'filter': ['==', ['geometry-type'], 'Point'],
|
|
'paint': {
|
|
'circle-radius': constants.TRIBAL_ALASKA_CIRCLE_RADIUS,
|
|
'circle-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
|
|
'circle-opacity': constants.HIGH_ZOOM_PRIORITIZED_FEATURE_FILL_OPACITY,
|
|
'circle-stroke-color': constants.FEATURE_BORDER_COLOR,
|
|
'circle-stroke-width': constants.ALAKSA_POINTS_STROKE_WIDTH,
|
|
'circle-stroke-opacity': constants.FEATURE_BORDER_OPACITY,
|
|
},
|
|
'minzoom': constants.TRIBAL_MIN_ZOOM,
|
|
'maxzoom': constants.TRIBAL_MAX_ZOOM,
|
|
},
|
|
],
|
|
} :
|
|
{
|
|
'version': 8,
|
|
|
|
/**
|
|
* Census Tract Source
|
|
* */
|
|
'sources': {
|
|
|
|
/**
|
|
* The base map source source allows us to define where the tiles can be fetched from.
|
|
*/
|
|
[constants.BASE_MAP_SOURCE_NAME]: {
|
|
'type': 'raster',
|
|
'tiles': cartoLightBaseLayer.noLabels,
|
|
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
|
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
|
},
|
|
|
|
// The High zoom source:
|
|
[constants.HIGH_ZOOM_SOURCE_NAME]: {
|
|
// 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': [featureURLForTilesetName('high')],
|
|
// Setting 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,
|
|
},
|
|
|
|
// The Low zoom source:
|
|
[constants.LOW_ZOOM_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': [featureURLForTilesetName('low')],
|
|
'minzoom': constants.GLOBAL_MIN_ZOOM_LOW,
|
|
'maxzoom': constants.GLOBAL_MAX_ZOOM_LOW,
|
|
},
|
|
|
|
// The labels source:
|
|
'labels': {
|
|
'type': 'raster',
|
|
'tiles': cartoLightBaseLayer.labelsOnly,
|
|
},
|
|
},
|
|
|
|
/**
|
|
* Each object in the layers array references it's source via the source key.
|
|
*/
|
|
'layers': [
|
|
// The baseMapLayer
|
|
{
|
|
'id': constants.BASE_MAP_LAYER_ID,
|
|
'source': constants.BASE_MAP_SOURCE_NAME,
|
|
'type': 'raster',
|
|
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
|
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
|
},
|
|
|
|
// A layer for labels only
|
|
{
|
|
'id': 'labels-only-layer',
|
|
'source': 'labels',
|
|
'type': 'raster',
|
|
'layout': {
|
|
'visibility': 'visible',
|
|
},
|
|
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
|
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
|
},
|
|
|
|
// Low zoom layer (static) - prioritized features only
|
|
{
|
|
'id': constants.LOW_ZOOM_LAYER_ID,
|
|
'source': constants.LOW_ZOOM_SOURCE_NAME,
|
|
'source-layer': constants.SCORE_SOURCE_LAYER,
|
|
/**
|
|
* This shows features where the low score > score boundary threshold.
|
|
* In other words, this filter out non-prioritized features
|
|
*/
|
|
'filter': ['all',
|
|
['>', constants.SCORE_PROPERTY_LOW, constants.SCORE_BOUNDARY_THRESHOLD],
|
|
],
|
|
|
|
'type': 'fill',
|
|
'paint': {
|
|
'fill-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
|
|
'fill-opacity': constants.LOW_ZOOM_PRIORITIZED_FEATURE_FILL_OPACITY,
|
|
},
|
|
'minzoom': constants.GLOBAL_MIN_ZOOM_LOW,
|
|
'maxzoom': constants.GLOBAL_MAX_ZOOM_LOW,
|
|
},
|
|
|
|
// High zoom layer (static) - non-prioritized features only
|
|
{
|
|
'id': constants.HIGH_ZOOM_LAYER_ID,
|
|
'source': constants.HIGH_ZOOM_SOURCE_NAME,
|
|
'source-layer': constants.SCORE_SOURCE_LAYER,
|
|
/**
|
|
* This shows features where the high score < score boundary threshold.
|
|
* In other words, this filter out prioritized features
|
|
*/
|
|
'filter': ['all',
|
|
['<', constants.SCORE_PROPERTY_HIGH, constants.SCORE_BOUNDARY_THRESHOLD],
|
|
],
|
|
|
|
'type': 'fill',
|
|
'paint': {
|
|
'fill-opacity': constants.NON_PRIORITIZED_FEATURE_FILL_OPACITY,
|
|
},
|
|
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
|
|
},
|
|
|
|
// High zoom layer (static) - prioritized features only
|
|
{
|
|
'id': constants.PRIORITIZED_HIGH_ZOOM_LAYER_ID,
|
|
'source': constants.HIGH_ZOOM_SOURCE_NAME,
|
|
'source-layer': constants.SCORE_SOURCE_LAYER,
|
|
/**
|
|
* This shows features where the high score > score boundary threshold.
|
|
* In other words, this filter out non-prioritized features
|
|
*/
|
|
'filter': ['all',
|
|
['>', constants.SCORE_PROPERTY_HIGH, constants.SCORE_BOUNDARY_THRESHOLD],
|
|
],
|
|
|
|
'type': 'fill',
|
|
'paint': {
|
|
'fill-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
|
|
'fill-opacity': constants.HIGH_ZOOM_PRIORITIZED_FEATURE_FILL_OPACITY,
|
|
},
|
|
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
|
|
},
|
|
|
|
// High zoom layer (static) - controls the border between features
|
|
{
|
|
'id': constants.FEATURE_BORDER_LAYER_ID,
|
|
'source': constants.HIGH_ZOOM_SOURCE_NAME,
|
|
'source-layer': constants.SCORE_SOURCE_LAYER,
|
|
'type': 'line',
|
|
'paint': {
|
|
'line-color': constants.FEATURE_BORDER_COLOR,
|
|
'line-width': constants.FEATURE_BORDER_WIDTH,
|
|
'line-opacity': constants.FEATURE_BORDER_OPACITY,
|
|
},
|
|
'minzoom': constants.GLOBAL_MIN_ZOOM_FEATURE_BORDER,
|
|
'maxzoom': constants.GLOBAL_MAX_ZOOM_FEATURE_BORDER,
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|