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.
This commit is contained in:
Chandler Swift 2025-11-08 17:53:39 -06:00
parent a9d7404f85
commit f4139723e5
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F

View file

@ -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; 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%); transform: translate(-50%, -50%);
} }
.label-hidden {
opacity: 0;
}
.leaflet-popup-content-wrapper { .leaflet-popup-content-wrapper {
height: min(800px, 60vh); height: min(800px, 60vh);
overflow-y: auto; overflow-y: auto;
@ -211,6 +214,44 @@
], ],
}).addTo(map); }).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 // Make these requests in parallel
const track_req_promise = fetch('data/track.geojson'); const track_req_promise = fetch('data/track.geojson');
@ -274,6 +315,9 @@
html: "<div>" + feature.properties.TAO_NAME + "</div>", html: "<div>" + feature.properties.TAO_NAME + "</div>",
}), }),
interactive: false, interactive: false,
}).once('add', function() {
platLabelEntries.push({ marker: this, layer });
updatePlatLabelVisibility();
}).addTo(map); }).addTo(map);
}, },
}).addTo(map); }).addTo(map);
@ -327,6 +371,8 @@
[47.4865,-93.4068], [47.4865,-93.4068],
[47.4992,-93.3746], [47.4992,-93.3746],
]); ]);
map.whenReady(updatePlatLabelVisibility);
})(); })();
</script> </script>
</body> </body>