From f4139723e56b93b2d3372f353ed30a222518abf7 Mon Sep 17 00:00:00 2001
From: Chandler Swift <chandler@chandlerswift.com>
Date: Sat, 8 Nov 2025 17:53:39 -0600
Subject: [PATCH] Only show plat labels when they fit

This commit was generated using Copilot, with GPT-5-Codex (Preview),
using this prompt:

> Some of the labels don't fit in their boxes at lower zoom. Remove
> labels as soon as they don't fit in their boxes.

I made no changes to Copilot's suggestions.
---
 map.html | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/map.html b/map.html
index 444cc9b..0b2cc10 100644
--- a/map.html
+++ b/map.html
@@ -29,6 +29,9 @@
             text-shadow: 0 0 6px white, 0 0 6px white, 0 0 6px white, 0 0 6px white, 0 0 6px white, 0 0 6px white;
             transform: translate(-50%, -50%);
         }
+        .label-hidden {
+            opacity: 0;
+        }
         .leaflet-popup-content-wrapper {
             height: min(800px, 60vh);
             overflow-y: auto;
@@ -211,6 +214,44 @@
                 ],
             }).addTo(map);
 
+            const platLabelEntries = []; // Cache label markers paired with their plat polygons
+
+            function updatePlatLabelVisibility() {
+                for (const entry of platLabelEntries) {
+                    const { marker, layer } = entry;
+                    const labelEl = marker.getElement();
+                    if (!labelEl) {
+                        continue;
+                    }
+                    const textEl = labelEl.querySelector('div');
+                    if (!textEl) {
+                        continue;
+                    }
+                    const bounds = layer.getBounds();
+                    if (!bounds.isValid()) {
+                        labelEl.classList.add('label-hidden');
+                        continue;
+                    }
+                    labelEl.classList.remove('label-hidden');
+                    // Compare rendered label size in pixels against the plat's projected bounding box
+                    const sw = map.latLngToLayerPoint(bounds.getSouthWest());
+                    const ne = map.latLngToLayerPoint(bounds.getNorthEast());
+                    const platWidth = Math.abs(ne.x - sw.x);
+                    const platHeight = Math.abs(ne.y - sw.y);
+                    const labelWidth = textEl.offsetWidth;
+                    const labelHeight = textEl.offsetHeight;
+                    const fits = labelWidth <= platWidth && labelHeight <= platHeight;
+                    if (fits) {
+                        labelEl.classList.remove('label-hidden');
+                    } else {
+                        labelEl.classList.add('label-hidden');
+                    }
+                }
+            }
+
+            map.on('zoomend', updatePlatLabelVisibility);
+            map.on('moveend', updatePlatLabelVisibility);
+            map.on('resize', updatePlatLabelVisibility);
 
             // Make these requests in parallel
             const track_req_promise = fetch('data/track.geojson');
@@ -274,6 +315,9 @@
                                     html: "<div>" + feature.properties.TAO_NAME + "</div>",
                                 }),
                                 interactive: false,
+                            }).once('add', function() {
+                                platLabelEntries.push({ marker: this, layer });
+                                updatePlatLabelVisibility();
                             }).addTo(map);
                         },
                     }).addTo(map);
@@ -327,6 +371,8 @@
                 [47.4865,-93.4068],
                 [47.4992,-93.3746],
             ]);
+
+            map.whenReady(updatePlatLabelVisibility);
         })();
     </script>
 </body>