From 0cf12b65a24c447061b19b3439847b01bfbdefaf Mon Sep 17 00:00:00 2001
From: Matt Stone <mstone@azavea.com>
Date: Thu, 8 Sep 2022 09:47:45 -0500
Subject: [PATCH 1/2] Add labels to municipal boundaries layer

---
 src/app/src/App.css                           | 18 ++++++++++
 .../Layers/MunicipalBoundariesLayer.js        | 36 +++++++++++++++++--
 src/app/src/constants.js                      |  2 ++
 3 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/app/src/App.css b/src/app/src/App.css
index 064dd4fa..40ace336 100644
--- a/src/app/src/App.css
+++ b/src/app/src/App.css
@@ -59,3 +59,21 @@
     border-radius: 50%;
     background-color: var(--chakra-colors-black);
 }
+
+/* end Leaflet.DistortableImage overrides */
+
+.muni-label {
+    background: rgba(255, 255, 255, 0);
+    border: 0;
+    border-radius: 0px;
+    box-shadow: 0 0px 0px;
+    font-weight: bold;
+    font-size: var(--chakra-fontSizes-sm);
+    color: var(--chakra-colors-purple-900);
+    text-shadow: 0 0 0.2em var(--chakra-colors-purple-50), 0 0 0.2em var(--chakra-colors-purple-50);
+}
+
+.muni-label-light {
+    color: var(--chakra-colors-purple-50);
+    text-shadow: 0 0 0.2em var(--chakra-colors-purple-900), 0 0 0.2em var(--chakra-colors-purple-900);
+}
\ No newline at end of file
diff --git a/src/app/src/components/Layers/MunicipalBoundariesLayer.js b/src/app/src/components/Layers/MunicipalBoundariesLayer.js
index ad26db0b..bb721e5f 100644
--- a/src/app/src/components/Layers/MunicipalBoundariesLayer.js
+++ b/src/app/src/components/Layers/MunicipalBoundariesLayer.js
@@ -1,7 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import L from 'leaflet';
 
 import { useLayerVisibility, useMapLayer } from '../../hooks';
+import { useSelector } from 'react-redux';
+import { MUNICIPAL_BOUNDARY_LABELS_MIN_ZOOM_LEVEL } from '../../constants';
 
 const MUNICIPAL_BOUNDARIES_LAYER_STYLE = {
     color: '#553C9A', // var(--chakra-colors-purple-700)
@@ -28,7 +30,35 @@ export default function MunicipalBoundariesLayer() {
 }
 
 function RenderGeoJson({ json }) {
-    useMapLayer(
-        L.geoJSON(json, { style: () => MUNICIPAL_BOUNDARIES_LAYER_STYLE })
+    const { basemapType, mapZoom } = useSelector(state => state.map);
+
+    // Separating this condition to its own memoized value prevents
+    // re-creation of the layer on every zoom change
+    const shouldShowLabels = useMemo(
+        () => mapZoom > MUNICIPAL_BOUNDARY_LABELS_MIN_ZOOM_LEVEL,
+        [mapZoom]
+    );
+
+    const layer = useMemo(
+        () =>
+            L.geoJSON(json, {
+                style: () => MUNICIPAL_BOUNDARIES_LAYER_STYLE,
+                onEachFeature: shouldShowLabels
+                    ? (feature, layer) => {
+                          layer.bindTooltip(feature.properties.name20, {
+                              permanent: true,
+                              direction: 'center',
+                              className: `muni-label${
+                                  basemapType === 'satellite'
+                                      ? ' muni-label-light'
+                                      : ''
+                              }`,
+                          });
+                      }
+                    : null,
+            }),
+        [json, basemapType, shouldShowLabels]
     );
+
+    useMapLayer(layer);
 }
diff --git a/src/app/src/constants.js b/src/app/src/constants.js
index 27eaac04..c41c37ff 100644
--- a/src/app/src/constants.js
+++ b/src/app/src/constants.js
@@ -27,3 +27,5 @@ export const PARCELS_LAYER_URL =
     'https://services.nconemap.gov/secure/rest/services/NC1Map_Parcels/MapServer';
 
 export const SIDEBAR_TEXT_TOOLTIP_THRESHOLD = 30;
+
+export const MUNICIPAL_BOUNDARY_LABELS_MIN_ZOOM_LEVEL = 9;

From 6729ef7341f5dfc367663a9bcba6ab67ae6af502 Mon Sep 17 00:00:00 2001
From: Matt Stone <mstone@azavea.com>
Date: Thu, 8 Sep 2022 09:52:17 -0500
Subject: [PATCH 2/2] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 582f3963..fbcbaa94 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add distorable reference image layer [#46](https://github.com/azavea/iow-boundary-tool/pull/46)
 - Add Land & water basemap [#48](https://github.com/azavea/iow-boundary-tool/pull/48)
 - Add user reference image upload [#60](https://github.com/azavea/iow-boundary-tool/pull/60)
+- Add labels to municipal boundary layer [#61](https://github.com/azavea/iow-boundary-tool/pull/61)
 
 ### Changed