From 60056a56217974c86ba5299fbc60f5100bf141b8 Mon Sep 17 00:00:00 2001
From: Rob Labs <roblabs@users.noreply.github.com>
Date: Sat, 26 Apr 2025 05:34:15 -0700
Subject: [PATCH] Add a label to a polygon with `name` (#561)

* fix to toggle visibility of the label layer for line data

* Add polygon label along poly border.  Related to #555.  Depends on #560
---
 app/src/PageMap.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/app/src/PageMap.tsx b/app/src/PageMap.tsx
index 9b2f618..2185c85 100644
--- a/app/src/PageMap.tsx
+++ b/app/src/PageMap.tsx
@@ -219,6 +219,30 @@ function MapView(props: {
           },
           filter: ["==", ["geometry-type"], "Point"],
         });
+        map.addLayer({
+          id: `tileset_polygon_label_${vectorLayer}`,
+          type: "symbol",
+          source: "tileset",
+          "source-layer": vectorLayer,
+          layout: {
+            "text-field": ["get", "name"],
+            "text-font": ["Noto Sans Regular"],
+            "text-max-angle": 85,
+            "text-offset": [0, 1],
+            "text-anchor": "bottom",
+            "text-rotation-alignment": "map",
+            "text-keep-upright": true,
+            "text-size": 10,
+            "symbol-placement": "line",
+            "symbol-spacing": 250,
+          },
+          paint: {
+            "text-color": colorForIdx(i),
+            "text-halo-color": flavor,
+            "text-halo-width": 2,
+          },
+          filter: ["==", ["geometry-type"], "Polygon"],
+        });
       }
     } else {
       map.addSource("tileset", {
@@ -286,6 +310,7 @@ function MapView(props: {
       setVisibility(`tileset_circle_${id}`, visibility);
       setVisibility(`tileset_line_label_${id}`, visibility);
       setVisibility(`tileset_point_label_${id}`, visibility);
+      setVisibility(`tileset_polygon_label_${id}`, visibility);
     }
   });