Make source/layer comments correspond

- getOSBaseMap and Map*Layers should have the same layer comments
- modify constants to have matching styles between Tribal and Tracts
This commit is contained in:
Vim USDS 2022-08-16 16:18:34 -07:00
commit e1b5c598da
4 changed files with 77 additions and 76 deletions

View file

@ -88,7 +88,7 @@ const MapTractLayers = ({
minzoom={constants.GLOBAL_MIN_ZOOM_LOW}
>
{/* Low zoom layer - prioritized features only */}
{/* Low zoom layer (static) - prioritized features only */}
<Layer
id={constants.LOW_ZOOM_LAYER_ID}
source-layer={constants.SCORE_SOURCE_LAYER}
@ -112,7 +112,7 @@ const MapTractLayers = ({
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
>
{/* High zoom layer - non-prioritized features only */}
{/* High zoom layer (static) - non-prioritized features only */}
<Layer
id={constants.HIGH_ZOOM_LAYER_ID}
source-layer={constants.SCORE_SOURCE_LAYER}
@ -124,7 +124,7 @@ const MapTractLayers = ({
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
/>
{/* High zoom layer - prioritized features only */}
{/* High zoom layer (static) - prioritized features only */}
<Layer
id={constants.PRIORITIZED_HIGH_ZOOM_LAYER_ID}
source-layer={constants.SCORE_SOURCE_LAYER}
@ -137,7 +137,7 @@ const MapTractLayers = ({
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
/>
{/* High zoom layer - controls the border between features */}
{/* High zoom layer (static) - controls the border between features */}
<Layer
id={constants.FEATURE_BORDER_LAYER_ID}
source-layer={constants.SCORE_SOURCE_LAYER}
@ -151,18 +151,6 @@ const MapTractLayers = ({
minzoom={constants.GLOBAL_MIN_ZOOM_FEATURE_BORDER}
/>
{/* High zoom layer - border styling around the selected feature */}
<Layer
id={constants.SELECTED_FEATURE_BORDER_LAYER_ID}
source-layer={constants.SCORE_SOURCE_LAYER}
filter={filter} // This filter filters out all other features except the selected feature.
type='line'
paint={{
'line-color': constants.SELECTED_FEATURE_BORDER_COLOR,
'line-width': constants.SELECTED_FEATURE_BORDER_WIDTH,
}}
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
/>
</Source>
</>
): (
@ -180,7 +168,7 @@ const MapTractLayers = ({
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
>
{/* High zoom layer - border styling around the selected feature */}
{/* High zoom layer (dynamic) - border styling around the selected feature */}
<Layer
id={constants.SELECTED_FEATURE_BORDER_LAYER_ID}
source-layer={constants.SCORE_SOURCE_LAYER}

View file

@ -62,7 +62,7 @@ const MapTribalLayer = ({
source-layer={constants.TRIBAL_SOURCE_LAYER}
type='fill'
paint={{
'fill-color': constants.TRIBAL_FILL_COLOR,
'fill-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
'fill-opacity': constants.TRIBAL_FEATURE_FILL_OPACITY}}
minzoom={constants.TRIBAL_MIN_ZOOM}
maxzoom={constants.TRIBAL_MAX_ZOOM}
@ -104,7 +104,7 @@ const MapTribalLayer = ({
type='circle'
paint={{
'circle-radius': constants.TRIBAL_ALASKA_CIRCLE_RADIUS,
'circle-color': constants.TRIBAL_ALASKA_CIRCLE_FILL_COLOR,
'circle-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
}}
minzoom={constants.TRIBAL_MIN_ZOOM}
maxzoom={constants.TRIBAL_MAX_ZOOM}

View file

@ -241,11 +241,12 @@ export const TRIBAL_BORDER_COLOR = '##4EA5CF';
export const SELECTED_TRIBAL_BORDER_COLOR = '#1A4480';
export const TRIBAL_FILL_COLOR = '#768FB3';
export const TRIBAL_ALASKA_CIRCLE_FILL_COLOR = '#768FB3';
export const TRIBAL_ALASKA_CIRCLE_RADIUS = 10;
export const TRIBAL_ALASKA_CIRCLE_RADIUS = 5;
// Widths
export const FEATURE_BORDER_WIDTH = 0.8;
export const SELECTED_FEATURE_BORDER_WIDTH = 5.0;
export const ALAKSA_POINTS_STROKE_WIDTH = 1.0;
// Bounds - these bounds can be obtained by using the getCurrentMapBoundingBox() function in the map
export const GLOBAL_MAX_BOUNDS: LngLatBoundsLike = [

View file

@ -105,8 +105,8 @@ export const getOSBaseMap = (
'source-layer': constants.TRIBAL_SOURCE_LAYER,
'type': 'fill',
'paint': {
'fill-color': constants.TRIBAL_FILL_COLOR,
'fill-opacity': constants.TRIBAL_FEATURE_FILL_OPACITY,
'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,
@ -139,7 +139,11 @@ export const getOSBaseMap = (
'filter': ['==', ['geometry-type'], 'Point'],
'paint': {
'circle-radius': constants.TRIBAL_ALASKA_CIRCLE_RADIUS,
'circle-color': constants.TRIBAL_ALASKA_CIRCLE_FILL_COLOR,
'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,
@ -212,55 +216,19 @@ export const getOSBaseMap = (
'maxzoom': constants.GLOBAL_MAX_ZOOM,
},
/**
* High zoom layer - non-prioritized features only
*/
// A layer for labels 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,
'id': 'labels-only-layer',
'source': 'labels',
'type': 'raster',
'layout': {
'visibility': 'visible',
},
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
'minzoom': constants.GLOBAL_MIN_ZOOM,
'maxzoom': constants.GLOBAL_MAX_ZOOM,
},
/**
* High zoom layer - 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,
},
/**
* Low zoom layer - prioritized features only
*/
// Low zoom layer (static) - prioritized features only
{
'id': constants.LOW_ZOOM_LAYER_ID,
'source': constants.LOW_ZOOM_SOURCE_NAME,
@ -282,16 +250,60 @@ export const getOSBaseMap = (
'maxzoom': constants.GLOBAL_MAX_ZOOM_LOW,
},
// A layer for labels only
// High zoom layer (static) - non-prioritized features only
{
'id': 'labels-only-layer',
'source': 'labels',
'type': 'raster',
'layout': {
'visibility': 'visible',
'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,
'maxzoom': constants.GLOBAL_MAX_ZOOM,
'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,
},
],
};