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:
parent
a9d7404f85
commit
f4139723e5
1 changed files with 46 additions and 0 deletions
46
map.html
46
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue