From e1b5c598dae0f041b04e2cfaeba8d48a42104342 Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Tue, 16 Aug 2022 16:18:34 -0700 Subject: [PATCH] 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 --- .../MapTractLayers/MapTractLayers.tsx | 22 +--- .../MapTribalLayers/MapTribalLayers.tsx | 4 +- client/src/data/constants.tsx | 3 +- client/src/data/getOSBaseMap.tsx | 124 ++++++++++-------- 4 files changed, 77 insertions(+), 76 deletions(-) diff --git a/client/src/components/MapTractLayers/MapTractLayers.tsx b/client/src/components/MapTractLayers/MapTractLayers.tsx index 472bf4b5..93c96d5a 100644 --- a/client/src/components/MapTractLayers/MapTractLayers.tsx +++ b/client/src/components/MapTractLayers/MapTractLayers.tsx @@ -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 */} - {/* High zoom layer - non-prioritized features only */} + {/* High zoom layer (static) - non-prioritized features only */} - {/* High zoom layer - prioritized features only */} + {/* High zoom layer (static) - prioritized features only */} - {/* High zoom layer - controls the border between features */} + {/* High zoom layer (static) - controls the border between features */} - {/* High zoom layer - border styling around the selected feature */} - ): ( @@ -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 */} 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, }, ], };