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

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 */}
         <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}

client/src/components/MapTribalLayers/MapTribalLayers.tsx

@@ -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}

client/src/data/constants.tsx

@@ -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 = [

client/src/data/getOSBaseMap.tsx

@@ -105,8 +105,8 @@ export const getOSBaseMap = (
         '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,
+          '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,
       },
 
-      /**
+      // A layer for labels only
-       * High zoom layer - non-prioritized features only
-       */
       {
-        'id': constants.HIGH_ZOOM_LAYER_ID,
+        'id': 'labels-only-layer',
-        'source': constants.HIGH_ZOOM_SOURCE_NAME,
+        'source': 'labels',
-        'source-layer': constants.SCORE_SOURCE_LAYER,
+        'type': 'raster',
-        /**
+        'layout': {
-         * This shows features where the high score < score boundary threshold.
+          'visibility': 'visible',
-         * 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,
+        'minzoom': constants.GLOBAL_MIN_ZOOM,
+        'maxzoom': constants.GLOBAL_MAX_ZOOM,
       },
 
-      /**
+      // Low zoom layer (static) - prioritized features only
-       * 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
-       */
       {
         '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',
+        'id': constants.HIGH_ZOOM_LAYER_ID,
-        'source': 'labels',
+        'source': constants.HIGH_ZOOM_SOURCE_NAME,
-        'type': 'raster',
+        'source-layer': constants.SCORE_SOURCE_LAYER,
-        'layout': {
+        /**
-          'visibility': 'visible',
+         * 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,
+        'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
-        'maxzoom': constants.GLOBAL_MAX_ZOOM,
+      },
+
+      // 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,
       },
     ],
   };