fix: apply label config from spreadsheet

Fixes #649

README.md

@@ -25,15 +25,15 @@ In order for a dataset to be used as a query layer within the application, it mu
 
 ### Field Aliases
 
-These are managed via the "Data" tab of the AGOL item. Any changes should immediately be reflected in the application. As a backup, the config spreadsheet supports defining aliases for fields with the following syntax: `FieldName (Field Alias)`. If an alias is defined in the config spreadsheet, it will take precedence over the AGOL alias.
+These are managed via the "Data" tab of the AGOL item. Any changes should immediately be reflected in the application. The config spreadsheet also supports defining aliases for fields with the following syntax: `FieldName (Field Alias)`. If an alias is defined in the config spreadsheet, it will take precedence over the AGOL alias.
 
 ### Symbology
 
 This is managed via the "Visualization" tab of the AGOL item. Any changes should immediately be reflected in the application. If there is no specific symbology defined, the app has some reasonable defaults that look better than the AGOL defaults.
 
 ### Map Labels
 
-These are also managed via the "Visualization" tab of the AGOL item. Any changes should immediately be reflected in the application.
+These are also managed via the "Visualization" tab of the AGOL item. Any changes should immediately be reflected in the application. The config spreadsheet also supports defining a map label field via the "Map Label Field" column. If a map label field is defined in the config spreadsheet, it will take precedence over the AGOL label field.
 
 ### Links (Identify Panel)
 

src/app-config.js

@@ -67,4 +67,5 @@ export default {
       'https://services1.arcgis.com/99lidPhWCzftIe9K/arcgis/rest/services/UtahStreamsNHD/FeatureServer/0',
   },
   maxSearchCount: 30_000,
+  minLabelScale: 250_000,
 };

src/components/Map.jsx

@@ -362,6 +362,25 @@ export default function MapComponent() {
           });
         }
 
+        if (layer[fieldNames.queryLayers.mapLabelField]) {
+          featureLayer.labelingInfo = [
+            {
+              labelExpressionInfo: {
+                expression: `$feature.${layer[fieldNames.queryLayers.mapLabelField]}`,
+              },
+              symbol: {
+                type: 'text',
+                // @ts-ignore
+                color: 'black',
+                // @ts-ignore
+                haloColor: 'white',
+                haloSize: 1,
+              },
+              minScale: appConfig.minLabelScale,
+            },
+          ];
+        }
+
         const where = getWhere(
           filter.attribute,
           layer,