County label enhancement (#236)

districtr · Jan 3, 2025 · 47e777f · 47e777f
1 parent 580252c
commit 47e777f
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 26 deletions.
diff --git a/app/src/app/components/sidebar/Layers.tsx b/app/src/app/components/sidebar/Layers.tsx
@@ -64,9 +64,14 @@ export default function Layers() {
         >
           Show painted districts
         </CheckboxGroup.Item>
-        <CheckboxGroup.Item value="2" onClick={() => setMapOptions({
-          showZoneNumbers: !mapOptions.showZoneNumbers
-        })}>
+        <CheckboxGroup.Item
+          value="2"
+          onClick={() =>
+            setMapOptions({
+              showZoneNumbers: !mapOptions.showZoneNumbers,
+            })
+          }
+        >
           Show numbering for painted districts <i>(experimental)</i>
         </CheckboxGroup.Item>
         <CheckboxGroup.Item
@@ -102,11 +107,24 @@ export default function Layers() {
       </Heading>
       <CheckboxGroup.Root
         name="contextualLayers"
-        value={COUNTY_LAYER_IDS.every(layerId => visibleLayerIds.includes(layerId)) ? ['1'] : []}
+        value={[
+          COUNTY_LAYER_IDS.every(layerId => visibleLayerIds.includes(layerId)) ? '1' : '',
+          mapOptions.prominentCountyNames ? 'prominentCountyNames' : '',
+        ]}
       >
         <CheckboxGroup.Item value="1" onClick={() => toggleLayers(COUNTY_LAYER_IDS)}>
           Show county boundaries
         </CheckboxGroup.Item>
+        <CheckboxGroup.Item
+          value="prominentCountyNames"
+          onClick={() =>
+            setMapOptions({
+              prominentCountyNames: !mapOptions.prominentCountyNames,
+            })
+          }
+        >
+          Emphasize County Names
+        </CheckboxGroup.Item>
         <CheckboxGroup.Item value="2" disabled>
           Show tribes and communities
         </CheckboxGroup.Item>

diff --git a/app/src/app/constants/basemapLayers.ts b/app/src/app/constants/basemapLayers.ts
@@ -1105,27 +1105,6 @@ export const BASEMAP_LAYERS: LayerSpecification[] = [
       'line-width': ['interpolate', ['exponential', 1.6], ['zoom'], 6, .625, 9, 1.625, 18, 2.25],
     },
   },
-  {
-    id: 'counties_labels',
-    type: 'symbol',
-    source: 'counties',
-    'source-layer': 'tl_2023_us_county_label',
-    minzoom: 6,
-    layout: {
-      'text-field': ['get', 'NAME'],
-      'text-font': ['Barlow Regular'],
-      'text-size': 10,
-      'text-transform': 'uppercase',
-      'text-letter-spacing': 0.1,
-      'text-max-width': 9,
-      'text-padding': ['interpolate', ['linear'], ['zoom'], 5, 3, 8, 7, 12, 11],
-    },
-    paint: {
-      'text-color': '#666',
-      'text-halo-color': '#ffffff',
-      'text-halo-width': 2,
-    },
-  },
   {
     id: 'places_locality',
     type: 'symbol',
@@ -1282,4 +1261,25 @@ export const BASEMAP_LAYERS: LayerSpecification[] = [
       'text-color': '#b8b8b8',
     },
   },
+  {
+    id: 'counties_labels',
+    type: 'symbol',
+    source: 'counties',
+    'source-layer': 'tl_2023_us_county_label',
+    minzoom: 6,
+    layout: {
+      'text-field': ['get', 'NAME'],
+      'text-font': ['Barlow Bold'],
+      'text-size': ['interpolate', ['linear'], ['zoom'], 5, 8, 8, 12, 12, 16],
+      'text-transform': 'uppercase',
+      'text-letter-spacing': 0.1,
+      'text-max-width': 12,
+      'text-padding': ['interpolate', ['linear'], ['zoom'], 5, 3, 8, 7, 12, 11],
+    },
+    paint: {
+      'text-color': '#666',
+      'text-halo-color': '#ffffff',
+      'text-halo-width': 2,
+    }
+  },
 ];
diff --git a/app/src/app/store/mapRenderSubs.ts b/app/src/app/store/mapRenderSubs.ts
@@ -318,12 +318,25 @@ export const getRenderSubscriptions = (useMapStore: typeof _useMapStore, useHove
     ([stateFp, getMapRef]) => {
       const mapRef = getMapRef()
       if (!mapRef) return
-      const filterExpression = (stateFp ? ["==", ["slice", ["get", "GEOID"], 0, 2], stateFp] : true) as any
+      const filterExpression = ["==", ["slice", ["get", "GEOID"], 0, 2], stateFp ? stateFp : '--'] as any
       COUNTY_LAYERS.forEach(layer => {
         mapRef.getLayer(layer) && mapRef.setFilter(layer,  ["any", filterExpression])
       })
     }
   )
+  const countyEmphasisSub = useMapStore.subscribe(state => state.mapOptions.prominentCountyNames, (prominentCountyNames) => {
+    const mapRef = useMapStore.getState().getMapRef();
+    if (!mapRef) return;
+    const layers = mapRef.getStyle().layers;
+    const layerLength = layers.length;
+    if (prominentCountyNames) {
+      mapRef.moveLayer('counties_labels', layers[layerLength - 1].id); // move to top
+      mapRef.setLayoutProperty('counties_labels', 'text-font', ['Barlow Bold']);
+    } else {
+      mapRef.moveLayer('counties_labels', 'counties_boundary'); // move to other county labes
+      mapRef.setLayoutProperty('counties_labels', 'text-font', ['Barlow Regular']);
+    }
+  })
 
   const _hoverMapSideEffectRender = useHoverStore.subscribe(
     state => state.hoverFeatures,

diff --git a/app/src/app/store/mapStore.ts b/app/src/app/store/mapStore.ts
@@ -761,6 +761,7 @@ export const useMapStore = create(
           showBrokenDistricts: false,
           mode: 'default',
           lockPaintedAreas: false,
+          prominentCountyNames: true
         },
         setMapOptions: options => set({mapOptions: {...get().mapOptions, ...options}}),
         toggleHighlightBrokenDistricts: (_ids, _higlighted) => {

diff --git a/app/src/app/store/types.ts b/app/src/app/store/types.ts
@@ -10,6 +10,7 @@ export type DistrictrMapOptions = {
   paintByCounty?: boolean;
   currentStateFp?: string;
   showPopulationTooltip?: boolean;
+  prominentCountyNames?: boolean;
 };
 
 export type DistrictrChartOptions = {