Add labels to municipal boundaries layer

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
 

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);
+}

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);
 }

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;